:root {
  --pink: #ff098d;
  --orange: #ffa009;
  --peach: #ffc49b;
  --lemon: #ffe27a;
  --cream: #fff1e6;
  --plum: #3a1027;
  --cyan: #09cdff;
  --sherbet: #ffae70;

  --display: "League Gothic", "Arial Narrow", Impact, sans-serif;
  --text: "Bricolage Grotesque", system-ui, sans-serif;
  --gutter: clamp(16px, 4vw, 56px);
  /* Layouts stop growing at this window width; past it only backgrounds extend */
  --max: 1300px;
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--plum);
  font-family: var(--text);
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.2rem);
  line-height: 1.5;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; height: auto; }

a { color: inherit; }
a:focus-visible {
  outline: 3px solid var(--cyan);
  outline-offset: 4px;
  border-radius: 4px;
}

.defs { position: absolute; width: 0; height: 0; }

/* ---------- Header ---------- */

.top {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 10;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: clamp(12px, 2vw, 24px) var(--gutter);
}
.top__links {
  grid-column: 1;
  justify-self: start;
  display: flex;
  gap: clamp(4px, 1vw, 12px);
}
.top__home {
  grid-column: 2;
  display: block;
  width: clamp(48px, 5.5vw, 72px);
}
.top__all {
  grid-column: 3;
  justify-self: end;
}
/* Icon buttons: white line icons on pink-to-orange circles */
.top__links a,
.top__all {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--pink), var(--orange));
  color: #fff;
}
.top svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.top .dot { fill: currentColor; stroke: none; }

/* ---------- Hero ---------- */

.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: linear-gradient(#ffe4ec 0%, #ffbcc8 45%, var(--sherbet) 100%);
}
.hero > * { grid-area: 1 / 1; }

.hero__glow {
  width: min(90vw, 1100px);
  aspect-ratio: 1.3;
  background:
    radial-gradient(closest-side at 38% 50%, var(--orange), transparent),
    radial-gradient(closest-side at 64% 52%, var(--pink), transparent);
  opacity: 0.7;
  filter: blur(40px);
}

.hero__word {
  margin: 0;
  font-family: var(--display);
  font-weight: 400;
  text-transform: uppercase;
  font-size: min(37vw, 78svh, var(--max) * 0.37);
  line-height: 0.8;
  letter-spacing: -0.01em;
  color: var(--pink);
  white-space: nowrap;
}

/* Hand kerning: pull the T in so its bar meets the F's arms */
.kern-ft { letter-spacing: -0.03em; }

/* Same font-size as the word, so em units place rugs relative to the letters:
   the word is about 2.5em wide and 0.8em tall. */
.hero__rugs {
  position: relative;
  font-size: min(37vw, 78svh, var(--max) * 0.37);
  width: 2.5em;
  height: 0.8em;
}
.hero__rug { position: absolute; }


.hero__rug--porygon { left: 5%;  top: -44%; width: 0.56em; }
.hero__rug--junimo  { left: 66%; top: -34%; width: 0.56em; }
.hero__rug--labubu  { left: 34%; top: 46%;  width: 0.66em; }
.hero__rug--porygon img { rotate: -12deg; }
.hero__rug--junimo img  { rotate: 9deg; }
.hero__rug--labubu img  { rotate: -6deg; }

.hero__line {
  align-self: end;
  margin: 0 0 clamp(20px, 5svh, 56px);
  font-weight: 600;
  font-size: 1.15em;
}

/* ---------- Rug groups ---------- */

/* Each group is its name in giant caps with a row of rugs overlapping the
   top of the letters and another overlapping the bottom. */
.group {
  --bg: var(--cream);
  --prev: var(--cream);
  --name: var(--pink);
  --doodle: var(--pink);
  position: relative;
  padding: 11svh var(--gutter) 13svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: clip;
  /* Eased blend from the section above: slow start, slow finish */
  background: linear-gradient(
    var(--prev) 0,
    color-mix(in oklab, var(--prev) 92%, var(--bg)) 8svh,
    color-mix(in oklab, var(--prev) 72%, var(--bg)) 20svh,
    color-mix(in oklab, var(--prev) 45%, var(--bg)) 32svh,
    color-mix(in oklab, var(--prev) 20%, var(--bg)) 46svh,
    color-mix(in oklab, var(--prev) 6%, var(--bg)) 60svh,
    var(--bg) 76svh
  );
}
.group--lemon  { --prev: var(--sherbet); --bg: var(--lemon); }
.group--pink   { --prev: var(--lemon); --bg: var(--pink); --name: var(--cream); --doodle: var(--cream); color: var(--cream); }
.group--cream  { --prev: var(--pink); --bg: var(--cream); --name: var(--orange); }
.group--orange { --prev: var(--cream); --bg: var(--orange); --name: var(--cream); --doodle: var(--cream); }

.group__name {
  position: relative;
  margin: 0;
  font-family: var(--display);
  font-weight: 400;
  text-transform: uppercase;
  /* League Gothic caps average about 0.4em wide, so this fills the row */
  font-size: min(calc(min(94vw, var(--max) * 0.94) / (var(--chars) * 0.4)), 62svh);
  line-height: 0.9;
  white-space: nowrap;
  color: var(--name);
}

.rugs {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-around;
  width: 100%;
  max-width: calc(var(--max) * 0.94);
  /* Overlap with the word, capped along with everything else */
  --lap: min(6vw, var(--max) * 0.06);
}
.rugs--top    { align-items: flex-end;   margin-bottom: calc(var(--lap) * -1); }
.rugs--bottom { align-items: flex-start; margin-top: calc(var(--lap) * -1); }

.rug {
  display: flex;
  flex-direction: column;
  width: clamp(100px, 21vw, var(--max) * 0.21);
  margin: 0;
}
/* Push the second rug outward so the rows arc around the word */
.rugs--top .rug:nth-child(2)    { margin-bottom: var(--lap); }
.rugs--bottom .rug:nth-child(2) { margin-top: var(--lap); }

.rug:nth-child(3n + 1) img { rotate: -7deg; }
.rug:nth-child(3n + 2) img { rotate: 5deg; }
.rug:nth-child(3n) img     { rotate: -4deg; }
.rugs--bottom .rug:nth-child(3n + 1) img { rotate: 6deg; }
.rugs--bottom .rug:nth-child(3n) img     { rotate: 8deg; }

.rugs--solo { margin-top: calc(var(--lap) * -1.5); }

/* Placeholder copy, visibly unfinished on purpose */
.todo {
  display: inline-block;
  font-weight: 400;
  font-size: 0.85em;
  padding: 0.2em 0.7em;
  border: 1.5px dashed currentColor;
  border-radius: 6px;
  opacity: 0.8;
}

/* Cutouts carry their colour boost and drop shadow baked in (see
   tools/bake_rug_images.py) because iPhone Safari draws CSS filters on moving
   images as dark boxes. These margins cancel the shadow's transparent padding
   (12% sides, 8% top, 24% bottom of the rug's width) so the rug itself still
   fills its box. */
.hero__rug img,
.rug img {
  width: 124%;
  max-width: none;
  margin: -8% -12% -24%;
}

/* ---------- Rug links ---------- */

.rug-link { display: block; border-radius: 12px; }
.rug-link img { transition: scale 0.25s ease-out; }
.rug-link:hover img,
.rug-link:focus-visible img { scale: 1.06; }

/* ---------- Rug detail page ---------- */

/* White page with the sherbet gradient rising from the bottom edge */
.detail {
  min-height: 100svh;
  padding: max(19svh, 120px) var(--gutter) 6svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: clip;
  background: linear-gradient(to top, var(--orange) 0, #ff7fb6 28svh, #fff 80svh) #fff;
}
.detail__name {
  margin: 0;
  font-family: var(--display);
  font-weight: 400;
  text-transform: uppercase;
  font-size: min(calc(94vw / (var(--chars) * 0.4)), 44svh);
  line-height: 0.9;
  white-space: nowrap;
  color: var(--pink);
}
.detail__info {
  margin-top: 7svh;
  max-width: 52ch;
  text-align: center;
}
.detail__note { margin: 0 0 1.6em; font-size: 1.15em; }
.detail__facts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1em 3em;
  margin: 0;
}
.detail__facts dt { font-size: 0.85em; opacity: 0.75; }
.detail__facts dd { margin: 0.2em 0 0; font-weight: 600; }
/* Uncut photos: one sits centred, several wrap into a loose row */
.detail__photos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(16px, 3vw, 40px);
  width: 100%;
  max-width: 1200px;
  margin-top: 5svh;
}
.detail__photos img {
  flex: 1 1 300px;
  min-width: 0;
  max-width: 520px;
  height: auto;
  object-fit: cover;
  border-radius: 20px;
  border: 8px solid #fff;
  box-shadow: 0 18px 30px rgb(58 16 39 / 0.2);
}
.detail__photos img:nth-child(odd)  { rotate: -1.5deg; }
.detail__photos img:nth-child(even) { rotate: 1.5deg; }

.detail__nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1em 2em;
  width: 100%;
  max-width: 900px;
  margin-top: 9svh;
  font-weight: 600;
}

/* Small screens stack name, photos, details. The text wrapper dissolves so
   the photos can sit between the name and the details. */
.detail__text { display: contents; }
.detail__name   { order: 1; }
.detail__photos { order: 2; }
.detail__info   { order: 3; }
.detail__nav    { order: 4; }

/* Desktop: photos down the left, name and details pinned on the right */
@media (min-width: 900px) {
  .detail {
    display: grid;
    grid-template-columns: minmax(0, 600px) minmax(0, 520px);
    justify-content: center;
    align-items: start;
    column-gap: clamp(32px, 6vw, 96px);
  }
  .detail__photos {
    flex-direction: column;
    flex-wrap: nowrap;
    margin-top: 0;
  }
  .detail__photos img { flex: none; width: 100%; max-width: none; }
  .detail__text {
    display: block;
    order: 3;
    position: sticky;
    top: max(14svh, 110px);
  }
  .detail__name {
    font-size: min(calc(40vw / (var(--chars) * 0.4)), calc(520px / (var(--chars) * 0.4)), 34svh);
  }
  .detail__info { margin-top: 4svh; text-align: left; }
  .detail__facts { justify-content: flex-start; }
  .detail__nav { grid-column: 1 / -1; max-width: none; }
}

/* ---------- All rugs grid ---------- */

/* Shares .detail's white page and bottom gradient; always a single column */
.detail.all { display: flex; align-items: center; }
.all .detail__name {
  font-size: clamp(4rem, 14vw, 11rem);
}
.all__grid {
  order: 2;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(clamp(150px, 20vw, 250px), 1fr));
  gap: clamp(20px, 3vw, 40px) clamp(16px, 2.5vw, 32px);
  width: 100%;
  max-width: 1200px;
  margin: 5svh 0 8svh;
  padding: 0;
  list-style: none;
}
.all__card {
  display: block;
  text-decoration: none;
  border-radius: 20px;
}
.all__card img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 20px;
  border: 6px solid #fff;
  box-shadow: 0 12px 24px rgb(58 16 39 / 0.16);
  transition: scale 0.25s ease-out;
}
.all__card:hover img,
.all__card:focus-visible img { scale: 1.03; }
.all__name {
  display: block;
  margin-top: 0.9em;
  font-weight: 600;
}
.all__section {
  display: block;
  font-size: 0.85em;
  opacity: 0.75;
}

/* ---------- Doodles ---------- */

.doodle {
  position: absolute;
  width: clamp(40px, 6vw, 90px);
  aspect-ratio: 1;
  fill: none;
  stroke: var(--doodle);
  stroke-width: 7;
  stroke-linecap: round;
  stroke-linejoin: round;
  overflow: visible;
}
.doodle--a { top: 34%; left: 5%; rotate: -14deg; }
.doodle--b { top: 72%; left: 47%; rotate: 20deg; }
.doodle--c { top: 52%; right: 5%; rotate: 8deg; }

/* ---------- Ending ---------- */

.end {
  position: relative;
  padding: 9svh max(var(--gutter), (100% - var(--max)) / 2) 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gutter);
  align-items: center;
  overflow: hidden;
  background: linear-gradient(var(--orange) 0%, var(--cream) 40%);
}
.end__text { align-self: center; }
.end__text p { margin: 0 0 0.8em; max-width: 34ch; }
.end__big {
  font-family: var(--display);
  text-transform: uppercase;
  font-size: clamp(3.4rem, 8vw, 8rem);
  line-height: 0.85;
  color: var(--pink);
  /* Wide enough for two lines: "Monster made," / "tuft by tuft" */
  max-width: 14ch !important;
}
.end__monster {
  justify-self: center;
  width: min(36vw, 420px);
  margin-bottom: 7svh;
}

/* ---------- Motion ---------- */

[data-speed] { will-change: transform; }

@media (prefers-reduced-motion: no-preference) {
  .bob { animation: bob 7s ease-in-out infinite alternate; }
  .rug:nth-child(odd) .bob { animation-duration: 8.5s; animation-delay: -3s; }

  .drop { animation: drop 1.1s cubic-bezier(0.2, 0.9, 0.3, 1.25) 0.25s both; }
  .hero__rug--junimo .drop { animation-delay: 0.4s; }
  .hero__rug--labubu .drop { animation-delay: 0.55s; }
  .hero__rug--junimo .bob  { animation-delay: -2s; }
  .hero__rug--labubu .bob  { animation-delay: -4s; animation-duration: 8.5s; }
}
}

@keyframes bob {
  from { transform: translateY(-1.2%) rotate(-1.5deg); }
  to   { transform: translateY(1.2%) rotate(1.5deg); }
}

@keyframes drop {
  from { transform: translateY(-110svh) rotate(-35deg); }
  to   { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* ---------- Small screens ---------- */

@media (max-width: 760px) {
  .hero__word,
  .hero__rugs { font-size: 38vw; }
  .hero__rug--porygon { left: -2%; top: -135%; width: 1.05em; }
  .hero__rug--junimo  { left: 50%; top: -100%; width: 1.15em; }
  .hero__rug--labubu  { left: 22%; top: 66%;   width: 1.4em; }

  .group { padding: 9svh var(--gutter) 11svh; }
  .rug { width: 34vw; }
  .doodle--b { left: 80%; }
  .detail__nav { justify-content: center; }

  .end { grid-template-columns: 1fr; min-height: 0; }
  .end__text { padding-bottom: 0; }
  .end__monster { width: 62vw; }
}