/* Amanda Brummell Lennestaal — personal site
   Design: "Vidd" (warm & human) — teal #0e6e5e · coral #ff6a4d · gold #f2c14e
   Converted from Claude design-canvas to standalone deployable CSS. */

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: #faf6ef;
  color: #23201b;
  font-family: 'Hanken Grotesk', sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
input { font-family: 'Hanken Grotesk', sans-serif; }
::placeholder { color: #9a958a; }
section { scroll-margin-top: 96px; }
img { max-width: 100%; display: block; }

/* ---- keyframes ---- */
@keyframes scfloat  { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-18px); } }
@keyframes scfloatb { 0%,100% { transform: translateY(0); } 50% { transform: translateY(14px); } }
@keyframes scrise   { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }

/* ---- layout helpers ---- */
.wrap { max-width: 1180px; margin: 0 auto; }
.pad  { padding-left: 48px; padding-right: 48px; }

/* ---- nav ---- */
.nav {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 48px;
  background: rgba(250,246,239,0.82);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid #ece7dd;
}
.nav-links { display: flex; gap: 30px; font-size: 15px; font-weight: 500; align-items: center; }
.nav-a:hover { color: #0e6e5e; }
.nav-cta { background: #0e6e5e; color: #fff; padding: 9px 20px; border-radius: 100px; }
.nav-cta:hover { background: #0a5749; color: #fff; }

/* ---- buttons ---- */
.btn-dark    { background: #23201b; color: #faf6ef; padding: 17px 30px; border-radius: 100px; font-size: 16px; font-weight: 600; }
.btn-dark:hover { background: #0e6e5e; color: #fff; }
.btn-outline { border: 1.5px solid #23201b; padding: 15px 28px; border-radius: 100px; font-size: 16px; font-weight: 600; }
.btn-outline:hover { background: #23201b; color: #faf6ef; }
.btn-gold    { background: #f2c14e; color: #23201b; padding: 17px 32px; border-radius: 100px; font-size: 16px; font-weight: 700; white-space: nowrap; }
.btn-gold:hover { background: #0e6e5e; color: #fff; }

/* ---- cards / links ---- */
.card-row { transition: transform .3s, background .3s; }
.card-row:hover { background: #eef7f4; transform: translateY(-4px); }
.link-teal:hover  { color: #0e6e5e; }
.link-coral:hover { color: #ff6a4d; }

/* ---- footer ---- */
.foot-a:hover  { color: #f2c14e; }
.email-a:hover { color: #fff; }

/* ---- portrait image fill ---- */
.portrait { object-fit: cover; width: 100%; height: 100%; }

/* ---- reveal on scroll (JS adds .is-in) ---- */
.reveal { opacity: 0; transform: translateY(30px); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; }
  * { animation: none !important; }
}

/* ---- responsive ---- */
@media (max-width: 900px) {
  .pad { padding-left: 22px; padding-right: 22px; }
  .nav { padding: 16px 22px; }
  .nav-links { gap: 16px; font-size: 14px; flex-wrap: wrap; justify-content: flex-end; }
  .grid-2, .grid-3, .grid-work { grid-template-columns: 1fr !important; }
  .hero-h1 { font-size: 48px !important; }
  .h1-lg   { font-size: 46px !important; }
  .stat-row { flex-wrap: wrap; gap: 28px !important; }
  .float { display: none !important; }
  .contact-grid { grid-template-columns: 1fr !important; gap: 32px !important; }
  .worklist-row { grid-template-columns: 1fr !important; gap: 10px !important; }
  .worklist-row .arrow { display: none; }
  .writing-row { grid-template-columns: 1fr !important; gap: 6px !important; }
  .writing-row .meta { justify-self: start; }
}
@media (max-width: 560px) {
  .hero-h1 { font-size: 38px !important; }
  .h1-lg   { font-size: 36px !important; }
  .nav-name { font-size: 15px !important; }
}