@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600;700&family=Space+Grotesk:wght@300;400;600&display=swap");
@import url("https://use.typekit.net/jdd0dan.css");

/* Makes padding/border stay inside the element's width/height */
* {
  box-sizing: border-box;
}

/*
  Color palette source:
  https://coolors.co/palette/606c38-283618-fefae0-dda15e-bc6c25
*/
:root {
  /* Layout widths (editorial / Medium-like reading measure) */
  --content-width: 1920px;

  /* Main palette */
  --olive-leaf: #606c38ff;
  --black-forest: #283618ff;
  --cornsilk: #fefae0ff;
  --sunlit-clay: #dda15eff;
  --copperwood: #bc6c25ff;

  --ink: var(--black-forest);
  --paper: var(--cornsilk);

  /*
    rgba(red, green, blue, alpha)
    - alpha is opacity: 0 = invisible, 1 = solid
    Example: rgba(40, 54, 24, 0.72) = dark green at 72% opacity
  */
  --muted: rgba(40, 54, 24, 0.72);

  /* Soft shadow/border colors using the same ink color but transparent */
  --shadow: rgba(40, 54, 24, 0.14);
  --border: rgba(40, 54, 24, 0.12);

  --font-sans:
    "Space Grotesk", system-ui, -apple-system, Segoe UI, Roboto, Helvetica,
    Arial, sans-serif;

  --font-adobe: "futura-pt", "Space Grotesk", system-ui, sans-serif;
  --font-serif: "Playfair Display", Georgia, "Times New Roman", serif;
}

body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: var(--font-sans);

  /* Subtle “Medium-like” readability defaults */
  font-size: 17px;
  line-height: 1.55;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-kerning: normal;
  font-feature-settings:
    "kern" 1,
    "liga" 1,
    "calt" 1;
}

.page-header {
  padding: 64px 8% 24px;
  max-width: var(--content-width);
  margin-left: auto;
  margin-right: auto;
}

.eyebrow {
  margin: 0;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 4px;
  font-size: 12px;
}

.page-header h1 {
  margin: 10px 0 12px;
  font-family: var(--font-serif);
  font-size: clamp(42px, 5vw, 56px);
  letter-spacing: 0.3px;
  line-height: 1.08;
}

.subtitle {
  margin: 0;
  max-width: 560px;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.6;
}

.quotes {
  display: grid;
  /* Grid layout for the 10 cards */
  grid-template-columns: 24% 24% 24% 24%;

  /* Forces every “box” to be the same height */
  grid-auto-rows: 400px;

  /* Spread the 4 columns across the row */
  justify-content: space-between;
  gap: 24px;
  padding: 24px 8% 64px;
  max-width: var(--content-width);
  margin-left: auto;
  margin-right: auto;
}

.quote-card {
  border-radius: 18px;
  padding: 26px 24px 22px;
  /* Slightly transparent background so gradients/textures show nicely */
  background: rgba(254, 250, 224, 0.78);
  box-shadow: 0 18px 40px var(--shadow);
  min-height: 240px;

  /* Fill the grid cell height */
  height: 100%;

  /* If text is too long, it won't spill outside the card */
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 10px;
  border: 1px solid var(--border);
}

.emotion {
  margin: 0;
  font-size: 12px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: rgba(40, 54, 24, 0.64);
}

.quote-card h2 {
  margin: 0;
  font-size: 22px;
  font-weight: 600;
  line-height: 1.32;
  letter-spacing: 0.1px;
}

.context {
  margin: 0;
  font-size: 15px;
  color: var(--muted);
  line-height: 1.55;
}

.author {
  margin-top: auto;
  font-weight: 600;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 2px;
}

.calm {
  /* Gradient background = smooth color blend */
  background-image: linear-gradient(
    135deg,
    rgba(96, 108, 56, 0.18),
    rgba(254, 250, 224, 0.95)
  );
  border-color: rgba(96, 108, 56, 0.28);
}

.calm h2 {
  font-family: var(--font-serif);
  font-weight: 600;
}

.bold {
  background: var(--black-forest);
  color: rgba(254, 250, 224, 0.96);
  border-color: rgba(254, 250, 224, 0.14);
}

.bold .emotion,
.bold .context,
.bold .author {
  color: rgba(254, 250, 224, 0.76);
}

.bold h2 {
  font-family: var(--font-adobe);
  font-size: 26px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.wonder {
  /* Multiple backgrounds layered together (radial + linear gradients) */
  background-image:
    radial-gradient(
      circle at 20% 10%,
      rgba(221, 161, 94, 0.45),
      rgba(254, 250, 224, 0)
    ),
    linear-gradient(140deg, rgba(254, 250, 224, 0.92), rgba(221, 161, 94, 0.28));
  border-color: rgba(221, 161, 94, 0.28);
}

.wonder h2 {
  font-family: var(--font-serif);
  font-weight: 700;
}

.grit {
  /* Repeating lines texture */
  background-image: repeating-linear-gradient(
    45deg,
    rgba(40, 54, 24, 0.05) 0,
    rgba(40, 54, 24, 0.05) 10px,
    rgba(40, 54, 24, 0.015) 10px,
    rgba(40, 54, 24, 0.015) 20px
  );
  background-color: rgba(254, 250, 224, 0.88);
  border-left: 6px solid rgba(40, 54, 24, 0.76);
}

.grit h2 {
  text-transform: uppercase;
  font-weight: 700;
  font-size: 20px;
  letter-spacing: 1px;
}

.joy {
  background-image:
    radial-gradient(
      circle at top,
      rgba(221, 161, 94, 0.8),
      rgba(188, 108, 37, 0.32)
    ),
    linear-gradient(135deg, rgba(96, 108, 56, 0.18), rgba(254, 250, 224, 0.18));
  color: rgba(40, 54, 24, 0.96);
}

.joy .emotion,
.joy .context {
  color: rgba(40, 54, 24, 0.74);
}

.focus {
  background-image: linear-gradient(
    180deg,
    rgba(96, 108, 56, 0.12),
    rgba(254, 250, 224, 0)
  );
  border-color: rgba(96, 108, 56, 0.24);
}

.focus h2 {
  font-family: var(--font-sans);
  font-weight: 600;
}

.night {
  /* “Night sky” effect using layered gradients */
  background-image:
    radial-gradient(
      circle at 30% 25%,
      rgba(254, 250, 224, 0.12),
      rgba(254, 250, 224, 0)
    ),
    radial-gradient(
      circle at 70% 65%,
      rgba(254, 250, 224, 0.1),
      rgba(40, 54, 24, 0)
    ),
    linear-gradient(180deg, rgba(40, 54, 24, 0.92), rgba(40, 54, 24, 0.98));
  color: rgba(254, 250, 224, 0.96);
  border-color: rgba(254, 250, 224, 0.14);
}

.night .emotion,
.night .context,
.night .author {
  color: rgba(254, 250, 224, 0.74);
}

.energy {
  background-image: linear-gradient(
    135deg,
    rgba(221, 161, 94, 0.26),
    rgba(96, 108, 56, 0.22),
    rgba(188, 108, 37, 0.22)
  );
  border: 1px dashed rgba(96, 108, 56, 0.85);
}

.energy h2 {
  font-size: 23px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
}

.grace {
  background-image: linear-gradient(
    160deg,
    rgba(254, 250, 224, 0.94),
    rgba(221, 161, 94, 0.22) 60%,
    rgba(96, 108, 56, 0.14)
  );
  border-color: rgba(188, 108, 37, 0.22);
  opacity: 0.96;
}

.grace h2 {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 600;
}

.clarity {
  background: rgba(254, 250, 224, 0.92);
  border-color: rgba(40, 54, 24, 0.14);
}

.clarity h2 {
  text-transform: uppercase;
  letter-spacing: 3px;
  font-size: 18px;
}

.page-footer {
  padding: 0 8% 56px;
  color: var(--muted);
  font-size: 14px;
  max-width: var(--content-width);
  margin-left: auto;
  margin-right: auto;
}