/* ---------------------------------------------------------------
   WickedWhims — main page
   Colors and type follow assets/Main page/guidelines.pdf
   --------------------------------------------------------------- */

@font-face {
  font-family: "Inter";
  src: url("../assets/fonts/Inter-Variable.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Playfair Display";
  src: url("../assets/fonts/PlayfairDisplay-Variable.ttf") format("truetype-variations");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --purple: #9f71f3;
  --lilac: #af76ed;
  --bg: #f7f2ff;

  --header-h: 112px;
  --card-max: 1400px;
  --edge-left-w: 190px;
  --edge-right-w: 214px;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  position: relative;
  margin: 0;
  /* a definite page height, so the artwork below can size itself off the
     space actually left over instead of measuring the chrome by hand */
  height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: "Inter", system-ui, sans-serif;
  color: var(--purple);
  background-color: var(--bg);
  background-image: url("../assets/img/background_pattern.webp");
  background-repeat: repeat;
  background-size: 1920px auto;
  background-attachment: fixed;
  overflow-x: hidden;
}

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

a { text-decoration: none; color: inherit; }

/* --- decorative edges ------------------------------------------------ */

/* clips the oversized edge artwork so it cannot stretch the document height */
.edges {
  position: absolute;
  inset: 0;
  z-index: 3;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
}

.edge {
  position: absolute;
  top: 0;
  height: auto;
}

.edge--left  { left: 0;  width: var(--edge-left-w); }
.edge--right { right: 0; width: var(--edge-right-w); }

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

.site-header {
  position: relative;
  z-index: 2;
  height: var(--header-h);
  background-color: rgba(175, 118, 237, 0.2); /* #af76ed @ 20% */
}

.site-header__inner {
  height: 100%;
  /* keep the header content clear of the decorative pipework */
  padding-left: calc(var(--edge-left-w) + 36px);
  padding-right: calc(var(--edge-right-w) + 26px);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 32px;
}

.brand img {
  width: 340px;
  height: auto;
}

/* search ------------------------------------------------------------- */

.search {
  position: relative;
  display: flex;
  align-items: center;
  justify-self: center;
  width: 100%;
  max-width: 600px;
  border-bottom: 1px solid rgba(159, 113, 243, 0.55);
}

.search__label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.search__icon {
  flex: none;
  width: 26px;
  height: 26px;
  margin-bottom: 8px;
  fill: none;
  stroke: var(--lilac);
  stroke-width: 2;
  stroke-linecap: round;
}

.search__input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0 0 8px 6px;
  font: 400 26px/1.2 "Inter", sans-serif;
  color: var(--purple);
  letter-spacing: 0.01em;
  background: none;
  border: 0;
  outline-offset: 6px;
}

.search__input::placeholder {
  color: var(--lilac);
  opacity: 1;
}

.search__input::-webkit-search-cancel-button { display: none; }

/* patreon button ------------------------------------------------------ */

.patreon {
  position: relative;
  justify-self: end;
  display: grid;
  place-items: center;
  width: 218px;
  height: 56px;
  isolation: isolate;
}

.patreon__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  z-index: -1;
}

.patreon__label {
  font: 700 28px/1 "Inter", sans-serif;
  color: var(--purple);
  letter-spacing: 0.02em;
  transform: translateY(1px);
}

.patreon:hover .patreon__label,
.download:hover .download__label { transform: translateY(1px) scale(1.03); }

.patreon__label,
.download__label { transition: transform 0.18s ease; }

/* --- main card ------------------------------------------------------- */

.main {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: stretch;
  justify-content: center;
  padding: 78px calc(var(--edge-right-w) + 24px) 40px;
}

.card {
  width: 100%;
  max-width: var(--card-max);
  padding: 34px 44px 48px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 20px;
  border-radius: 26px;
  background-color: rgba(175, 118, 237, 0.35); /* #af76ed @ 35% */
}

/* The columns are full-height. Each one works out a single height for its
   artwork -- whichever of the column's height, its width, or the design size
   runs out first -- and everything inside is a fixed share of that, so nothing
   is ever clamped in one axis only (which is what squashed the ratios). */
.card__col {
  min-width: 0;
  /* a size container, so the artwork below can be measured in cqh/cqw -- real
     lengths, which stay meaningful in font-size where a percentage would not */
  container-type: size;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* flask stage 530 + 34px gap + button 92 = 656px tall at 570px wide */
.card__col--flask {
  flex-direction: column;
  --stack-h: min(100cqh, 656px, 100cqw * 656 / 570);
  gap: calc(var(--stack-h) * 0.052);
}

.card__col--books {
  --books-h: min(100cqh, 647px, 100cqw * 1068 / 1040);
}

/* flask composition --------------------------------------------------- */

.flask-stage {
  position: relative;
  height: calc(var(--stack-h) * 0.808);
  width: auto;
  aspect-ratio: 570 / 530;
}

.flask-stage__burner {
  position: absolute;
  left: -5%;
  top: 0;
  width: 104%;
  max-width: none;
}

.flask {
  position: absolute;
  left: 25.3%;
  top: -4.5%;
  width: 74%;
  aspect-ratio: 604 / 806;
}

.flask__back,
.flask__liquid,
.flask__front {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* download button ----------------------------------------------------- */

.download {
  position: relative;
  display: grid;
  place-items: center;
  height: calc(var(--stack-h) * 0.14);
  width: auto;
  aspect-ratio: 826 / 178;
  isolation: isolate;
}

.download__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  z-index: -1;
}

.download__label {
  /* 36px at the artwork's design size of 428 x 92 */
  font: 700 calc(var(--stack-h) * 0.0549)/1 "Inter", sans-serif;
  color: #fff;
  letter-spacing: 0.01em;
}

/* books navigation ---------------------------------------------------- */

.books {
  position: relative;
  height: var(--books-h);
  width: auto;
  aspect-ratio: 1040 / 1068;
}

.books__art {
  width: 100%;
  height: 100%;
}

.books__flame {
  position: absolute;
  left: 8.5%;
  top: 64.5%;
  width: 9%;
  height: auto;
}

.books__link {
  position: absolute;
  display: grid;
  place-items: center;
  height: 8%;
  /* 36px at the artwork's design height of 647px */
  font: 700 calc(var(--books-h) * 0.0556)/1 "Playfair Display", Georgia, serif;
  font-variant: small-caps;
  color: var(--purple);
  letter-spacing: 0.02em;
  transition: transform 0.18s ease;
}

.books__link:hover { transform: scale(1.04); }

/* each label is pinned to the plaque painted on its book spine */
.books__link--gameplay { left: 20.9%; width: 73%;   top: 31.1%; }
.books__link--help     { left: 20%;   width: 76.3%; top: 49.2%; }
.books__link--contact  { left: 26.9%; width: 67%;   top: 73.2%; }

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

.site-footer {
  position: relative;
  z-index: 1;
  flex: none;
  padding: 26px 20px 40px;
  text-align: center;
}

.site-footer p {
  margin: 0;
  font: 400 16px/1.4 "Inter", sans-serif;
  color: var(--lilac);
}

/* --- responsive ------------------------------------------------------ */

@media (max-width: 1500px) {
  .card { padding: 28px 32px 40px; }
}

@media (max-width: 1200px) {
  :root {
    --edge-left-w: 120px;
    --edge-right-w: 134px;
    --header-h: 92px;
  }
  .site-header__inner { gap: 20px; }
  .brand img { width: 260px; }
  .search__input { font-size: 20px; }
  .search__icon { width: 20px; height: 20px; }
  .patreon { width: 172px; height: 46px; }
  .patreon__label { font-size: 22px; }
  .main { padding: 48px calc(var(--edge-right-w) + 16px) 32px; }
}

@media (max-width: 900px) {
  :root { --edge-left-w: 0px; --edge-right-w: 0px; }
  .edge { display: none; }
  .site-header__inner {
    grid-template-columns: auto 1fr;
    grid-template-areas: "brand patreon" "search search";
    height: auto;
    padding: 16px 20px;
    row-gap: 14px;
  }
  :root { --header-h: auto; }
  .site-header { height: auto; }
  .brand { grid-area: brand; }
  .patreon { grid-area: patreon; }
  .search { grid-area: search; }
  .main { padding: 32px 20px; }
  .card {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
    padding: 32px 24px 40px;
  }
  /* stacked layout cannot fit one viewport, so go back to width-driven
     artwork and let the page scroll */
  body { height: auto; min-height: 100vh; }
  .main { flex: 1 0 auto; }
  /* the column is no longer a definite height, so it cannot be a size
     container; drop the cqh term and let its width alone decide */
  .card__col { container-type: inline-size; }
  .card__col--flask { --stack-h: min(656px, 90cqw * 656 / 570); }
  .card__col--books { --books-h: min(560px, 100cqw * 1068 / 1040); }
}

@media (max-width: 520px) {
  .brand img { width: 200px; }
  .patreon { width: 140px; height: 40px; }
  .patreon__label { font-size: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .books__link, .patreon__label, .download__label { transition: none; }
}