/* caiorubini.com — CSS estático (recriado a partir do design do Cargo) */
html { font-size: 81%; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: #000; color: #fff; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
a:active { opacity: .1; }
b, strong { font-weight: bolder; }
i, em { font-style: italic; }
img { border: 0; max-width: 100%; }
details > summary { cursor: pointer; }

/* Texto base (bodycopy do Cargo) */
.bodycopy {
  display: block; font-family: "Rajdhani", sans-serif; font-size: 1.2rem; line-height: 1.3;
  letter-spacing: .035em; font-weight: 400; color: rgba(255,255,255,.58);
}
.bodycopy a { color: #fff; }
.bodycopy h1 {
  font-family: "Space Grotesk", sans-serif; font-weight: 700; letter-spacing: .006em;
  margin: 0; padding: 0; font-size: 2.4rem; line-height: 1.2; color: #fff;
}
.bodycopy h1 a { color: #fff; }
.bodycopy h2 {
  font-family: "Outfit", sans-serif; font-weight: 200; letter-spacing: .003em;
  margin: 0; padding: 0; font-size: 1.8rem; line-height: 1.2; color: #fff;
}
.bodycopy h2 a { color: #fff; }
.bodycopy small {
  display: inline-block; font-size: 1rem; line-height: 1.5; font-family: "Rajdhani", sans-serif;
  color: rgba(255,255,255,.8); font-weight: 400;
}
.bodycopy small a { color: rgba(255,255,255,.42); }
hr {
  background: #fff; border: .2px solid gray; height: 0; display: block;
  margin-top: 1rem; margin-bottom: 1rem;
}
.contact { position: relative; }
.contact hr { margin-top: 1.5rem; margin-bottom: -.5rem; }

/* Layout desktop: menu fixo à esquerda (23%) + coluna de conteúdo (77%) */
.side-menu { position: fixed; top: 0; left: 0; width: 23%; z-index: 10; pointer-events: none; }
.side-menu .bodycopy { font-size: 2.4rem; pointer-events: auto; }
.main { margin-left: 23%; width: 77%; }
section { padding: 1rem; }
section.pin-intro { padding-bottom: .5rem; }
section.footer { padding-bottom: 1.5rem; }
section.project::after, section .bodycopy::after { content: ""; display: table; clear: both; }
.only-mobile { display: none; }

/* Blocos do projeto (CSS do Caio no Cargo) */
.vimeo-embed { padding-top: 36.56%; margin-right: 1%; position: relative; width: 65%; float: left; }
.vimeo-embed iframe { background: #000; }
.ficha-tecnica { width: 33.7%; float: right; margin-top: -.3%; height: auto; }
.video-description { margin-top: 1%; float: left; width: 65%; color: rgba(16,16,16,.27); }
.start { width: 65%; position: relative; }
.startmobile { width: 100%; position: relative; }
.scrollbox {
  position: relative; display: inline-block; font-size: 1rem; line-height: 1.5;
  font-family: "Rajdhani", sans-serif; color: rgba(255,255,255,.8); font-weight: 400;
  overflow: scroll; height: 250px; padding-left: 1px; margin-top: 1.5%; margin-bottom: 10px;
}
details { margin-left: -1px; padding-top: 5px; }
details > summary { list-style: none; }
details > summary::-webkit-details-marker { display: none; }
details > summary::before {
  content: ""; display: inline-block; width: 1em; height: 1em; font-size: 1rem; vertical-align: -.1em;
  background: rgba(255,255,255,.7); -webkit-mask: var(--ic-plus) center/contain no-repeat; mask: var(--ic-plus) center/contain no-repeat;
}
details[open] > summary::before { -webkit-mask-image: var(--ic-x); mask-image: var(--ic-x); }

/* Ícones (substituem a fonte de ícones proprietária do Cargo) */
:root {
  --ic-plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 2v16M2 10h16' stroke='%23000' stroke-width='1.6' fill='none'/%3E%3C/svg%3E");
  --ic-x: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4 4l12 12M16 4L4 16' stroke='%23000' stroke-width='1.6' fill='none'/%3E%3C/svg%3E");
  --ic-tri: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M2 2v16h16z'/%3E%3C/svg%3E");
  --ic-mail: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 20'%3E%3Cpath d='M1.5 3h21v14h-21zM1.5 3l10.5 8 10.5-8' stroke='%23000' stroke-width='1.6' fill='none' stroke-linejoin='round'/%3E%3C/svg%3E");
  --ic-ret: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 2v11h11M12 9l4 4-4 4' stroke='%23000' stroke-width='1.8' fill='none'/%3E%3C/svg%3E");
}
.ic { display: inline-block; width: 1em; height: 1em; vertical-align: -.12em; background: currentColor;
  -webkit-mask: center/contain no-repeat; mask: center/contain no-repeat; font-style: normal; }
.ic-plus { -webkit-mask-image: var(--ic-plus); mask-image: var(--ic-plus); }
.ic-x { -webkit-mask-image: var(--ic-x); mask-image: var(--ic-x); }
.ic-tri { -webkit-mask-image: var(--ic-tri); mask-image: var(--ic-tri); width: .95em; height: .95em; vertical-align: -.12em; margin-left: .05em; }
h1 .ic-tri { color: #262626; }
.ic-mail { -webkit-mask-image: var(--ic-mail); mask-image: var(--ic-mail); width: 1.2em; }
.ic-ret { -webkit-mask-image: var(--ic-ret); mask-image: var(--ic-ret); }

/* Tela de carregamento (barra branca), igual ao Cargo, porém mais curta */
.preloader { position: fixed; inset: 0; background: #000; z-index: 9999; transition: opacity .4s; }
.preloader__bar { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 50%; height: 30px; overflow: hidden; }
.preloader__fill { height: 100%; width: 0; background: #fff; transition: width 1.2s linear; }
.preloader.done { opacity: 0; pointer-events: none; }
.no-js .preloader { display: none; }

/* Celular */
@media (max-width: 767px) {
  html { font-size: 2.88vw; }
  .only-desktop { display: none; }
  .only-mobile { display: block; }
  .main { margin: 0; width: 100%; }
  section { padding: .3rem; }
  section.m-header { padding-bottom: 0; }
  section.m-header .bodycopy { font-size: 3.2rem; line-height: 1; }
  section.m-header h1 { font-size: 2.7rem; }
  section.m-menu { padding-top: 0; }
  section.m-menu .bodycopy { font-size: 2.3rem; }
  section.m-menu h1 { font-size: 2.5rem; }
  section.m-intro { padding-bottom: 1.2rem; }
  section.footer { padding-bottom: .45rem; }
}

/* Página 404 */
.notfound .nf { padding: 1rem; max-width: 60rem; }