/* ==========================================================================
   STORY CARD (the back of the orange hero card)  -  EDIT THIS FILE TO RESTYLE THE TEXT
   Text itself lives in index.html inside <div class="story">.

   1) SIZES PER SCREEN SIZE  - see the "SCREEN SIZE CONTROLS" block just below.
      Each block sets the base size / line height / weight / colour / width for that range.
      Change the numbers; nothing else needs touching.

   2) STYLING INDIVIDUAL WORDS OR LETTERS - wrap them in a span in index.html:
        <span class="bold">Jason</span>             bold word
        <span class="xl bold">U</span>pfold         big bold first letter
        <span class="c-indigo">design</span>        coloured word
        <span class="t" style="--s:1.6; --w:700; --c:#191c3d">x</span>   fully custom (see .t below)
      Classes can be combined, and spans can be nested.
        SIZE    : .xs .sm .lg .xl .xxl   (multipliers of the base size, scaled per screen size below)
        WEIGHT  : .light(300) .reg(400) .med(500) .bold(700)
        COLOUR  : .c-white .c-indigo .c-powder .c-periwinkle .c-ice .c-silver .c-black
   ========================================================================== */

.story {
  /* ----- defaults (phones) ----- */
  --story-size: 16px;          /* paragraph font size */
  --story-line: 1.6;           /* line height (multiplier) */
  --story-weight: 400;         /* paragraph font weight */
  --story-color: var(--powder); /* paragraph colour */
  --story-width: calc(100% - 2 * (var(--inner) + 6px));   /* text block width inside the card */
  --story-gap: 1em;            /* space between paragraphs */
  --story-max: min(3.6cqh, calc((100cqw + 100cqh) * .0155));   /* size cap from the card size, so text never overflows on small or short screens */

  /* size multipliers for the .xs .sm .lg .xl .xxl classes (separate per screen size) */
  --xs: .75;  --sm: .88;  --lg: 1.3;  --xl: 1.7;  --xxl: 2.3;

  width: var(--story-width);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--story-gap);
  color: var(--story-color);
}

/* ===================== SCREEN SIZE CONTROLS ===================== */

/* Tablets / small windows: 700px and up */
@media (min-width: 700px) {
  .story {
    --story-size: 17px; --story-line: 1.6; --story-width: 90%;
    --xs: .75; --sm: .88; --lg: 1.3; --xl: 1.7; --xxl: 2.3;
  }
}

/* Laptops: 1100px and up */
@media (min-width: 1100px) {
  .story {
    --story-size: 26px; --story-line: 1.55; --story-width: 80%;
    --xs: .75; --sm: .88; --lg: 1.3; --xl: 1.8; --xxl: 2.5;
  }
}

/* Desktops / 24" monitors: 1600px and up */
@media (min-width: 1600px) {
  .story {
    --story-size: 38px; --story-line: 1.5; --story-width: 72%;
    --xs: .75; --sm: .88; --lg: 1.3; --xl: 1.8; --xxl: 2.5;
  }
}

/* Large monitors: 2200px and up */
@media (min-width: 2200px) {
  .story {
    --story-size: 42px; --story-line: 1.5; --story-width: 66%;
    --xs: .75; --sm: .88; --lg: 1.3; --xl: 1.8; --xxl: 2.5;
  }
}

/* Very large / 4K-style windows: 3000px and up */
@media (min-width: 3000px) {
  .story {
    --story-size: 72px; --story-line: 1.45; --story-width: 60%;
    --xs: .75; --sm: .88; --lg: 1.3; --xl: 1.8; --xxl: 2.5;
  }
}

/* ===================== TEXT ELEMENTS ===================== */

/* Small label above the paragraph (the word "Story") */
.story-kicker {
  margin: 0;
  font-size: calc(min(var(--story-size), var(--story-max)) * .8);
  font-weight: 700;
  letter-spacing: .02em;
  opacity: .70;
  color: inherit;
}

/* A paragraph */
.story-text {
  margin: 0;
  font-size: min(var(--story-size), var(--story-max));
  line-height: var(--story-line);
  font-weight: var(--story-weight);
  color: inherit;
}

/* ===================== PER-WORD / PER-LETTER STYLES ===================== */
.story .xs  { font-size: calc(1em * var(--xs)); }
.story .sm  { font-size: calc(1em * var(--sm)); }
.story .lg  { font-size: calc(1em * var(--lg)); }
.story .xl  { font-size: calc(1em * var(--xl)); }
.story .xxl { font-size: calc(1em * var(--xxl)); }

.story .light { font-weight: 300; }   /* needs weight 300 in the Google Fonts link (already added) */
.story .reg   { font-weight: 400; }
.story .med   { font-weight: 500; }
.story .bold  { font-weight: 700; }

.story .c-white      { color: var(--white); }
.story .c-indigo     { color: var(--indigo); }
.story .c-powder     { color: var(--powder); }
.story .c-periwinkle { color: var(--periwinkle); }
.story .c-ice        { color: var(--ice); }
.story .c-silver     { color: var(--silver); }
.story .c-black      { color: var(--black); }

/* Fully custom: size multiplier --s, weight --w, colour --c (any may be left out) */
.story .t {
  font-size: calc(1em * var(--s, 1));
  font-weight: var(--w, inherit);
  color: var(--c, inherit);
}