/* ==========================================================================
   Decent Humans — decenthumans.club
   Kraft paper + graphite pencil design system.
   No frameworks, no build step. Just decent CSS.
   ========================================================================== */

:root {
  --paper:       #e8e0cc;
  --paper-deep:  #ddd3ba;
  --paper-light: #efe7d3;
  --ink:         #2e2a25;
  --graphite:    #5c554a;
  --faint:       #a89e88;
  --stamp:       #bf4b32;   /* the one colour. used sparingly. */

  --font-display: "Shantell Sans", "Comic Sans MS", cursive;
  --font-body:    "Atkinson Hyperlegible", system-ui, sans-serif;

  --walk-height: 620vh;     /* scroll distance of the village walk */
  --ground: 13vh;           /* height of the ground line from bottom */
  --ws: 1;                  /* world scale — the whole village renders at this size */
}

/* ---------- base ---------- */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.075rem;
  line-height: 1.65;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* paper grain over everything */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  opacity: .5;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0.42 0 0 0 0 0.39 0 0 0 0 0.33 0 0 0 0.06 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23g)'/%3E%3C/svg%3E");
}

.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

h1, h2 {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -.01em;
  margin: 0;
}

a { color: inherit; }

::selection { background: var(--ink); color: var(--paper); }

:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 4px;
  border-radius: 4px;
}

/* scribbly red underline */
.u-scribble {
  position: relative;
  white-space: nowrap;
}
.u-scribble::after {
  content: "";
  position: absolute;
  left: -2%; right: -2%; bottom: .02em;
  height: .16em;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'%3E%3Cpath d='M2 8 Q30 2 60 7 T120 6 T198 7' fill='none' stroke='%23bf4b32' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E");
  background-size: 100% 100%;
}

/* ---------- header ---------- */

.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.4rem;
  pointer-events: none;                 /* let the page scroll through the gaps */
}
.site-header a { pointer-events: auto; }

.brand {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.25rem;
  text-decoration: none;
}
.brand-heart { color: var(--stamp); }

.site-header nav { display: flex; gap: 1.1rem; align-items: center; }
.site-header nav a {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  border-bottom: 2px solid transparent;
}
.site-header nav a:hover { border-bottom-color: var(--ink); }

.nav-cta {
  border: 2px solid var(--ink);
  border-radius: 55% 45% 50% 50% / 55% 50% 50% 45%;
  padding: .3rem .95rem;
  transition: transform .15s ease;
}
.nav-cta:hover { transform: rotate(-2deg) scale(1.05); border-bottom-color: var(--ink); }

/* ---------- hero ---------- */

.hero {
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 5rem 1.25rem 3rem;
  text-align: center;
}

.hero-inner { max-width: 46rem; }

.hero-char {
  display: block;
  margin: 0 auto .5rem;
  animation: sway 5.5s ease-in-out infinite;
}
@keyframes sway {
  0%, 100% { transform: rotate(-1.2deg); }
  50%      { transform: rotate(1.2deg); }
}

.hero h1 {
  font-size: clamp(3rem, 10vw, 6.2rem);
}

.hero-sub {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.15rem, 3vw, 1.6rem);
  color: var(--graphite);
  margin: 1rem 0 0;
}
.hero-sub strong { color: var(--ink); font-weight: 800; }

.scroll-cue {
  margin-top: 3.2rem;
  font-family: var(--font-display);
  font-size: .95rem;
  color: var(--graphite);
}
.cue-arrow {
  display: inline-block;
  margin-left: .45em;
  animation: bob 1.6s ease-in-out infinite;
}
@keyframes bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(6px); }
}

/* ---------- the walk ---------- */

.walk { height: var(--walk-height); }

.stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
}

.stage-zoom {
  position: absolute;
  inset: 0;
  will-change: transform;
}

.world {
  position: absolute;
  inset: 0 auto 0 0;
  width: 5600px;
  will-change: transform;
  transform-origin: 0 100%;
  /* world children live in pre-scale space, so their ground height is divided
     by --ws — after the scale it lands exactly on the viewport ground line */
  --g: calc(var(--ground) / var(--ws));
}

.layer { position: absolute; inset: 0; }
.layer-far { will-change: transform; opacity: .8; }

.w-cloud, .w-house, .w-tree { position: absolute; }
.w-house, .w-tree { bottom: calc(var(--g) - 6px); }

.ground {
  position: absolute;
  bottom: calc(var(--g) - 13px);
  left: 0;
}

/* scenes: villager + bubble anchored to a world x position */
.scene {
  position: absolute;
  bottom: calc(var(--g) - 12px);
}
.villager { display: block; }
.villager.flip { transform: scaleX(-1); }   /* face our walker */

.scene-dog .villager { animation: dog-hop 2.6s ease-in-out infinite; }
@keyframes dog-hop {
  0%, 84%, 100% { transform: translateY(0); }
  90%           { transform: translateY(-9px); }
  95%           { transform: translateY(0); }
}

/* speech bubbles — wobbly hand-drawn blobs */
.bubble {
  position: absolute;
  bottom: calc(100% + 18px);
  left: 50%;
  transform: translate(-50%, 10px) rotate(-1.5deg) scale(.92);
  background: var(--paper-light);
  border: 1.8px solid var(--ink);
  border-radius: 58% 42% 55% 45% / 48% 60% 40% 52%;
  padding: .7em 1.1em;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: calc(1.05rem / var(--ws));
  line-height: 1.25;
  text-align: center;
  white-space: nowrap;
  opacity: 0;
  transition: opacity .45s ease, transform .45s cubic-bezier(.34,1.56,.64,1);
}
.bubble::after {              /* tail */
  content: "";
  position: absolute;
  bottom: -12px;
  left: 34%;
  width: 14px; height: 14px;
  background: var(--paper-light);
  border-right: 1.8px solid var(--ink);
  border-bottom: 1.8px solid var(--ink);
  transform: rotate(45deg);
  border-bottom-right-radius: 4px;
}
.bubble.from-walker { left: -46%; transform: translate(-50%, 10px) rotate(1.5deg) scale(.92); }
.bubble.from-walker::after { left: auto; right: 24%; }
.bubble.small { font-size: calc(.92rem / var(--ws)); padding: .5em .9em; }

.bubble.is-visible {
  opacity: 1;
  transform: translate(-50%, 0) rotate(-1.5deg) scale(1);
}
.bubble.from-walker.is-visible { transform: translate(-50%, 0) rotate(1.5deg) scale(1); }

/* granny's shopping boxes */
.boxes {
  position: absolute;
  bottom: -4px;
  left: -74px;
  width: 58px; height: 66px;
  border: 1.6px solid var(--ink);
  border-radius: 6px 8px 6px 7px;
  background:
    linear-gradient(transparent 47%, var(--ink) 47%, var(--ink) 49.5%, transparent 49.5%),
    var(--paper-deep);
}
.boxes::before {
  content: "";
  position: absolute;
  top: -34px; left: 8px;
  width: 44px; height: 30px;
  border: 1.6px solid var(--ink);
  border-radius: 5px 7px 5px 6px;
  background: var(--paper-light);
  transform: rotate(-3deg);
}

/* the dropped wallet */
.wallet {
  position: absolute;
  bottom: -6px;
  left: -66px;
  width: 40px; height: 24px;
  border: 1.6px solid var(--ink);
  border-radius: 5px 7px 6px 5px;
  background: var(--paper-deep);
  transform: rotate(-8deg);
}
.wallet::before {
  content: "";
  position: absolute;
  top: 8px; left: 0; right: 0;
  border-top: 1.6px solid var(--ink);
}

/* the billboard */
.billboard { position: absolute; bottom: calc(var(--g) - 8px); }
.bb-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 58px;
  fill: var(--ink);
}
.bb-sub {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 40px;
  fill: var(--graphite);
}

/* our walker */
.walker {
  position: absolute;
  left: clamp(24px, 26vw, 34vw);
  bottom: calc(var(--ground) - 10px);
  will-change: transform;
}
.walker svg {
  display: block;
  width: calc(180px * var(--ws));
  height: calc(270px * var(--ws));
}
.walker-shadow {
  position: absolute;
  bottom: 2px; left: 50%;
  width: calc(120px * var(--ws)); height: calc(14px * var(--ws));
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(46,42,37,.28), transparent 68%);
}

/* walk cycle — legs swing + gentle bounce, only while scrolling */
.leg { transform-box: fill-box; transform-origin: 50% 4%; }
.is-walking .walker .leg-l { animation: step-l .5s ease-in-out infinite; }
.is-walking .walker .leg-r { animation: step-r .5s ease-in-out infinite; }
.is-walking .walker-svg    { animation: trot  .25s ease-in-out infinite; }
@keyframes step-l { 0%,100% { transform: rotate(16deg); } 50% { transform: rotate(-16deg); } }
@keyframes step-r { 0%,100% { transform: rotate(-16deg); } 50% { transform: rotate(16deg); } }
@keyframes trot   { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }

/* dog tail wag */
.dog-tail {
  transform-box: fill-box;
  transform-origin: 10% 80%;
  animation: wag .55s ease-in-out infinite;
}
@keyframes wag { 0%,100% { transform: rotate(0deg); } 50% { transform: rotate(-16deg); } }

/* fade to paper at the end of the zoom */
.zoom-fade {
  position: absolute;
  inset: 0;
  background: var(--paper);
  opacity: 0;
  pointer-events: none;
}

/* ---------- about ---------- */

.about {
  padding: clamp(4rem, 10vh, 8rem) 1.25rem;
  display: grid;
  place-items: center;
}

.about-card {
  max-width: 44rem;
  background: var(--paper-light);
  border: 2px solid var(--ink);
  border-radius: 26px 30px 24px 32px;   /* imperfect on purpose */
  padding: clamp(2rem, 5vw, 3.5rem);
  box-shadow: 6px 8px 0 rgba(46,42,37,.12);
}

.eyebrow {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .9rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--stamp);
  margin: 0 0 .8rem;
}

.about h2 { font-size: clamp(2.4rem, 6vw, 3.8rem); }

.about-copy { margin-top: 1.6rem; color: var(--graphite); }
.about-copy strong, .about-copy em { color: var(--ink); }

.btn {
  display: inline-block;
  margin-top: 1.4rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1rem;
  text-decoration: none;
  background: var(--ink);
  color: var(--paper);
  padding: .7rem 1.6rem;
  border-radius: 48% 52% 46% 54% / 58% 44% 56% 42%;
  transition: transform .15s ease;
}
.btn:hover { transform: rotate(-1.5deg) scale(1.04); }

/* ---------- follow ---------- */

.follow {
  min-height: 90vh;
  min-height: 90svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 4rem 1.25rem;
}

.follow h2 { font-size: clamp(2.4rem, 7vw, 4.6rem); }

.follow-sub {
  font-family: var(--font-display);
  color: var(--graphite);
  margin: 1rem 0 2.4rem;
  font-size: 1.15rem;
}

.socials {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .9rem;
  padding: 0;
  margin: 0 0 4rem;
}
.socials a {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  text-decoration: none;
  border: 2px solid var(--ink);
  background: var(--paper-light);
  padding: .65rem 1.5rem;
  border-radius: 54% 46% 50% 50% / 52% 56% 44% 48%;
  transition: transform .15s ease, background .15s ease, color .15s ease;
}
.socials li:nth-child(2n) a  { transform: rotate(1.6deg); }
.socials li:nth-child(2n+1) a { transform: rotate(-1.4deg); }
.socials a:hover, .socials a:focus-visible {
  background: var(--ink);
  color: var(--paper);
  transform: rotate(0deg) scale(1.07);
}

.signoff { max-width: 40rem; }
.signoff-line1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.9rem, 5vw, 2.9rem);
  margin: 0;
}
.signoff-line1 .dot { color: var(--stamp); }
.signoff-line2 {
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--graphite);
  font-size: clamp(1.05rem, 3vw, 1.35rem);
  margin: .5rem 0 0;
}

/* ---------- footer ---------- */

.site-footer {
  text-align: center;
  padding: 1.6rem 1.25rem 2.2rem;
  font-size: .9rem;
  color: var(--graphite);
}
.site-footer span { color: var(--stamp); }

/* ---------- small screens ---------- */

@media (max-width: 900px) {
  :root { --ws: .78; }
}

@media (max-width: 640px) {
  :root {
    --ws: .56;              /* the whole village at ~56% on phones */
    --ground: 15vh;
    --walk-height: 520vh;   /* a slightly brisker walk on mobile */
  }
  .walker { left: 15vw; }
  .site-header { padding: .8rem 1rem; }
}

@media (max-width: 400px) {
  :root { --ws: .5; }       /* iPhone SE / mini */
}

/* ---------- reduced motion / no-JS: the walk becomes a swipeable strip ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-char, .cue-arrow, .scene-dog .villager, .dog-tail,
  .is-walking .walker .leg-l, .is-walking .walker .leg-r, .is-walking .walker-svg {
    animation: none !important;
  }
}

.walk.static,
.no-js .walk {
  height: auto;
}
.walk.static .stage,
.no-js .walk .stage {
  position: relative;
  height: 78vh;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}
.walk.static .bubble,
.no-js .walk .bubble {
  opacity: 1;
  transform: translate(-50%, 0);
}
.walk.static .walker,
.no-js .walk .walker { display: none; }
.walk.static .zoom-fade,
.no-js .walk .zoom-fade { display: none; }

/* static strip keeps the mobile world scale */
.walk.static .world,
.no-js .walk .world {
  transform: scale(var(--ws));
}