/* ============================================================
   CicloJob — base: tokens, reset, tipografia
   ============================================================ */

:root{
  /* --- cor --- */
  --cal:        #F4F1EC;   /* fundo claro, cal caiada */
  --papel:      #FBFAF8;   /* respiros, cartões */
  --tinta:      #191714;   /* escuro quente */
  --betao:      #2A2724;   /* escuro secundário */
  --cinza:      #6E685F;   /* texto secundário sobre claro */
  --cinza-cl:   #A9A199;   /* texto secundário sobre escuro */
  --latao:      #C9A227;   /* acento gráfico */
  --noite:      #1F243E;   /* fundo escuro alternativo (obras, números) */
  --latao-txt:  #8C6E14;   /* acento em texto pequeno sobre claro */
  --latao-cl:   #D4B44A;   /* acento sobre escuro */
  --linha:      rgba(25,23,20,.14);
  --linha-cl:   rgba(244,241,236,.16);

  /* --- tipografia --- */
  --display: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --corpo:   "Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono:    "DM Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* --- ritmo --- */
  --margem:  clamp(1.25rem, 5vw, 6rem);
  --gutter:  clamp(1rem, 2vw, 2rem);
  --sec-y:   clamp(5rem, 12vw, 11rem);

  /* --- movimento --- */
  --ease:    cubic-bezier(.16, 1, .3, 1);
  --ease-io: cubic-bezier(.65, .05, .36, 1);
  --lento:   1.1s;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }

body{
  margin:0;
  background:var(--cal);
  color:var(--tinta);
  font-family:var(--corpo);
  font-size:clamp(.9375rem, .9rem + .2vw, 1.0625rem);
  font-weight:400;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}

img,svg,video{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }

/* ---------- escala tipográfica ---------- */

h1,h2,h3{ margin:0; font-weight:400; }

.d-xl{
  font-family:var(--display);
  font-size:clamp(3rem, 8.6vw, 8.25rem);
  line-height:.9;
  letter-spacing:-.022em;
}
.d-l{
  font-family:var(--display);
  font-size:clamp(2.25rem, 5.4vw, 4.75rem);
  line-height:.96;
  letter-spacing:-.018em;
}
.d-m{
  font-family:var(--display);
  font-size:clamp(1.625rem, 2.8vw, 2.6rem);
  line-height:1.08;
  letter-spacing:-.012em;
}
.d-xl em,.d-l em,.d-m em{ font-style:italic; }

.lead{
  font-size:clamp(1.0625rem, .95rem + .55vw, 1.4rem);
  line-height:1.55;
  font-weight:300;
  letter-spacing:-.006em;
}

/* rótulo técnico — o sistema editorial */
.rotulo{
  font-family:var(--mono);
  font-size:.6875rem;
  font-weight:500;
  letter-spacing:.17em;
  text-transform:uppercase;
  line-height:1.4;
  color:var(--cinza);
}
.rotulo--acento{ color:var(--latao-txt); }
.escuro .rotulo{ color:var(--cinza-cl); }
.escuro .rotulo--acento{ color:var(--latao-cl); }

/* numeração de secção */
.num{
  font-family:var(--mono);
  font-size:.6875rem;
  font-weight:500;
  letter-spacing:.14em;
  color:var(--latao-txt);
}
.escuro .num{ color:var(--latao-cl); }

.texto p{ margin:0 0 1.15em; max-width:62ch; }
.texto p:last-child{ margin-bottom:0; }
.sec-claro{ background:var(--cal); color:var(--tinta); }
.escuro{ background:var(--tinta); color:var(--cal); }
.escuro p{ color:var(--cinza-cl); }

/* marcador de conteúdo por preencher */
mark.falta{
  background:rgba(201,162,39,.16);
  color:var(--latao-txt);
  padding:.05em .3em;
  border-bottom:1px dashed var(--latao);
  font-family:var(--mono);
  font-size:.82em;
}
.escuro mark.falta{ color:var(--latao-cl); }

/* ---------- utilitários ---------- */
.margem{ padding-inline:var(--margem); }
.sec{ padding-block:var(--sec-y); }
.filete{ height:1px; background:var(--linha); border:0; margin:0; }
.escuro .filete{ background:var(--linha-cl); }

.sr{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}