/* ============================================================================
Busty Asians — stylesheet
----------------------------------------------------------------------------
Palette: ORCHID. Purple #663399 is the brand and stays the base; pink is the
accent, and it was already in the site as the colour of scene durations.
The one rule everything else follows:
REDUCING AN IMAGE IS SAFE. ENLARGING IT IS NEVER SAFE.
The archive is 7,051 images; the big shots are 324x244 (recent) or 298x224
(older), the small ones 163x122. Nothing here is ever scaled above its
native size. What changes between screens is the ARRANGEMENT.
desktop phone
+--------+-----+-----+ +-----------+
| | 163 | 163 | | 324 |
| 324 +-----+-----+ +-----+-----+
| | 163 | 163 | | 163 | 163 |
+--------+-----+-----+ +-----+-----+
650 x 244 | 163 | 163 |
+-----+-----+
324x244 is exactly twice 163x122, so two small ones stacked equal the height
of the big one and the block closes with no gaps.
========================================================================= */
:root{
/* image geometry - never change these without re-checking the arithmetic */
--big-w:324px; --big-h:244px;
--sml-w:163px; --sml-h:122px;
--por-w:288px; /* model portrait, native */
--pad:18px;
--col:calc(var(--big-w) + var(--sml-w)*2 + var(--pad)*2); /* 686px */
--r:14px;
--font:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
/* ORCHID — as duas paletas.
---------------------------------------------------------------------------
A ordem aqui e o que faz o tema funcionar nos dois sentidos:
1. :root claro, o que se ve sem preferencia nenhuma
2. @media prefers-color-scheme se o sistema pede escuro, e escuro
3. :root[data-theme="…"] a escolha da pessoa ganha aos dois
Antes estava "escuro" em :root e o trazia data-theme="dark" escrito a
mao: a paleta clara existia e nao havia como la chegar, nem sequer pela
preferencia do sistema.
No claro o acento TEM de escurecer: um rosa que resulta sobre quase-preto e
ilegivel sobre quase-branco. Mesmo tom, outra luminosidade. */
/* Texto SOBRE UM CARTÃO.
---------------------------------------------------------------------------
O cartão é roxo escuro nos DOIS temas - no claro são painéis roxos sobre
fundo lilás. Logo o texto em cima dele é sempre claro, tema nenhum muda isso.
Existe como token porque escrever #fff à mão foi o que gerou os erros: uns
elementos ficaram com --txt (escuro sobre escuro, ilegível no tema claro) e
outros com #fff em sítios que NÃO são cartão (branco sobre lilás, invisível).
Com o token, a pergunta passa a ser "isto está num cartão?" e não "que cor?". */
:root{
--on-card:#FFFFFF;
--on-card-2:rgba(255,255,255,.84);
--on-card-3:rgba(255,255,255,.72);
/* O acento QUANDO ESTA SOBRE UM CARTAO.
O acento normal escurece no tema claro (rosa claro sobre quase-branco nao
se le). Mas o cartao e escuro nos dois temas, e ai o rosa escuro fica rosa
escuro sobre roxo escuro - media 1,29:1, ilegivel. Havia um remendo com
[data-theme="light"] que so disparava se a pessoa CARREGASSE no botao:
quem tem o sistema em claro e nunca escolheu nada apanhava o ilegivel. */
--accent-on-card:#FFB4DA;
}
/* 1 · claro */
:root{
--bg:#F0E9F7; --bg-2:rgba(102,51,153,.10); --card:#663399; --card-2:#54287E;
--txt:#2A1145; --txt-2:#4E3370; --txt-3:#735A92;
--line:rgba(42,17,69,.13);
--accent:#B01E63; --accent-2:#C72A73; --on-accent:#FFFFFF;
--hot:#B4600A;
--bar:rgba(255,255,255,.97);
--shadow:0 6px 22px rgba(40,18,80,.22);
--shadow-sm:0 2px 10px rgba(40,18,80,.16);
}
/* 2 · o sistema pede escuro */
@media (prefers-color-scheme:dark){
:root{
--bg:#170D26; --bg-2:#241539; --card:#26163F; --card-2:#311D4F;
--txt:#F3EAFF; --txt-2:#C0ABE4; --txt-3:#8E79B4;
--line:rgba(255,255,255,.10);
--accent:#FF7AB8; --accent-2:#FF9BCA; --on-accent:#2A0416;
--hot:#FFC44D;
--bar:rgba(20,10,34,.96);
--shadow:0 8px 30px rgba(0,0,0,.45);
--shadow-sm:0 2px 12px rgba(0,0,0,.30);
}
}
/* 3 · a escolha da pessoa, nos dois sentidos */
:root[data-theme="dark"]{
--bg:#170D26; --bg-2:#241539; --card:#26163F; --card-2:#311D4F;
--txt:#F3EAFF; --txt-2:#C0ABE4; --txt-3:#8E79B4;
--line:rgba(255,255,255,.10);
--accent:#FF7AB8; --accent-2:#FF9BCA; --on-accent:#2A0416;
--hot:#FFC44D;
--bar:rgba(20,10,34,.96);
--shadow:0 8px 30px rgba(0,0,0,.45);
--shadow-sm:0 2px 12px rgba(0,0,0,.30);
}
:root[data-theme="light"]{
--bg:#F0E9F7; --bg-2:rgba(102,51,153,.10); --card:#663399; --card-2:#54287E;
--txt:#2A1145; --txt-2:#4E3370; --txt-3:#735A92;
--line:rgba(42,17,69,.13);
--accent:#B01E63; --accent-2:#C72A73; --on-accent:#FFFFFF;
--hot:#B4600A;
--bar:rgba(255,255,255,.97);
--shadow:0 6px 22px rgba(40,18,80,.22);
--shadow-sm:0 2px 10px rgba(40,18,80,.16);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
margin:0;font-family:var(--font);font-size:16px;line-height:1.5;
background:var(--bg);color:var(--txt);
-webkit-font-smoothing:antialiased;
padding-bottom:env(safe-area-inset-bottom);
}
img{display:block;max-width:100%;height:auto;border:0}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--col);margin:0 auto;padding:0 0 40px}
/* ---------------------------------------------------------------- header */
/* One banner, drawn at the column width. width/height on the ![]()
are the
SOURCE dimensions - they only give the browser the 2.36:1 ratio to reserve,
and the CSS below decides how big it really is. */
.hdr{padding:14px 10px 10px}
.hdr a{display:block;max-width:var(--col);margin:0 auto}
.hdr img{display:block;width:100%;height:auto;border-radius:10px;
box-shadow:0 6px 22px rgba(0,0,0,.45)}
/* Desktop nav. Filled pills are fine here because the row never wraps.
Sized up from 13.5px: at that size it read as fine print under a big banner
and people were walking straight past it. */
.nav{display:flex;justify-content:center;flex-wrap:wrap;gap:4px;margin:2px 0 20px}
.nav a{padding:11px 18px;border-radius:9px;font-size:16px;font-weight:600;
letter-spacing:.01em;color:var(--txt)}
.nav a:hover,.nav a.on{background:var(--card);color:#fff}
.nav a.cta{background:var(--accent);color:var(--on-accent);font-weight:700}
.nav a.cta:hover{background:var(--accent-2)}
/* Claro/escuro, junto ao menu. Deliberadamente MAIS PEQUENO que os links: nao
e um destino como eles, e um interruptor. Mostra o icone do tema PARA ONDE
LEVA, nao daquele em que se esta - senao lê-se ao contrario. */
.themeb{
display:inline-flex;align-items:center;justify-content:center;
width:34px;height:34px;margin-left:6px;align-self:center;
background:none;border:1px solid var(--line);color:var(--txt-3);
border-radius:50%;cursor:pointer;padding:0;
}
.themeb:hover{border-color:var(--accent);color:var(--accent)}
.themeb:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.themeb svg{width:16px;height:16px}
.themeb__l{display:none}
:root[data-theme="light"] .themeb__d{display:none}
:root[data-theme="light"] .themeb__l{display:block}
@media (prefers-color-scheme:light){
:root:not([data-theme]) .themeb__d{display:none}
:root:not([data-theme]) .themeb__l{display:block}
}
/* O menu desaparece em telemovel (ha a barra de baixo), mas o interruptor tem
de continuar acessivel - fica sozinho, centrado, por baixo do banner. */
@media (max-width:700px){
.nav{display:flex;justify-content:center;margin:0 0 14px}
.nav a{display:none}
.themeb{margin:0}
}
.crumbs{font-size:12.5px;color:var(--txt-3);margin:0 0 12px;padding:0 10px}
.crumbs i{opacity:.5;font-style:normal;margin:0 5px}
/* ---------------------------------------------------------------- model head
Portrait at its native 288px and the FULL biography beside it. Every field
is shown: this block is what makes each model page unique. */
.mh{display:grid;grid-template-columns:var(--por-w) 1fr;gap:20px;
background:linear-gradient(135deg,var(--card),var(--card-2));
border-radius:var(--r);padding:20px;margin:0 0 22px;box-shadow:var(--shadow);color:#fff}
.mh__por img{width:var(--por-w);border-radius:10px;box-shadow:var(--shadow-sm)}
.mh__name{margin:0 0 2px;font-size:34px;line-height:1.06;font-weight:700;letter-spacing:-.02em}
.mh__sub{margin:0 0 14px;font-size:13.5px;color:var(--accent-on-card);font-weight:600}
.facts{display:grid;grid-template-columns:1fr 1fr;gap:0 22px;margin:0}
.facts>div{display:flex;justify-content:space-between;gap:10px;padding:6px 0;
border-bottom:1px solid rgba(255,255,255,.13)}
.facts dt{color:var(--on-card-3);font-size:12.5px;margin:0;white-space:nowrap}
.facts dd{margin:0;font-size:13.5px;font-weight:600;text-align:right}
.facts .wide{grid-column:1/-1}
/* ---------------------------------------------------------------- biography
The written biography and the film list. On the legacy pages this was the
only long-form original writing, and it runs from 44 to 3,053 characters -
so the long ones fold instead of pushing the scenes off the screen. */
.bio{background:var(--card);border-radius:var(--r);padding:20px var(--pad);
margin:0 0 22px;box-shadow:var(--shadow-sm)}
.bio__h{margin:0 0 10px;font-size:19px;font-weight:700;color:var(--accent)}
.bio__t{color:#fff;font-size:14.5px;line-height:1.68;text-align:justify;hyphens:auto}
.bio__t p{margin:0 0 11px}
.bio__t p:last-child{margin-bottom:0}
.bio__t em{color:var(--accent);font-style:normal;font-weight:600}
.bio__t a{color:var(--accent);text-decoration:underline;text-underline-offset:2px}
/* Folded by JS only: with scripts off the whole text is there, which is what a
reader without them - and a crawler - should get. */
.bio__t.is-folded{max-height:11.5em;overflow:hidden;
-webkit-mask-image:linear-gradient(#000 62%,transparent);
mask-image:linear-gradient(#000 62%,transparent)}
.bio__more{margin:10px 0 0;background:none;border:1px solid var(--line);color:var(--txt);
font:inherit;font-size:13px;font-weight:600;padding:7px 15px;border-radius:8px;
cursor:pointer}
.bio__more:hover{border-color:var(--accent);color:var(--accent)}
.bio__fh{margin:18px 0 9px;font-size:12px;font-weight:700;letter-spacing:.12em;
text-transform:uppercase;color:var(--txt-3);display:flex;align-items:center;gap:8px}
.bio__fh span{background:var(--bg-2);color:var(--txt-2);border-radius:20px;
padding:2px 9px;font-size:11px;letter-spacing:0}
.films{list-style:none;margin:0;padding:0;columns:2;column-gap:26px;font-size:13.5px}
.films li{break-inside:avoid;padding:4px 0 4px 15px;position:relative;
color:rgba(255,255,255,.85);line-height:1.4}
.films li::before{content:"";position:absolute;left:0;top:11px;width:5px;height:5px;
border-radius:50%;background:var(--accent);opacity:.75}
/* ---------------------------------------------------------------- members
A mesma casa, sem a montra: nada de vender a quem ja pagou. O que muda e o
fim de cada bloco, onde estao os ficheiros. */
.memtag{text-align:center;margin:0 0 12px;font-size:10.5px;font-weight:800;
letter-spacing:.2em;text-transform:uppercase;color:var(--accent)}
/* As fotos da area de membros sao 4 iguais, sem a grande - uma fila de quatro,
nao a grelha do bloco publico (4x163 + gaps = 658, cabe nos 686 da coluna).
Colunas FIXAS de 163 e nao 1fr: com 1fr as fotos esticavam de 163 para 170,
e ampliar nunca. As poucas que sao maiores encolhem para caber, que e seguro;
as mais pequenas ficam centradas no seu lugar. */
.mpics{display:grid;grid-template-columns:repeat(4,var(--sml-w));gap:3px;
justify-content:center;align-items:center;
padding:0 var(--pad) var(--pad)}
.mpics img{display:block;max-width:100%;height:auto;margin:0 auto;border-radius:3px}
.dl{display:flex;flex-wrap:wrap;gap:8px;align-items:center;
padding:0 var(--pad) var(--pad)}
.dl__btn{display:inline-flex;align-items:center;gap:8px;background:var(--accent);
color:var(--on-accent);font-weight:700;font-size:14px;padding:11px 20px;
border-radius:9px;min-height:44px}
.dl__btn:hover{background:var(--accent-2)}
.dl__btn svg{width:17px;height:17px}
.dl__btn--play{border:0;font:inherit;font-weight:700;cursor:pointer}
.dl__btn--play svg{width:15px;height:15px}
/* Ver e a accao principal; descarregar fica ao lado, disponivel mas discreto. */
/* Esta dentro do bloco de cena, que e cartao escuro nos dois temas. */
.dl__btn--alt{background:var(--bg-2);color:var(--on-card);border:1px solid var(--line)}
.dl__btn--alt:hover{background:var(--card-2);border-color:var(--accent)}
.dl__note{font-size:12px;color:var(--on-card-3)}
.dl--none{font-size:13px;color:var(--on-card-3);margin:0}
.dl--none a{color:var(--accent-on-card);text-decoration:underline}
/* Porque e que este nao toca aqui. */
.dl__why{margin:0;padding:0 var(--pad) var(--pad);font-size:12.5px;line-height:1.55;
color:var(--on-card-3)}
.dl__why strong{color:var(--accent-on-card);font-weight:700}
.dl__why a{color:var(--on-card);text-decoration:underline}
/* O leitor, so quando alguem o pede. */
.mplayer{position:relative;background:#000;margin:0 var(--pad) var(--pad);border-radius:9px;
overflow:hidden}
.mplayer video{display:block;width:100%;height:auto;max-height:70vh;background:#000}
.mplayer__x{position:absolute;top:8px;right:8px;width:34px;height:34px;border:0;
border-radius:50%;background:rgba(0,0,0,.62);color:#fff;font-size:21px;
line-height:1;cursor:pointer;backdrop-filter:blur(4px)}
.mplayer__x:hover{background:var(--accent);color:var(--on-accent)}
.mplayer__err{margin:0;padding:22px;color:#fff;font-size:13.5px;text-align:center}
.mplayer__err a{color:var(--accent);text-decoration:underline}
@media (max-width:700px){
.dl__btn{flex:1;justify-content:center;min-width:120px}
/* Duas por linha: quatro nao cabem sem esticar nem encolher demais. */
.mpics{grid-template-columns:repeat(2,var(--sml-w))}
}
/* ---------------------------------------------------------------- scene */
.scene{background:var(--card);border-radius:var(--r);margin:0 0 16px;overflow:hidden;
box-shadow:var(--shadow-sm)}
.scene__head{padding:14px var(--pad) 11px;display:flex;gap:12px;align-items:flex-start}
.av{width:44px;height:44px;border-radius:50%;flex:0 0 auto;object-fit:cover;
border:2px solid var(--accent);background:var(--bg-2)}
.scene__hh{min-width:0;flex:1}
.scene__who{display:flex;align-items:center;gap:8px;margin:0 0 3px;flex-wrap:wrap}
.scene__model{font-size:13.5px;font-weight:700;color:var(--accent-on-card)}
.scene__model:hover{text-decoration:underline}
.badge{font-size:10px;font-weight:800;letter-spacing:.05em;background:var(--hot);
color:#241a05;padding:2px 7px;border-radius:4px;text-transform:uppercase}
.scene__title{margin:0 0 8px;font-size:20px;line-height:1.28;font-weight:650;
letter-spacing:-.01em;color:#fff}
.meta{display:flex;flex-wrap:wrap;gap:5px 12px;font-size:12.5px;margin:0 0 8px;
color:rgba(255,255,255,.78)}
.meta span{display:inline-flex;align-items:center;gap:5px}
.meta svg{width:13px;height:13px;opacity:.75;flex:0 0 auto}
.tags{display:flex;flex-wrap:wrap;gap:5px}
.tag{font-size:11.5px;font-weight:600;padding:3px 9px;border-radius:20px;
background:rgba(255,255,255,.11);color:rgba(255,255,255,.9);
border:1px solid rgba(255,255,255,.14)}
.tag:hover{background:var(--accent);color:var(--on-accent);border-color:transparent}
/* the photo block - identical on every page */
.pics{display:grid;
grid-template-columns:var(--big-w) var(--sml-w) var(--sml-w);
grid-template-rows:var(--sml-h) var(--sml-h);
padding:0 var(--pad) var(--pad);justify-content:start}
.pics__big{grid-row:span 2;position:relative;display:flex;align-items:center;
justify-content:center;background:rgba(0,0,0,.25);overflow:hidden}
/* Older shots are 298 wide; they sit centred in the 324 column rather than
being stretched to fill it. */
.pics__big img{max-width:100%;height:auto}
.pics img.s{width:var(--sml-w);height:var(--sml-h)}
.pics__big,.pics img.s{cursor:pointer}
/* preview: dots and counter, shown on hover (see site.js) */
.dots{position:absolute;bottom:7px;left:0;right:0;display:flex;justify-content:center;gap:4px;
opacity:0;transition:opacity .2s;pointer-events:none}
.pics__big:hover .dots{opacity:1}
.dot{width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.45)}
.dot.on{background:var(--accent);width:14px;border-radius:3px}
.peek{position:absolute;top:7px;left:7px;background:rgba(0,0,0,.65);color:#fff;
font-size:10.5px;font-weight:700;padding:3px 8px;border-radius:4px;
opacity:0;transition:opacity .2s;pointer-events:none}
.pics__big:hover .peek{opacity:1}
/* ---------------------------------------------------------------- join */
.join{background:linear-gradient(135deg,var(--card),var(--card-2));border-radius:var(--r);
padding:24px;text-align:center;margin:22px 0;color:#fff;box-shadow:var(--shadow)}
.join h2{margin:0 0 6px;font-size:23px}
.join p{margin:0 0 16px;color:rgba(255,255,255,.82);font-size:15px}
.btn{display:inline-block;background:var(--accent);color:var(--on-accent);font-weight:800;
font-size:16px;padding:13px 30px;border-radius:9px}
.btn:hover{background:var(--accent-2)}
/* ---------------------------------------------------------------- listings */
.ttl{font-size:clamp(23px,4vw,31px);margin:14px 0 6px;padding:0 10px;letter-spacing:-.02em}
.lede{margin:0 0 18px;padding:0 10px;color:var(--txt-2);max-width:70ch}
/* Page header on the index pages.
The heading is the first line of the welcome prose - the same string the
legacy page used as its . The stays in the head where it
belongs and is never drawn. */
.ph{margin:0 0 20px}
.ph .lede{margin-bottom:8px}
.ph__h{font-size:clamp(21px,3.4vw,27px);line-height:1.25;margin:14px 0 10px;
padding:0 10px;letter-spacing:-.015em;font-weight:700}
.ttl__p{font-weight:400;color:var(--txt-3);font-size:.6em;letter-spacing:0}
/* For crawlers and screen readers on pages with no welcome prose - a document
heading has to exist, it just must not appear. */
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
/* ------------------------------------------------------- curated section */
.promo{display:flex;gap:0;background:var(--card);border-radius:var(--r);
overflow:hidden;margin:0 0 18px;box-shadow:var(--shadow-sm);
border:1px solid transparent}
.promo:hover{border-color:var(--accent)}
.promo__pics{display:grid;grid-template-columns:1fr 1fr;flex:0 0 auto;line-height:0}
.promo__pics img{display:block;width:var(--sml-w);height:auto}
.promo__body{padding:14px 16px;display:flex;flex-direction:column;justify-content:center;
min-width:0}
.promo__tag{font-size:10px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
color:var(--txt-3);margin:0 0 3px}
.promo__h{font-size:21px;font-weight:700;color:#fff;line-height:1.15;margin:0 0 6px}
.promo__t{font-size:13px;line-height:1.5;color:rgba(255,255,255,.76);margin:0 0 9px;
display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.promo__go{font-size:12.5px;font-weight:700;color:var(--accent)}
/* pages with no scenes: images at their own size, never stretched */
.loose{display:flex;flex-wrap:wrap;gap:10px;padding:0 10px;margin:0 0 18px}
.loose img{max-width:100%;height:auto;border-radius:8px}
/* The welcome prose, kept word for word from the legacy pages.
One size for every paragraph on every page: the old markup set type per
cell, so identical prose came out at three different sizes depending on
which page it was on. Justified and white, both asked for. */
/* A introducao esta sobre o FUNDO DA PAGINA, nao sobre um cartao: com #fff
ficava branco sobre lilas no tema claro, ou seja invisivel. */
.intro{padding:0 10px;margin:0 0 16px;color:var(--txt);max-width:74ch;line-height:1.65;
text-align:justify;hyphens:auto}
.intro p{margin:0 0 10px;font-size:14.5px}
.intro a{color:var(--accent);font-weight:600;text-decoration:underline;text-underline-offset:2px}
.intro a:hover{color:var(--txt)}
/* Justification needs somewhere to put the slack; on a narrow screen it opens
rivers of white instead. */
@media (max-width:520px){ .intro{text-align:left} }
/* ------------------------------------------------------- model strips */
.strip{margin:26px 0 0}
.strip__row{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;padding:0 10px}
.mini{display:block;background:var(--card);border-radius:10px;overflow:hidden;
box-shadow:var(--shadow-sm)}
.mini:hover{outline:2px solid var(--accent)}
.mini img,.mini__none{display:block;width:100%;aspect-ratio:170/230;object-fit:cover;
object-position:top;background:var(--bg-2)}
.mini__n{display:block;padding:7px 8px 0;font-size:13px;font-weight:700;color:#fff;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mini__c{display:block;padding:0 8px 8px;font-size:11px;color:var(--on-card-3)}
/* ------------------------------------------------------- archive volumes
Jumps between the thirteen index pages. Deliberately looks like the
pagination above it: the page then has ONE navigation idiom instead of two,
and eleven spelled-out labels stop being a wall of text. */
.vols{margin:26px 0 0}
.vols__row{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;padding:0 10px}
.vol{display:flex;flex-direction:column;align-items:center;justify-content:center;
min-width:46px;padding:7px 10px;border-radius:9px;background:var(--card);
color:var(--on-card-2);line-height:1.15}
.vol:hover{background:var(--card-2);color:var(--on-card)}
.vol.on{background:var(--accent);color:var(--on-accent)}
.vol__n{font-size:15px;font-weight:700}
.vol__c{font-size:10px;opacity:.62;font-variant-numeric:tabular-nums}
/* the themed sections keep their name - they are not numbered volumes */
.vol--named{min-width:auto}
.vol--named .vol__n{font-size:12.5px;font-weight:600;letter-spacing:.02em}
.vols .pagnote{margin-top:10px}
/* ------------------------------------------------------- scene page
A pagina de cena NAO tem desenho proprio para as fotos: usa o mesmo bloco de
todo o lado. Tinha um (grande em cima, quatro por baixo) e ao lado dele as
cenas relacionadas usavam o bloco normal - duas gramaticas visuais para a
mesma coisa, na mesma pagina. O que esta pagina tem de seu e o titulo, os
metadados e o schema, nao um arranjo diferente das fotos. */
.scmeta{margin:0;padding:0 10px;font-size:13.5px;color:var(--txt-2)}
.scmeta a{color:var(--accent);font-weight:600}
.scmeta a:hover{text-decoration:underline}
.scmeta i{opacity:.4;font-style:normal;margin:0 7px}
.scmore{margin:18px 0 0;padding:0 10px;text-align:center}
.scmore a{display:inline-block;padding:12px 22px;border-radius:9px;
background:var(--card);color:var(--on-card);font-size:14px;font-weight:600}
.scmore a:hover{background:var(--card-2);outline:1px solid var(--accent)}
/* ------------------------------------------------------- join page */
.offer{text-align:center;background:linear-gradient(135deg,var(--card),var(--card-2));
border-radius:var(--r);padding:26px 20px;margin:0 0 20px;box-shadow:var(--shadow)}
.offer__lead{margin:0 0 18px;font-size:17px;line-height:1.5;color:#fff;
max-width:52ch;margin-inline:auto}
.offer__lead strong{color:var(--accent)}
.offer__note{margin:12px 0 0;font-size:13px;color:rgba(255,255,255,.7)}
.offer__note a{color:var(--accent);text-decoration:underline}
.btn--big{font-size:18px;padding:15px 38px}
.offer--end{background:none;box-shadow:none;padding:6px 20px 0}
/* Everything that came off the old /ccbill/ page, in ONE panel: the two ways
to pay and the two errands an existing member arrives with. Apart they read
as four unrelated things. */
.pay{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:0 0 12px}
.pay__btn{display:flex;align-items:center;gap:13px;text-align:left;padding:14px 20px;
border-radius:11px;background:var(--bg-2);color:#fff;min-width:250px;
border:1px solid var(--line)}
.pay__btn:hover{border-color:var(--accent);transform:translateY(-1px)}
/* The icons carry their own colours - never tint or fade them, a card that
looks like a card is what makes the button read as payment at a glance. */
.pay__i{width:36px;height:24px;flex:0 0 auto;border-radius:3px;
box-shadow:0 1px 4px rgba(0,0,0,.35)}
.pay__btn strong{display:block;font-size:15.5px;line-height:1.25}
.pay__btn small{display:block;font-size:11.5px;opacity:.72;margin-top:1px}
.pay__btn--main{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.pay__btn--main small{opacity:.8}
.pay__btn--main:hover{background:var(--accent-2);border-color:var(--accent-2)}
.pay__note{margin:0 auto 14px;font-size:12.5px;color:var(--on-card-3);max-width:46ch}
.pay__foot{display:flex;gap:10px;justify-content:center;align-items:center;flex-wrap:wrap;
border-top:1px solid rgba(255,255,255,.12);padding-top:13px;font-size:13.5px}
.pay__foot a{color:var(--accent);font-weight:600}
.pay__foot a:hover{color:#fff;text-decoration:underline}
.pay__foot i{color:rgba(255,255,255,.3);font-style:normal}
.perks{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:0 10px;margin:0 0 22px}
.perk{background:var(--card);border-radius:10px;padding:16px 18px;box-shadow:var(--shadow-sm)}
.perk h2{margin:0 0 6px;font-size:15px;font-weight:700;color:var(--accent)}
.perk p{margin:0;font-size:13.5px;line-height:1.55;color:rgba(255,255,255,.82)}
.perk a{color:#fff;text-decoration:underline}
.legalnote{text-align:center;font-size:12px;color:var(--txt-3);margin:18px 0 0;padding:0 10px}
.legalnote a{color:var(--txt-3);text-decoration:underline}
.sec{font-size:11.5px;text-transform:uppercase;letter-spacing:.14em;font-weight:700;
color:var(--txt-3);margin:26px 0 10px;padding:0 10px}
.grid{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(163px,1fr));padding:0 10px}
.card{background:var(--card);border-radius:10px;overflow:hidden;box-shadow:var(--shadow-sm)}
.card:hover{outline:2px solid var(--accent)}
.card img{width:100%;height:auto;aspect-ratio:324/244;object-fit:cover}
.card__c{padding:7px 9px}
.card__t{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
font-size:12.5px;font-weight:600;line-height:1.3;color:#fff}
.card__m{font-size:11px;color:var(--on-card-3)}
/* models index */
.az{display:flex;flex-wrap:wrap;gap:5px;margin:0 0 18px;padding:0 10px}
.az a{min-width:32px;text-align:center;padding:6px 9px;background:var(--card);
border-radius:7px;font-weight:700;font-size:13px;color:var(--on-card-2)}
.az a:hover{background:var(--accent);color:var(--on-accent)}
.mgrid{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(144px,1fr));padding:0 10px}
.mcard{background:var(--card);border-radius:10px;overflow:hidden;box-shadow:var(--shadow-sm)}
.mcard:hover{outline:2px solid var(--accent)}
.mcard img{width:100%;aspect-ratio:288/450;object-fit:cover;object-position:top}
.mcard__n{display:block;padding:8px 9px 0;font-weight:700;font-size:13.5px;color:#fff}
.mcard__c{display:block;padding:0 9px 9px;font-size:11.5px;color:var(--on-card-3)}
/* ---------------------------------------------------------------- pagination
Sized up from 38x14px. These are the main way through 43 pages of a model or
12 volumes of the archive, so they should look like the controls they are -
and on a phone they have to be hittable with a thumb, which means the 44px
the accessibility guidelines ask for, not a number you have to aim at. */
.pag{display:flex;gap:7px;justify-content:center;flex-wrap:wrap;margin:26px 0 0;padding:0 10px}
/* Os numeros estao SOBRE um cartao: --txt aqui era escuro sobre roxo escuro,
e no tema claro nao se via nada. */
.pag a,.pag span{display:flex;align-items:center;justify-content:center;
min-width:46px;min-height:46px;padding:0 13px;border-radius:11px;
font-size:17px;font-weight:700;font-variant-numeric:tabular-nums;
color:var(--on-card);background:var(--card)}
.pag a:hover{background:var(--card-2);color:var(--on-card)}
.pag .on{background:var(--accent);color:var(--on-accent)}
.pag .nx{padding:0 19px;font-size:15px;font-weight:600}
.pag .gap{background:none;min-width:20px;padding:0;color:var(--txt-3)}
.pagnote{text-align:center;color:var(--txt-3);font-size:13px;margin:11px 0 0}
/* The count line under the page heading: what the SITE holds, not this page. */
.count{margin:0;padding:0 10px;font-size:13px;letter-spacing:.02em;color:var(--txt-2)}
.count strong{color:var(--accent);font-size:15px;font-weight:800;
font-variant-numeric:tabular-nums}
.count i{opacity:.4;font-style:normal;margin:0 4px}
/* ---------------------------------------------------------------- footer */
.foot{border-top:1px solid var(--line);margin-top:34px;padding:20px 10px 10px;
font-size:12.5px;color:var(--txt-3)}
.foot__links{display:flex;flex-wrap:wrap;gap:6px 16px;justify-content:center;margin:0 0 12px}
.foot__links a:hover{color:var(--txt)}
.foot__legal{text-align:center;line-height:1.7}
.foot__legal strong{color:var(--txt-2)}
/* ---------------------------------------------------------------- mobile
The block stacks and everything stays at native size: two 163px shots plus
gap is 342px, which fits a 360px screen. */
@media (max-width:700px){
:root{--col:calc(var(--sml-w)*2 + 24px)}
.pics{grid-template-columns:var(--sml-w) var(--sml-w);
grid-template-rows:auto auto auto; /* fixed rows would crop the big one */
justify-content:center;padding:0 12px 12px}
.pics__big{grid-row:auto;grid-column:span 2;height:auto}
.pics__big img{width:100%;max-width:var(--big-w)}
.scene__title{font-size:18px}
.mh{grid-template-columns:1fr;text-align:center}
.mh__por img{width:100%;max-width:var(--por-w);margin:0 auto}
.facts{grid-template-columns:1fr;text-align:left}
/* Os LINKS saem (estao na barra de baixo), a fila fica para segurar o
interruptor de tema - ver a regra que o acompanha mais acima. */
body{padding-bottom:calc(64px + env(safe-area-inset-bottom))}
/* All eight models stay on screen on a phone: they shrink to four across
rather than wrapping into something you have to scroll. */
.strip__row{gap:6px;padding:0 12px}
.mini__n{font-size:11px;padding:5px 5px 0}
.mini__c{font-size:9.5px;padding:0 5px 6px}
.perks{grid-template-columns:1fr}
.pay{flex-direction:column}
.pay__btn{min-width:0;width:100%}
/* Thumb-sized. 48px is what a finger actually needs; the numbers were 38
with 14px type, which is a target you have to aim at. */
.pag{gap:8px}
.pag a,.pag span{min-width:48px;min-height:48px;font-size:18px;border-radius:12px}
.pag .nx{padding:0 16px;font-size:15px}
/* the card stacks: two thumbs across the top, words underneath */
.promo{flex-direction:column;margin-inline:10px}
.promo__pics{grid-template-columns:1fr 1fr 1fr 1fr;width:100%}
.promo__pics img{width:100%}
.promo__h{font-size:19px}
.intro p:first-child{font-size:18px}
.films{columns:1}
.bio__t{text-align:left}
}
@media (max-width:359px){
.pics{grid-template-columns:1fr 1fr}
.pics img.s{width:100%;height:auto}
}
/* ---------------------------------------------------------------- tab bar
Mobile only. Navigation sits where the thumb is, and Join is a pill of its
own: it is an action, not a menu item, and mixing the two is what made the
old wrapped row look broken. */
.tabbar{display:none}
@media (max-width:700px){
.tabbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:40;
background:var(--bar);border-top:1px solid var(--line);
backdrop-filter:blur(8px);padding-bottom:env(safe-area-inset-bottom)}
.tabbar a{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;
padding:9px 2px 10px;font-size:10px;font-weight:600;color:var(--txt-3)}
.tabbar svg{width:21px;height:21px}
.tabbar a.on{color:var(--accent)}
/* the pill sets its own colour - a broader selector here once painted the
icon the same pink as its label, making it invisible */
.tabbar a.join .pill{background:var(--accent);color:var(--on-accent);border-radius:20px;
padding:6px 14px;display:flex;align-items:center;justify-content:center;
margin-bottom:1px;box-shadow:0 2px 10px rgba(255,122,184,.35)}
.tabbar a.join .pill svg{width:17px;height:17px}
.tabbar a.join .lbl{color:var(--accent)}
}
@media (prefers-reduced-motion:reduce){
*{transition:none !important;animation:none !important}
}