/*
* Site: Color by Number Advent Calendar (adventcalendarmysteries.com)
* Exact match domain landing page for Color by Number Advent Calendar Mysteries.
* Code conventions follow the PixelColorist theme, hatchandfill.com and
* monochromemysteries.com (custom properties, reset, kebab-case semantic
* classes, nested media queries). The design is the book's own: the night blue
* of the A+ modules, the gold of the wordmark, the snowflakes, and the color
* band across the top of the cover.
* Version: 1.3.0
*/

/* FONTS */
@font-face {
  font-display: swap;
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 400 700;
  src: url('../fonts/rubik-v31-latin.woff2') format('woff2');
}

/* The serif the book itself is set in, for the body text */
@font-face {
  font-display: swap;
  font-family: 'Crimson Pro';
  font-style: normal;
  font-weight: 400 700;
  src: url('../fonts/crimson-pro-v28-latin.woff2') format('woff2');
}

@font-face {
  font-display: swap;
  font-family: 'Crimson Pro';
  font-style: italic;
  font-weight: 400 700;
  src: url('../fonts/crimson-pro-v28-latin-italic.woff2') format('woff2');
}

@font-face {
  font-display: swap;
  font-family: 'Averia Sans Libre';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/averia-sans-libre-v20-latin-700.woff2') format('woff2');
}

@font-face {
  font-display: swap;
  font-family: 'Averia Sans Libre';
  font-style: italic;
  font-weight: 700;
  src: url('../fonts/averia-sans-libre-v20-latin-700italic.woff2') format('woff2');
}

/* VARS */
:root {
  --page-width-max: 1024px;
  --header-height: 5rem;
  --strip-height: 0.4rem;
  --contrast-color: #F4EEE3;
  --base-color: #011027;
  --base-color-rgb: 1, 16, 39;
  --paper-color: #0A1E3D;
  --placeholder-color: #1E3358;
  --link-color: #FFD36B;
  --link-color-light: #FFE59F;
  --secondary-color: #9AA6BA;
  --default-padding: 1rem;
  --default-spacing: 1.5rem;
  --slant: 2.5rem;

  --mobile-breakpoint: 640px;

  --font-size-sm: 0.90rem;
  --font-size-base: 1.25rem;
  --font-ui: 'Rubik', 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  --font-text: 'Crimson Pro', Georgia, 'Times New Roman', serif;
  --font-size-md: 1.3rem;
  --font-size-xl: 1.8rem;
  --font-size-2xl: 2.4rem;
  --font-size-3xl: 3.4rem;

  --border-radius: 1rem;

  /* The gold of the wordmark and of the snowflakes */
  --gold-dark: #9A7A20;
  --gold: #EDC148;
  --gold-light: #FFDE84;
  --gold-gradient: linear-gradient(160deg, #FFE59F, #FFCB3B 55%, #D2A62B);
  --cream: #F4E1C8;
}

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

* {
  margin: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

input,
button,
textarea,
select {
  font: inherit;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  line-height: normal;
}

figcaption {
  font-family: var(--font-text);
  font-style: italic;
  font-size: var(--font-size-base);
  color: var(--secondary-color);
  text-align: center;
}

/* STYLES */
body {
  background-color: var(--base-color);
  color: var(--contrast-color);
  font-family: var(--font-text);
  font-size: var(--font-size-base);
}

/* Everything that is not reading text stays in the sans serif */
h1,
h2,
h3,
header,
footer,
.badge,
.call-to-action,
.text-link,
.step-number,
small {
  font-family: var(--font-ui);
}

h1,
h2,
h3 {
  font-weight: 700;
}

h1 {
  font-size: var(--font-size-2xl);
  line-height: 1.1;
  letter-spacing: -0.01em;
  background: var(--gold-gradient);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;

  @media(min-width: 640px) {
    font-size: var(--font-size-3xl);
  }
}

h2 {
  font-size: var(--font-size-xl);
  margin-bottom: var(--default-padding);
}

/* Under every section title, one of the cover's snowflakes */
h2::after {
  content: "";
  display: block;
  width: 1.1rem;
  height: 1.25rem;
  margin-top: calc(var(--default-padding)/2);
  background: url('../images/snowflake-bold.svg') center / contain no-repeat;
}

h3 {
  font-size: var(--font-size-md);
}

p {
  line-height: 170%;
  margin-bottom: var(--default-padding);
}

small {
  font-size: var(--font-size-sm);
}

/* LINKS */
a {
  color: var(--link-color);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.25em;
  text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
  transition: color 0.2s, text-decoration-color 0.2s;
}

a:hover {
  color: var(--link-color-light);
  text-decoration-color: currentColor;
}

.text-link {
  font-weight: 500;
}

/* HEADER */
header {
  position: sticky;
  top: 0;
  z-index: 1000;
}

.header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--default-padding);
  height: var(--header-height);
  padding: 0 var(--default-padding);
  background-color: var(--base-color);
}

.header-wordmark {
  height: 3.4rem;
  width: auto;

  @media(min-width: 640px) {
    height: 3.8rem;
  }
}

/* The color band printed across the top of the cover, the book's 22 colors */
.color-strip {
  height: var(--strip-height);
  background: linear-gradient(to right,
      #D82679 0.00% 4.55%,
      #5D1F76 4.55% 9.09%,
      #CB9ADC 9.09% 13.64%,
      #FFACC7 13.64% 18.18%,
      #0047AB 18.18% 22.73%,
      #0FADE2 22.73% 27.27%,
      #B3EFF8 27.27% 31.82%,
      #6DE8C3 31.82% 36.36%,
      #0B4A12 36.36% 40.91%,
      #4EB52B 40.91% 45.45%,
      #B4D422 45.45% 50.00%,
      #FFED29 50.00% 54.55%,
      #F7C22D 54.55% 59.09%,
      #FF8D1C 59.09% 63.64%,
      #F84F00 63.64% 68.18%,
      #EF0909 68.18% 72.73%,
      #FFB688 72.73% 77.27%,
      #F4E1C8 77.27% 81.82%,
      #AB5A0F 81.82% 86.36%,
      #5C3004 86.36% 90.91%,
      #4B4B4B 90.91% 95.45%,
      #B0B0B0 95.45% 100.00%);
}

header nav {
  display: none;

  @media(min-width: 900px) {
    display: block;
    flex-grow: 1;
  }
}

header nav ul {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(0.3rem + 2%);
  list-style: none;
  padding-inline-start: 0;
}

header nav a {
  color: var(--contrast-color);
  font-size: var(--font-size-sm);
  font-weight: 500;
  text-decoration: none;
  padding: 0.3rem 0;
  border-bottom: 2px solid transparent;
}

header nav a:hover {
  color: var(--contrast-color);
  border-bottom-color: var(--gold);
}

header .call-to-action {
  font-size: var(--font-size-sm);
  padding: calc(var(--default-padding)/3) calc(var(--default-padding)*0.75);
  flex-shrink: 0;

  @media(min-width: 640px) {
    padding: calc(var(--default-padding)/3) var(--default-padding);
  }
}

/* The bag icon is the first thing to go when the header gets narrow */
header .call-to-action>svg {
  display: none;

  @media(min-width: 640px) {
    display: block;
  }
}

/* BANDS */
.band {
  padding: calc(var(--default-spacing)*2) var(--default-padding);
  scroll-margin-top: calc(var(--header-height) + var(--strip-height));
}

.band-inner {
  width: 100%;
  max-width: var(--page-width-max);
  margin: 0 auto;
}

/* A slightly lighter night, to tell two neighbouring sections apart */
.band-paper {
  background-color: var(--paper-color);
}

/* Cream, like the cards every passenger carries, for the one light section */
.band-cream {
  background-color: var(--cream);
  color: var(--base-color);
  padding-top: calc(var(--default-spacing)*2 + var(--slant));
  padding-bottom: calc(var(--default-spacing)*2 + var(--slant));
  clip-path: polygon(0 0, 100% var(--slant), 100% 100%, 0 calc(100% - var(--slant)));
}

.band-cream a:not(.call-to-action) {
  color: #7A5A10;
}

.band-cream a:not(.call-to-action):hover {
  color: var(--base-color);
}

.band-cream .secondary-text {
  color: #6B5E4C;
}

.band-cream h2::after {
  filter: brightness(0.7);
}

/* SNOWFALL */
/* Three sparse layers of the cover's snowflakes, far, mid and near. They only
   move while the page scrolls: each layer drifts down against the page as its
   band passes, near ones faster than far ones, so scrolling down feels like
   the snow is falling. The scroll
   position comes from a few lines of script; without it, or for visitors who
   asked for reduced motion, the snow simply stands still. */
.band-snow {
  position: relative;
  /* clip, not hidden: hidden makes the band a scroll container, and the
     parallax would then follow a scroller that never moves */
  overflow: clip;
  isolation: isolate;
}

.band-snow>.band-inner {
  position: relative;
  z-index: 1;
}

.snowfall {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* Taller than the band so the parallax shift never uncovers an edge */
.snow-layer {
  position: absolute;
  inset: -16rem 0;
  background: var(--snow) var(--offset) 0 / var(--tile) var(--tile) repeat;
}

.snow-far {
  --tile: 320px;
  --offset: 0px;
  --snow: url('../images/snowfall-far.svg');
  --parallax: 3rem;
}

.snow-mid {
  --tile: 460px;
  --offset: 120px;
  --snow: url('../images/snowfall-mid.svg');
  --parallax: 7rem;
}

.snow-near {
  --tile: 440px;
  --offset: 260px;
  --snow: url('../images/snowfall-near.svg');
  --parallax: 14rem;
  /* The big flakes keep to the side margins, never across a title or a line */
  -webkit-mask-image: linear-gradient(to right, black 0 8%, transparent 14% 86%, black 92%);
  mask-image: linear-gradient(to right, black 0 8%, transparent 14% 86%, black 92%);

  @media(min-width: 640px) {
    --tile: 640px;
  }
}

/* --snow-progress (0 when the band enters at the bottom of the screen, 1 when it
   leaves at the top) is set by the small script at the end of the page */
.snow-layer {
  transform: translateY(calc(var(--parallax) * (var(--snow-progress, 0.5) * 2 - 1)));
  will-change: transform;
}

/* HERO */
.hero {
  display: flex;
  flex-direction: column;
  align-items: start;
  gap: calc(var(--default-padding)/2);

  @media(min-width: 640px) {
    flex-direction: row;
    align-items: center;
    gap: calc(var(--default-spacing)*2);
  }
}

/* On a phone the text block dissolves into the hero so the cover can slot in
   right after the tagline (see the order values below) */
.hero-content {
  display: contents;
  flex-direction: column;
  align-items: start;
  gap: calc(var(--default-padding)/2);

  @media(min-width: 640px) {
    display: flex;
  }
}

.hero .badge {
  order: 1;
}

.hero h1 {
  order: 2;
}

.hero .tagline {
  order: 3;
}

.hero-subtitle {
  order: 5;
}

.hero-lede {
  order: 6;
}

.hero-actions {
  order: 7;
}

.hero h1 {
  margin-bottom: 0;
}

.tagline {
  font-family: var(--font-text);
  font-size: var(--font-size-xl);
  font-style: italic;
  color: var(--cream);
  line-height: 1.3;
}

.hero-subtitle {
  font-size: var(--font-size-md);
  margin-bottom: 0;
}

.hero-lede {
  margin-top: calc(var(--default-padding)/2);
  margin-bottom: calc(var(--default-padding)/2);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--default-padding);
}

/* On a phone the cover sits right under the tagline, so the book shows above the fold */
.hero-image {
  order: 4;
  align-self: center;
  max-width: 11rem;
  margin: calc(var(--default-padding)/2) 0;
  flex-shrink: 0;
  filter: drop-shadow(0 0 2.5rem rgba(237, 193, 72, 0.25));

  @media(min-width: 640px) {
    order: 0;
    margin: 0;
    max-width: 20rem;
  }
}

/* PHOTOS */
/* Two real photos of the book, side by side from 640px up */
.photo-pair {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--default-spacing);

  @media(min-width: 640px) {
    grid-template-columns: 1fr 1fr;
  }
}

/* STORY */
/* The story text with the fireside visual kept small beside it */
.story-split {
  display: flex;
  flex-direction: column;
  gap: var(--default-spacing);

  @media(min-width: 640px) {
    flex-direction: row;
    align-items: center;
  }
}

.story-text p:last-child {
  margin-bottom: 0;
}

.story-photo {
  width: 100%;
  max-width: 22rem;
  flex-shrink: 0;
  align-self: center;
}

/* FORMAT */
.figure-block {
  display: flex;
  flex-direction: column;
  gap: calc(var(--default-padding)/2);
  margin-top: var(--default-spacing);
}

.photo-block {
  padding-top: 0;
}

.steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--default-spacing);
  margin-top: var(--default-spacing);

  @media(min-width: 640px) {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

.step {
  display: flex;
  flex-direction: column;
  gap: calc(var(--default-padding)/2);
  background-color: var(--base-color);
  border-radius: var(--border-radius);
  padding: var(--default-padding);
}

.step h3 {
  margin-bottom: 0;
}

.step p {
  margin-bottom: 0;
  font-size: var(--font-size-sm);
}

/* The step number, big and in the gold gradient of the H1 */
.step-number {
  display: block;
  font-size: var(--font-size-3xl);
  font-weight: 700;
  line-height: 1;
  background: var(--gold-gradient);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

.step-visual {
  display: flex;
  align-items: center;
  justify-content: center;
}

.step-visual .close-up {
  width: auto;
  height: 7rem;
}

/* BOOK */
.book {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--default-spacing);

  @media(min-width: 640px) {
    flex-direction: row;
    align-items: center;
  }
}

.book-image {
  max-width: 13rem;
  flex-shrink: 0;
}

.book-detail ul {
  list-style: none;
  margin: 1rem 0 2rem 0;
  padding-left: 0;
}

.book-detail li {
  margin-bottom: 0.5rem;
  position: relative;
  padding-left: 1.7rem;
}

/* The snowflake stands in for the check */
.book-detail li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.3em;
  width: 1rem;
  height: 1.1rem;
  background: url('../images/snowflake-bold.svg') center / contain no-repeat;
}

/* FREE PAGE */
.free-page {
  text-align: center;
}

.free-page h2::after {
  margin-inline: auto;
}

.free-page>.band-inner>p {
  max-width: 40rem;
  margin-inline: auto;
}

.free-page-visual {
  display: block;
  width: 100%;
  max-width: 20rem;
  margin: 0 auto var(--default-spacing) auto;
  box-shadow: 0 0.6rem 1.5rem rgba(var(--base-color-rgb), 0.25);
  transform: rotate(-2deg);
  transition: transform 0.3s;
}

.free-page-visual:hover {
  transform: rotate(-2deg) translateY(-3px);
}

/* FAQ */
.faq-item {
  border-top: 1px solid var(--placeholder-color);
  padding-top: var(--default-padding);
  margin-bottom: var(--default-padding);
}

.faq-item h3 {
  margin-bottom: calc(var(--default-padding)/2);
}

.faq-item p:last-child {
  margin-bottom: 0;
}

/* ABOUT */
.about-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--default-spacing);

  @media(min-width: 640px) {
    flex-direction: row;
    align-items: start;
  }
}

/* The portrait is a black line drawing on white, so it sits on a cream card,
   the color of the passengers' tickets */
.author-card {
  flex-shrink: 0;
  background-color: var(--cream);
  border-radius: var(--border-radius);
  padding: 0.75rem 0.75rem 0 0.75rem;
  isolation: isolate;
}

.author-img {
  width: 8rem;
  height: auto;
  mix-blend-mode: multiply;
}

.about-text p:last-child {
  margin-bottom: 0;
}

/* SOCIALS */
.socials {
  text-align: center;
}

.socials h2::after {
  margin-inline: auto;
}

.social-links {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--default-spacing);
  list-style: none;
  padding-inline-start: 0;
  margin-top: var(--default-spacing);
}

.social-links a {
  display: block;
  color: var(--contrast-color);
  transition: color 0.3s, transform 0.3s;
}

.social-links a:hover {
  color: var(--gold);
  transform: translateY(-3px);
}

.social-links svg {
  width: 3rem;
  height: 3rem;

  @media(min-width: 640px) {
    width: 3.5rem;
    height: 3.5rem;
  }
}

/* FOOTER */
footer {
  background-color: #000915;
  color: var(--contrast-color);
  text-align: center;
  font-size: var(--font-size-sm);
  padding: calc(var(--default-spacing)*2) var(--default-padding);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--default-padding);
}

.footer-wordmark {
  width: 10rem;
  height: auto;
  margin-bottom: calc(var(--default-padding)/2);
}

footer a {
  text-decoration: none;
  color: var(--contrast-color);
}

footer a:hover {
  color: var(--gold);
}

footer nav ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  list-style: none;
  padding-inline-start: 0;
  gap: var(--default-spacing);
}

.amazon-disclaimer {
  color: var(--secondary-color);
}

/* GENERIC STYLES */
.secondary-text {
  color: var(--secondary-color);
}

.rounded-box {
  border-radius: var(--border-radius);
  overflow: hidden;
}

.spacer {
  height: var(--default-spacing);
}

.badge {
  border: 1px solid var(--gold);
  color: var(--gold);
  border-radius: var(--border-radius);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: var(--font-size-sm);
  padding: 0.25rem 0.75rem;
}

/* Gold like the wordmark, with night text so it stays readable */
.call-to-action {
  display: inline-flex;
  align-items: center;
  border-radius: var(--border-radius);
  color: var(--base-color);
  background: var(--gold-gradient);
  padding: calc(var(--default-padding)/2) calc(var(--default-padding)*2);
  font-size: var(--font-size-md);
  font-weight: 600;
  text-decoration: none;
  text-align: left;
  gap: 0.5rem;

  transition: filter 0.3s, transform 0.3s;
}

.call-to-action:hover {
  color: var(--base-color);
  filter: brightness(1.08);
  transform: translateY(-2px);
}

.call-to-action>svg {
  height: 1.5rem;
  width: auto;
  flex-shrink: 0;
}

.call-to-action-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--default-padding)/2);
}

.download {
  background: var(--base-color);
  color: var(--cream);
}

.download:hover {
  color: var(--cream);
  filter: none;
  background: var(--paper-color);
}