/* Hero crop focus: on portrait phones the landscape photo is cropped
   at the sides — change X% to slide the visible area (0% left … 100% right) */
:root { --hero-pos: 50% 50%; }
@media (max-aspect-ratio: 1/1) { :root { --hero-pos: 50% 50%; } }

/* Hero image: slow settle-in */
.hero-img {
  opacity: 0;
  transform: scale(1.06);
  transition: opacity 1.6s ease, transform 6s cubic-bezier(.2, .6, .2, 1);
}
.hero-img.is-in { opacity: 1; transform: scale(1); }

/* Menu links: line draws left → right on hover, retracts on hover off */
.menu-link {
  position: relative;
  padding-bottom: 4px;
}
.menu-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s cubic-bezier(.2, .6, .2, 1);
}
.menu-link:hover::after,
.menu-link:focus-visible::after,
.menu-link.is-active::after { transform: scaleX(1); }

/* Body-text links (About etc.) */
.prose-about a {
  color: #000;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.prose-about a:hover { text-decoration-thickness: 2px; }

/* Tutorial / blog article typography (shared by all tutorial pages) */
.tutorial { font-weight: 300; font-size: 16px; line-height: 1.75; color: #262626; }
.tutorial-kicker { font-size: 11px; text-transform: uppercase; letter-spacing: .22em; color: #a3a3a3; margin-bottom: 1rem; }
.tutorial h1 { font-weight: 500; color: #000; font-size: 2.25rem; line-height: 1.1; letter-spacing: -0.02em; margin-bottom: 1.5rem; }
@media (min-width: 640px) { .tutorial h1 { font-size: 3rem; } }
.tutorial-lead { font-size: 1.125rem; color: #525252; margin-bottom: 2.5rem; }
.tutorial h2 { font-weight: 500; color: #000; font-size: 1.25rem; margin: 2.75rem 0 1rem; }
.tutorial p { margin-bottom: 1.25rem; }
.tutorial ul, .tutorial ol { margin: 0 0 1.25rem 1.25rem; }
.tutorial ul { list-style: disc; }
.tutorial ol { list-style: decimal; }
.tutorial li { margin-bottom: .6rem; padding-left: .25rem; }
.tutorial strong { font-weight: 500; color: #000; }
.tutorial a { color: #000; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.tutorial-figure { margin: 0 0 2.5rem; }
.tutorial-figure img { width: 100%; height: auto; display: block; }
.tutorial-figure figcaption { font-size: 13px; color: #a3a3a3; margin-top: .75rem; }

/* Tutorial guide: tall photo + steps side by side (xl+), stacked below */
.guide { display: grid; gap: 2.5rem; margin-top: .5rem; }
.guide-figure { margin: 0; max-width: 22rem; width: 100%; justify-self: center; }
.guide-figure img { width: 100%; height: auto; display: block; }
@media (min-width: 1280px) {
  .guide { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 4rem; align-items: start; }
  .guide-figure { max-width: none; position: sticky; top: 2rem; }
}
.guide-text h2:first-child { margin-top: 0; }
.tutorial ol.guide-steps { list-style: none; margin-left: 0; }
.guide-step { padding: 1rem 0; border-top: 1px solid #ececec; margin: 0; }
.guide-step:last-child { border-bottom: 1px solid #ececec; }
.guide-step p { margin: 0; }
.guide-step-n { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .22em; color: #a3a3a3; margin-bottom: .35rem; font-weight: 500; }
.guide-outro { margin-top: 2rem; }

/* Tagline: soft fade after the name */
.tagline { opacity: 0; animation: social-in 1.2s ease 2.5s forwards; }

/* Homepage only: social icons fade in after the name */
.social-intro { opacity: 0; animation: social-in 1s ease 2.8s forwards; }
@keyframes social-in { to { opacity: 1; } }

/* Name letters — typed one by one */
.letter {
  display: inline-block;
  opacity: 0;
  animation: letter-in 0.25s ease-out forwards;
}
.letter.space { width: 0.3em; }

@keyframes letter-in {
  to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-img { transition: none; opacity: 1; transform: none; }
  .social-intro, .tagline { animation: none; opacity: 1; }
  .menu-link::after { transition: none; }
  .letter   { animation: none; opacity: 1; filter: none; transform: none; }
}