/* Derank World — landing page.
   Paleta tirada da arte do menu: céu de entardecer, bronze da estátua, dourado do logo. */
:root {
  --dusk: #1b1530;        /* fundo: o céu depois do pôr do sol */
  --dusk-raised: #261e3f; /* faixas e legendas */
  --bronze: #a8743a;
  --bronze-deep: #5f3f1d;
  --gold: #f2cf85;
  --parchment: #f4ead8;   /* texto */
  --parchment-dim: #c9bda8;
  --haze: #e89a54;        /* o sol baixo: foco e destaques pequenos */

  --serif: "Young Serif", Georgia, serif;
  --sans: "Instrument Sans", system-ui, sans-serif;

  --gutter: clamp(16px, 4vw, 56px);
  --measure: 34rem;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--dusk);
  color: var(--parchment);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.55;
}

img { display: block; max-width: 100%; height: auto; }

h1, h2, h3 { font-family: var(--serif); font-weight: 400; line-height: 1.15; margin: 0; }
h2 { font-size: clamp(1.75rem, 3.2vw, 2.5rem); color: var(--gold); }
h3 { font-size: 1.3rem; }
p { margin: 0; }

:focus-visible { outline: 3px solid var(--haze); outline-offset: 3px; }

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

/* ---- Hero: a arte do menu, de ponta a ponta ---- */
.hero img { width: 100%; object-fit: cover; }
.hero { position: relative; }
.hero::after {
  /* funde a borda de baixo da arte no fundo da página */
  content: ""; position: absolute; inset: auto 0 0 0; height: 9%;
  background: linear-gradient(to bottom, transparent, var(--dusk));
  pointer-events: none;
}

/* ---- Intro: texto + download à esquerda, a placa à direita ---- */
.intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 30rem);
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
  padding: clamp(24px, 4vw, 48px) var(--gutter) clamp(56px, 8vw, 104px);
  max-width: 1240px;
  margin: 0 auto;
}

.lede {
  font-family: var(--serif);
  font-size: clamp(1.35rem, 2.3vw, 1.8rem);
  line-height: 1.4;
  max-width: var(--measure);
}

.download {
  display: inline-flex; flex-direction: column; gap: 2px;
  margin-top: 32px;
  padding: 16px 28px 14px;
  border-radius: 6px;
  background: var(--gold);
  color: var(--dusk);
  text-decoration: none;
  box-shadow: 0 2px 0 var(--bronze-deep);
}
.download-label { font-weight: 600; font-size: 1.15rem; }
.download-meta { font-size: 0.875rem; color: #4a3a22; }
.download:hover { background: #f7dca0; }
.download:active { transform: translateY(1px); box-shadow: 0 1px 0 var(--bronze-deep); }
.download[aria-disabled="true"] {
  background: transparent; color: var(--parchment); box-shadow: none;
  border: 1px dashed var(--parchment-dim); cursor: default;
}
.download[aria-disabled="true"] .download-meta { color: var(--parchment-dim); }

.download-alt { margin-top: 14px; font-size: 0.92rem; color: var(--parchment-dim); max-width: var(--measure); }
.download-alt a { color: var(--gold); }

/* A placa: o endereço gravado em bronze, como a do pedestal da estátua. */
.plaque {
  position: relative;
  padding: 28px 28px 24px;
  border-radius: 10px;
  text-align: center;
  color: #2a1a08;
  background:
    radial-gradient(120% 90% at 30% 0%, rgba(255, 228, 170, 0.55), transparent 60%),
    linear-gradient(160deg, #c99555 0%, var(--bronze) 45%, #7d5226 100%);
  box-shadow:
    inset 0 0 0 2px rgba(255, 226, 170, 0.45),
    inset 0 0 0 7px rgba(70, 42, 14, 0.35),
    0 18px 40px rgba(0, 0, 0, 0.45);
}
.plaque::before, .plaque::after {
  /* os rebites */
  content: ""; position: absolute; top: 14px; width: 9px; height: 9px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #ffe2a8, #6e4a22);
}
.plaque::before { left: 14px; }
.plaque::after { right: 14px; }

.plaque-title { font-family: var(--sans); font-size: 0.95rem; font-weight: 600; color: #3b250c; }
.plaque-address {
  margin: 10px 0 18px;
  font-family: var(--serif);
  font-size: clamp(1.3rem, 2.4vw + 0.6rem, 2rem);
  letter-spacing: 0.02em;
  font-variant-numeric: lining-nums tabular-nums;
  overflow-wrap: anywhere;
  color: #2a1606;
  /* letra gravada: luz embaixo, sombra em cima */
  text-shadow: 0 1px 0 rgba(255, 230, 180, 0.6), 0 -1px 0 rgba(40, 20, 0, 0.35);
  user-select: all;
}
.plaque-copy {
  font: 600 1rem var(--sans);
  padding: 11px 22px;
  border: 0;
  border-radius: 5px;
  background: #2a1a08;
  color: var(--gold);
  cursor: pointer;
}
.plaque-copy:hover { background: #3b250c; }
.plaque-copy.is-copied { background: #234a2b; color: #dff3d6; }
.plaque-hint { margin-top: 14px; font-size: 0.9rem; color: #3b250c; }

/* ---- O que tem lá: mosaico, a vila em destaque ---- */
.modes { padding: 0 var(--gutter) clamp(64px, 9vw, 120px); max-width: 1240px; margin: 0 auto; }
.modes h2 { margin-bottom: 24px; }

.mosaic {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  grid-template-areas:
    "vila corrida"
    "vila x1"
    "amigos amigos";
  gap: 14px;
}
.tile { margin: 0; position: relative; overflow: hidden; border-radius: 4px; background: var(--dusk-raised); }
.tile img { width: 100%; height: 100%; object-fit: cover; }
.tile figcaption {
  position: absolute; inset: auto 0 0 0;
  padding: 40px 18px 14px;
  font-size: 0.95rem; line-height: 1.45;
  background: linear-gradient(to top, rgba(20, 15, 36, 0.92) 40%, transparent);
}
.tile figcaption strong { font-family: var(--serif); font-weight: 400; font-size: 1.1rem; color: var(--gold); }
.tile-vila { grid-area: vila; min-height: 460px; }
.tile-corrida { grid-area: corrida; aspect-ratio: 16 / 10; }
.tile-x1 { grid-area: x1; aspect-ratio: 16 / 10; }
.tile-amigos { grid-area: amigos; aspect-ratio: 21 / 8; }
.tile-amigos img { object-position: center 30%; }
.tile-amigos figcaption { max-width: 36rem; background: none; padding-top: 0; }
.tile-amigos::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to right, rgba(20, 15, 36, 0.85), transparent 55%);
}
.tile-amigos figcaption { z-index: 1; inset: auto auto 0 0; }

/* ---- Como entrar: uma sequência de verdade ---- */
.steps {
  padding: clamp(56px, 8vw, 96px) var(--gutter);
  background: var(--dusk-raised);
}
/* mesma coluna das seções de cima: 1240px menos o respiro lateral delas */
.steps > * { max-width: calc(1240px - 2 * var(--gutter)); margin-left: auto; margin-right: auto; }
.steps h2 { margin-bottom: 32px; }
.steps ol {
  list-style: none; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 4vw, 56px);
  counter-reset: passo;
}
.steps li { counter-increment: passo; }
.steps li::before {
  content: counter(passo);
  display: block;
  font-family: var(--serif); font-size: 3rem; line-height: 1;
  color: var(--bronze);
  margin-bottom: 12px;
}
.steps h3 { margin-bottom: 8px; }
.steps li p { color: var(--parchment-dim); max-width: 30rem; }
.steps em { font-style: normal; color: var(--parchment); font-weight: 600; }
.requirements { margin-top: 40px; color: var(--parchment-dim); font-size: 0.95rem; }

.footer { padding: 32px var(--gutter) 40px; color: var(--parchment-dim); font-size: 0.9rem; text-align: center; }

/* ---- Telas estreitas ---- */
@media (max-width: 860px) {
  .intro { grid-template-columns: minmax(0, 1fr); }
  .mosaic {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "vila" "corrida" "x1" "amigos";
  }
  .tile-vila { min-height: 0; aspect-ratio: 4 / 3; }
  .tile-amigos { aspect-ratio: 4 / 3; }
  .tile-amigos::after { background: linear-gradient(to top, rgba(20, 15, 36, 0.9), transparent 60%); }
  .steps ol { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .download { display: flex; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}