/* ==========================================================================
   home.css — the seasonal front page.
   The "JEFF PARKER" mark is real, selectable text: a heavy serif with a
   stacked text-shadow extrusion standing in for the 3D lettering.
   ========================================================================== */

.hero {
  min-height: calc(100svh - var(--topbar-h));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .25rem;
  text-align: center;
  padding: 2rem 1.25rem calc(2.5rem + env(safe-area-inset-bottom, 0px));
}

/* --- the poppy / seed-head mark ------------------------------------------ */
.poppy {
  width: clamp(3.2rem, 11vw, 4.6rem);
  height: auto;
  margin-bottom: -.35rem;
  filter: drop-shadow(0 3px 5px rgba(40,55,85,.32));
  animation: sway 9s ease-in-out infinite alternate;
  transform-origin: 50% 92%;
}
@keyframes sway {
  from { transform: rotate(-3.5deg); }
  to   { transform: rotate(3.5deg); }
}

/* --- wordmark ------------------------------------------------------------- */
.wordmark {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--ink);
  line-height: .84;
  letter-spacing: -.005em;
  text-transform: uppercase;
  user-select: none;
}
.wordmark span {
  display: block;
  /* stacked shadows stand in for the bevelled, extruded face */
  text-shadow:
    0 1px 0 #63799e,
    0 2px 0 #5a7096,
    0 3px 0 #52678c,
    0 4px 0 #4a5e82,
    0 5px 0 #435676,
    0 6px 1px rgba(20,35,60,.30),
    0 9px 16px rgba(20,35,60,.32);
}
.wordmark .wm-jeff {
  font-size: clamp(3.4rem, 15vw, 6.2rem);
  letter-spacing: .01em;
}
.wordmark .wm-parker {
  font-size: clamp(3.9rem, 17.5vw, 7.1rem);
  letter-spacing: -.012em;
  margin-top: -.06em;
}

/* --- MAMMAL plaque -------------------------------------------------------- */
.plaque {
  position: relative;
  margin: 1.15rem 0 1.1rem;
  padding: .42rem 2.4rem;
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 4.2vw, 1.55rem);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-deep);
  background:
    linear-gradient(180deg, var(--plaque-1) 0%, var(--plaque-2) 62%, var(--plaque-3) 100%);
  border: 2px solid var(--ink);
  border-radius: 5px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.7),
    inset 0 -2px 4px rgba(120,95,55,.35),
    0 5px 12px var(--season-plaque-shadow, rgba(40,60,95,.35));
  /* notched banner ends, cut in CSS rather than an image */
  clip-path: polygon(
    0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%,
    0 100%, 14px 50%
  );
  padding-left: 2.8rem;
  padding-right: 2.8rem;
}
/* two decorative rivets, like the mock */
.plaque::before, .plaque::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 4px; height: 4px;
  margin-top: -2px;
  border-radius: 50%;
  background: rgba(70,52,28,.5);
}
.plaque::before { left: 1.25rem; }
.plaque::after  { right: 1.25rem; }

/* --- section list --------------------------------------------------------- */
.sections { margin-bottom: 1.15rem; }
.sections li + li { margin-top: .04em; }
.sections a {
  display: inline-block;
  font-family: var(--font-display);
  font-size: clamp(1.45rem, 5.6vw, 2.1rem);
  line-height: 1.28;
  color: var(--ink);
  text-shadow: 0 1px 0 rgba(255,255,255,.45);
  transition: transform 180ms var(--ease), color 180ms var(--ease);
  position: relative;
}
.sections a::after {
  content: "";
  position: absolute;
  left: 50%; right: 50%;
  bottom: .1em;
  height: 2px;
  background: currentColor;
  opacity: .55;
  transition: left 220ms var(--ease), right 220ms var(--ease);
}
.sections a:hover { transform: translateY(-2px); color: var(--ink-deep); }
.sections a:hover::after,
.sections a:focus-visible::after { left: 0; right: 0; }

/* --- Barkley avatar ------------------------------------------------------- */
/* The source photo is already square and framed tight on his face, so a
   circular mask lops off his ears and chin. A rounded square keeps all of
   him, and at this size he needs every pixel. */
.avatar {
  width: clamp(4.6rem, 16vw, 6.2rem);
  aspect-ratio: 1;
  border-radius: 22%;
  object-fit: cover;
  border: 3px solid var(--plaque-2);
  box-shadow: 0 5px 14px rgba(30,45,75,.35);
  margin: .35rem 0 1.35rem;
  transition: transform 220ms var(--ease);
}
a:hover > .avatar, a:focus-visible > .avatar { transform: scale(1.07) rotate(-3deg); }

/* --- bio ------------------------------------------------------------------ */
.bio {
  max-width: 34rem;
  font-size: clamp(.78rem, 2.9vw, .92rem);
  line-height: 1.55;
  color: var(--ink-deep);
  text-wrap: balance;
}
html[data-season="fall"] .bio { color: #4a2a11; }
html[data-season="fall"] .wordmark span {
  text-shadow:
    0 1px 0 #63799e, 0 2px 0 #5a7096, 0 3px 0 #52678c,
    0 4px 0 #4a5e82, 0 5px 0 #435676,
    0 6px 1px rgba(60,30,10,.30),
    0 9px 18px rgba(70,35,10,.34);
}

/* --- season badge (small, bottom-left, mirrors the mockup labels) --------- */
.seasonbadge {
  position: fixed;
  left: 1rem;
  bottom: max(1rem, env(safe-area-inset-bottom, 0px));
  z-index: 40;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .4rem .85rem;
  border: 0;
  border-radius: 999px;
  background: rgba(255,255,255,.5);
  color: var(--ink-deep);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  cursor: pointer;
  backdrop-filter: blur(6px);
  box-shadow: var(--shadow-sm);
  transition: background 180ms var(--ease), transform 180ms var(--ease);
}
.seasonbadge:hover { background: rgba(255,255,255,.78); transform: translateY(-1px); }
.seasonbadge svg { width: .85rem; height: .85rem; opacity: .7; }
.seasonbadge__label { font: inherit; }

/* Short viewports: let the hero scroll rather than crush the type. */
@media (max-height: 620px) {
  .hero { min-height: 0; padding-top: 1.5rem; }
}