/* ============================================================
   NatCooking — about.html, contact.html, error.html
   Prose card, social-link grid, error card/actions.
   Requires site.css to be loaded first.
   ============================================================ */

/* ---------- Shared page title ---------- */
.title{
  margin-top:28px;
  font-size:34px;
  font-weight:600;
}
.subtitle{
  color:var(--muted);
  margin-bottom:24px;
}

/* ---------- About ---------- */
.about-card{ max-width: 100%; margin: 28px 0 32px; }
.about-card p{
  margin: 0 0 14px;
  line-height: 1.75;
  color: var(--muted);
  font-weight: 500;
}
.about-card p strong{
  color: var(--text);
  font-weight: 700;
}

/* ---------- Contact / social list ---------- */
.connect{ text-align:center; }
.connect .subtitle{ margin-left:auto; margin-right:auto; }
.grid{
  display:flex;
  flex-direction:column;
  gap:12px;
  max-width:320px;
  margin:0 auto 32px;
}
.socialCard{
  display:flex;
  align-items:center;
  gap:14px;
}
.socialIcon{
  width:42px;
  height:42px;
  border-radius: var(--radius-sm);
  background: rgba(242,226,199,.07);
  border:1px solid var(--border);
  display:grid;
  place-items:center;
  flex:0 0 auto;
  color:var(--brand);
}
.socialIcon svg{ width:20px; height:20px; fill:currentColor; display:block; }
.socialText{ display:flex; flex-direction:column; gap:2px; }
.platform{
  font-size:16px;
  font-weight:600;
}
.handle{
  color:var(--muted);
  font-size:13px;
}

/* ---------- Error page ---------- */
body.error-page{
  display:grid;
  place-items:center;
  padding:20px;
  min-height:100vh;
}
.error-page .card{
  max-width:520px;
  width:100%;
  text-align:center;
  padding:28px 26px 30px;
}
.error-page .logo{
  width:60px;
  height:60px;
  margin:0 auto 14px;
}
.error-page .emoji{ font-size:40px; margin-bottom:6px; }
.error-page h1{
  margin:10px 0 8px;
  font-size:clamp(26px, 5vw, 36px);
  font-weight:600;
  letter-spacing:-.6px;
}
.error-page p{
  margin:0 0 16px;
  color:var(--muted);
  font-size:15px;
  line-height:1.5;
}
.error-code{
  display:inline-block;
  margin:10px 0 18px;
  padding:6px 14px;
  border-radius: var(--radius-pill);
  border:1px solid var(--border);
  background:rgba(242,226,199,.05);
  font-weight:700;
  font-size:13px;
  letter-spacing:.6px;
  color:var(--brand);
}
.error-page .actions{
  display:flex;
  gap:12px;
  justify-content:center;
  flex-wrap:wrap;
  margin-top:6px;
}
.error-page footer{
  border-top:none;
  margin-top:22px;
  padding:0;
  font-size:12px;
}