/* Homepage: one screen of big ink tiles, nothing to scroll. */
.home { height: 100vh; height: 100dvh; overflow: hidden; padding: 0; }
.home main {
  height: 100%;
  max-width: none;
  margin: 0;
  padding: 1.3rem 1.5rem;
  display: grid;
  gap: 1.2rem 1.4rem;
  grid-template-columns: 1.15fr 1fr 1fr 1fr;
  grid-template-rows: 1.25fr 0.8fr 1.2fr;
  grid-template-areas:
    "hero  games games tools"
    "hero  me    me    contact"
    "ideas guides dl   contact";
}
.t-hero { grid-area: hero; }
.t-games { grid-area: games; }
.t-tools { grid-area: tools; }
.t-me { grid-area: me; }
.t-ideas { grid-area: ideas; }
.t-guides { grid-area: guides; }
.t-dl { grid-area: dl; }
.t-contact { grid-area: contact; }

.tile {
  --cap: 52cqh;
  position: relative;
  isolation: isolate;
  container-type: size;
  min-width: 0;
  min-height: 0;
  padding: 0.9rem 1.3rem 0.85rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  animation: pop 0.7s cubic-bezier(0.2, 0.9, 0.3, 1) both;
}
.tile:nth-child(2) { animation-delay: 0.1s; }
.tile:nth-child(3) { animation-delay: 0.2s; }
.tile:nth-child(4) { animation-delay: 0.3s; }
.tile:nth-child(5) { animation-delay: 0.4s; }
.tile:nth-child(6) { animation-delay: 0.5s; }
.tile:nth-child(7) { animation-delay: 0.6s; }
.tile:nth-child(8) { animation-delay: 0.7s; }
@keyframes pop { from { opacity: 0; transform: translateY(22px) rotate(2deg) scale(0.96); } to { opacity: 1; transform: none; } }

.tile::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(255, 250, 233, 0.55);
  border: 3px solid var(--ink);
  border-radius: 255px 18px 225px 22px / 20px 225px 18px 255px;
  filter: url(#brush);
  transition: border-color 0.2s, transform 0.3s cubic-bezier(0.3, 1.4, 0.5, 1), background 0.2s;
}
.tile:nth-child(2n)::before { transform: rotate(-0.7deg); border-radius: 30px 225px 20px 255px / 255px 20px 225px 25px; }
.tile:nth-child(3n)::before { transform: rotate(0.6deg); }
.tile:nth-child(5n)::before { transform: rotate(-0.4deg) skewX(0.8deg); }
.tile:hover::before { border-color: var(--seal); background: rgba(255, 252, 240, 0.8); transform: rotate(1.1deg) scale(1.012); }

/* the giant brush word of a tile; its link covers the whole tile */
.word {
  display: block;
  font-family: var(--brush-font);
  font-weight: 400;
  font-size: min(calc(var(--fit, 24) * 1cqw), var(--cap));
  line-height: 0.95;
  letter-spacing: 0.01em;
  white-space: nowrap;
  transform: rotate(-3deg);
  transform-origin: left bottom;
  transition: transform 0.3s cubic-bezier(0.3, 1.5, 0.5, 1), color 0.2s;
}
.word a { color: inherit; border: 0; }
.word::after { margin: 0.05rem 0 0 2px; height: 9px; width: 110%; }
.word a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.tile:hover .word { transform: rotate(-1deg) scale(1.04); color: var(--seal); }
.tile:nth-child(even) .word { transform: rotate(2deg); transform-origin: left center; }
.tile:nth-child(even):hover .word { transform: rotate(0.5deg) scale(1.04); }

.chips { position: relative; z-index: 2; display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; margin-top: 0.35rem; }
.chips.col { flex-direction: column; gap: 0.3rem; }
.chips.two { display: grid; grid-template-columns: 1fr 1fr; gap: 0.35rem 1rem; }
.chip, .chips a {
  appearance: none;
  background: none;
  border: 0;
  border-bottom: 1px solid rgba(168, 35, 27, 0.45);
  padding: 0;
  cursor: pointer;
  color: var(--ink);
  font: inherit;
  font-size: clamp(0.85rem, 1.12vw, 1.3rem);
  font-weight: 700;
  line-height: 1.25;
  width: fit-content;
}
.chips.col a, .chips.col .chip, .chips.col .plain { font-size: clamp(1rem, 1.4vw, 1.6rem); }
.chips.two a { font-size: clamp(0.85rem, 1.1vw, 1.25rem); }
.chip:hover, .chips a:hover, .chip:focus-visible { color: var(--seal); border-bottom-color: var(--seal); outline: none; }
.chips .plain { font-size: clamp(0.85rem, 1.12vw, 1.3rem); font-weight: 700; color: var(--ink-dim); }

/* hero: the ink circle */
.t-hero { align-items: center; justify-content: center; text-align: center; }
.enso-wrap {
  position: relative;
  width: min(var(--ensow, 100cqw), 68cqh);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  transform: translate(var(--mx, 0), var(--my, 0));
  transition: transform 0.4s ease-out;
}
.enso { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; filter: url(#brush); }
.enso path {
  fill: none;
  stroke: var(--ink);
  stroke-linecap: round;
  stroke-dasharray: 1 1;
  stroke-dashoffset: 1;
  animation: draw 2s 0.3s cubic-bezier(0.55, 0, 0.3, 1) forwards;
}
.enso path.thin { stroke: rgba(34, 26, 18, 0.55); animation-duration: 2.3s; animation-delay: 0.4s; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.hero-name {
  position: relative;
  font-family: var(--brush-font);
  font-size: min(31cqw, 21cqh);
  line-height: 1;
  letter-spacing: 0.02em;
  transform: rotate(-5deg);
  animation: fadein 1s 1s both;
}
@keyframes fadein { from { opacity: 0; filter: blur(6px); } to { opacity: 1; filter: blur(0); } }
.seal {
  position: absolute;
  right: 6%;
  bottom: 8%;
  width: 3.1rem;
  height: 3.1rem;
  display: grid;
  grid-template: 1fr 1fr / 1fr 1fr;
  place-items: center;
  background: var(--seal);
  color: var(--paper-light);
  font-family: var(--brush-font);
  font-size: 1.25rem;
  line-height: 1;
  border-radius: 6px 3px 7px 4px;
  filter: url(#brush);
  transform: rotate(7deg);
  animation: stamp 0.45s 2.1s cubic-bezier(0.3, 1.6, 0.5, 1) both;
}
@keyframes stamp { from { opacity: 0; transform: rotate(14deg) scale(1.9); } to { opacity: 0.95; transform: rotate(7deg) scale(1); } }
.hero-tag { margin: 0.5rem 0 0; font-size: clamp(0.85rem, 1.15vw, 1.25rem); line-height: 1.35; color: var(--ink-dim); animation: fadein 1s 1.4s both; }

/* the "me" tile: three short statements */
.t-me { justify-content: center; gap: 0.5rem; }
.me-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
.me-row h3 {
  font-family: var(--brush-font);
  font-weight: 400;
  font-size: clamp(1.6rem, 2.9vw, 3rem);
  line-height: 1.1;
  color: var(--seal);
  transform: rotate(-1.5deg);
  transform-origin: left;
}
.me-row p { margin: 0.15rem 0 0; font-size: clamp(0.82rem, 1.1vw, 1.2rem); line-height: 1.38; color: var(--ink-dim); }

/* short or narrow screens: stack the tiles and let the page scroll */
@media (max-width: 900px), (max-height: 620px) {
  .home { height: auto; overflow: auto; }
  .home main {
    height: auto;
    min-height: 100dvh;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
    grid-template-rows: none;
    grid-template-areas: none;
    grid-auto-rows: minmax(12rem, auto);
    padding: 1rem;
  }
  .tile { container-type: inline-size; --cap: 5.5rem; }
  .tile:nth-child(n) { grid-area: auto; }
  .t-hero { min-height: 18rem; --ensow: 56cqw; }
  .enso-wrap { width: min(var(--ensow, 86cqw), 15rem); }
  .hero-name { font-size: min(31cqw, 5rem); }
  .t-me, .t-tools { grid-column: 1 / -1; }
  .me-row { grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); }
  .word { font-size: min(calc(var(--fit, 24) * 1cqw), var(--cap)); }
  .chips, .chips a, .chips.col a, .chips.two a { font-size: 1rem; }
}
/* low windows (laptops): tighter type so every tile still fits */
@media (min-width: 901px) and (max-height: 800px) {
  .home main { padding: 0.9rem 1rem; gap: 0.8rem 1rem; grid-template-rows: 1.15fr 0.95fr 1.2fr; }
  .tile { --cap: 38cqh; padding: 0.6rem 1rem 0.6rem; }
  .chips { gap: 0.15rem 0.8rem; margin-top: 0.2rem; }
  .chips.col { gap: 0.2rem; }
  .chip, .chips a, .chips .plain { font-size: clamp(0.78rem, 1vw, 1rem); }
  .chips.col a, .chips.col .chip, .chips.col .plain { font-size: clamp(0.9rem, 1.15vw, 1.2rem); }
  .chips.two a { font-size: clamp(0.74rem, 0.95vw, 1rem); }
  .me-row h3 { font-size: clamp(1.3rem, 2.1vw, 2.2rem); }
  .me-row p { font-size: clamp(0.74rem, 0.95vw, 1rem); line-height: 1.3; margin-top: 0; }
  .t-me { gap: 0.2rem; }
  .hero-tag { margin-top: 0.3rem; font-size: clamp(0.78rem, 1vw, 1rem); }
  .word::after { height: 7px; }
}
@media (prefers-reduced-motion: reduce) {
  .enso path { animation: none; stroke-dashoffset: 0; }
  .tile, .hero-name, .hero-tag, .seal { animation: none; }
}