/* Hub Ateliê Aline Martins: rosê + dourado, seguindo o bio link do Canva */
:root {
  --rose: #faece9;
  --nude: #f3dcd6;
  --branco: #fffaf8;
  --cafe: #4a3430;
  --cafe-2: #7a605a;
  --ouro: #b8903f;
  --ouro-claro: #e4c77a;
  --borda-ouro: linear-gradient(120deg, #e4c77a, #b8903f 55%, #d9b866);
  --serif: 'Cormorant Garamond', Georgia, serif;
  --sans: 'Montserrat', system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  background: linear-gradient(180deg, var(--branco) 0, var(--rose) 45%, var(--nude) 100%);
  color: var(--cafe);
  font: 400 15px/1.5 var(--sans);
}
img { display: block; max-width: 100%; height: auto; }

/* ---------- topo ---------- */
.topo {
  max-width: 480px;
  margin: 0 auto;
  text-align: center;
}
.fotos {
  position: relative;
  height: clamp(300px, 92vw, 430px);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, #000 60%, transparent 98%);
          mask-image: linear-gradient(180deg, #000 60%, transparent 98%);
}
.f { position: absolute; object-fit: cover; }
.f1, .f2 {
  -webkit-mask-image: radial-gradient(ellipse 70% 72% at 50% 42%, #000 55%, transparent 100%);
          mask-image: radial-gradient(ellipse 70% 72% at 50% 42%, #000 55%, transparent 100%);
}
.f1 { left: -6%; top: -14%; width: 56%; aspect-ratio: 4 / 5; opacity: .8; }
.f2 { left: -2%; top: 20%; width: 50%; aspect-ratio: 4 / 5; z-index: 1;
      -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 16%, #000 70%, transparent 100%);
              mask-image: linear-gradient(180deg, transparent 0, #000 16%, #000 70%, transparent 100%); }
.f3 { right: -2%; top: 0; width: 64%; aspect-ratio: 4 / 5; z-index: 2;
      -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 22%);
              mask-image: linear-gradient(90deg, transparent 0, #000 22%); }

h1 { margin: -56px auto 0; position: relative; z-index: 3; width: min(82%, 340px); }
.logo { width: 100%; filter: drop-shadow(0 2px 6px rgba(255, 250, 248, .9)); }
.sub {
  margin: 10px 0 0;
  font: 500 11px/1.4 var(--sans);
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--cafe-2);
}

/* ---------- links ---------- */
main { max-width: 480px; margin: 0 auto; padding: 24px 16px 8px; }
section + section { margin-top: 26px; }
h2 {
  display: flex; align-items: center; gap: 12px;
  margin: 0 0 12px;
  font: italic 500 22px/1.2 var(--serif);
  color: var(--cafe);
}
h2::before, h2::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--ouro)); }
h2::after { background: linear-gradient(90deg, var(--ouro), transparent); }

.links { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.link {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  min-height: 56px;
  padding: 10px 46px;
  background: var(--branco);
  border: 1.5px solid transparent;
  border-radius: 6px;
  background-image: linear-gradient(var(--branco), var(--branco)), var(--borda-ouro);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  box-shadow: 0 8px 18px -12px rgba(74, 52, 48, .45);
  color: var(--cafe);
  font: 500 13px/1.3 var(--sans);
  letter-spacing: .1em;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease;
}
.link svg { position: absolute; left: 14px; width: 26px; height: 26px; }
.link:hover { transform: translateY(-2px); box-shadow: 0 12px 22px -12px rgba(74, 52, 48, .55); }
.link:active { transform: translateY(0); }
.link:focus-visible, .insta:focus-visible { outline: 2px solid var(--ouro); outline-offset: 3px; }

/* ---------- instagram ---------- */
.insta {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(255, 250, 248, .7);
  border: 1px solid rgba(184, 144, 63, .35);
  color: var(--cafe);
  text-decoration: none;
}
.insta img { width: 48px; height: 48px; border-radius: 50%; border: 2px solid var(--ouro-claro); }
.insta span { flex: 1; min-width: 0; font-size: 12px; color: var(--cafe-2); }
.insta b { display: block; font-size: 14px; font-weight: 600; color: var(--cafe); overflow-wrap: anywhere; }
.insta svg { width: 22px; height: 22px; color: var(--ouro); flex: none; }

.rodape {
  padding: 28px 16px 36px;
  text-align: center;
  font: italic 500 15px/1.4 var(--serif);
  color: var(--cafe-2);
}

@media (prefers-reduced-motion: reduce) { .link { transition: none; } }