/* =========================================================
   GLOBAL SETTINGS
========================================================= */

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  min-height: 100%;
}

html {
  background-color: #f6f3ed;

  background-image:
    linear-gradient(
      rgba(30, 30, 30, 0.07) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(30, 30, 30, 0.07) 1px,
      transparent 1px
    );

  background-size: 32px 32px;
}

body {
  background: transparent;
  color: #1e1e1e;
  font-family: Arial, sans-serif;
}


/* =========================================================
   STORY SECTION
========================================================= */

.story-section {
  --story-dark: #1e1e1e;
  --story-cream: #f6f3ed;
  --story-lime: #d1ff71;
  --story-teal: #069093;
  --story-purple: #9192ff;

  min-height: 100vh;

  padding: 80px 30px 70px;

  overflow: hidden;

  background: transparent;
  color: var(--story-dark);
}

.story-container {
  width: min(1320px, 100%);
  margin: 0 auto;
}


/* =========================================================
   TOP STORY AREA

   Text stays in normal flow.
   Silhouette floats independently in top-right.
========================================================= */

.story-top {
  position: relative;

  display: block;

  min-height: 620px;

  margin-bottom: 35px;
}


/* =========================================================
   INTRODUCTION
========================================================= */

.story-intro {
  position: relative;
  z-index: 2;

  width: calc(100% - 440px);
  max-width: 790px;

  margin: 0;
}

.story-eyebrow {
  margin: 0 0 18px;

  font-size: 0.85rem;
  font-weight: 800;

  letter-spacing: 0.12em;
  line-height: 1;

  text-transform: uppercase;
}

.story-intro h2 {
  margin: 0;

  font-family: Georgia, "Times New Roman", serif;

  font-size: clamp(4.7rem, 6vw, 6rem);
  font-weight: 700;

  letter-spacing: -0.055em;
  line-height: 0.94;

  /*
    Only the <br> elements are allowed
    to create new lines.
  */
  white-space: nowrap;
}

.story-quote {
  max-width: 760px;

  margin: 30px 0 0;

  font-size: clamp(1rem, 1.2vw, 1.2rem);
  font-style: italic;

  line-height: 1.6;
}

.story-quote-name {
  margin: 16px 0 0;

  font-size: 0.9rem;
  font-weight: 900;
  font-style: normal;

  line-height: 1;
}


/* =========================================================
   TOP SILHOUETTE

   Decorative element:
   does NOT affect document height.
========================================================= */

.story-feature-image {
  position: absolute;
  z-index: 1;

  top: 25px;
  right: 0;

  display: block;

  width: clamp(300px, 28vw, 420px);
  height: auto;
  min-height: 0;

  pointer-events: none;
}

.story-feature-image img {
  display: block;

  width: 100%;
  height: auto;

  object-fit: contain;
  object-position: center top;
}


/* =========================================================
   STORY LAYOUT
========================================================= */

.story-layout {
  position: relative;

  margin-top: 15px;
}


/* =========================================================
   STAGGERED DESKTOP STORY GRID
========================================================= */

.story-grid {
  display: grid;

  grid-template-columns: repeat(7, 260px);

  justify-content: start;
  align-items: start;

  width: 100%;

  /*
    Cards intentionally rise into the top composition.
    Silhouette can therefore visually sit behind this area.
  */
  margin-top: -180px;

  column-gap: 28px;
  row-gap: 85px;
}


/* =========================================================
   DESKTOP CARD POSITIONS
========================================================= */

/* Row 1 */

.story-point--1 {
  grid-column: 1;
  grid-row: 1;
}

.story-point--2 {
  grid-column: 2;
  grid-row: 1;
}

.story-point--3 {
  grid-column: 3;
  grid-row: 1;
}


/* Row 2 */

.story-point--6 {
  grid-column: 2;
  grid-row: 2;
}

.story-point--5 {
  grid-column: 3;
  grid-row: 2;
}

.story-point--4 {
  grid-column: 4;
  grid-row: 2;
}


/* Row 3 */

.story-point--7 {
  grid-column: 1;
  grid-row: 3;
}

.story-point--8 {
  grid-column: 2;
  grid-row: 3;
}

.story-point--9 {
  grid-column: 3;
  grid-row: 3;
}


/* Row 4 */

.story-point--12 {
  grid-column: 2;
  grid-row: 4;
}

.story-point--11 {
  grid-column: 3;
  grid-row: 4;
}

.story-point--10 {
  grid-column: 4;
  grid-row: 4;
}


/* Row 5 */

.story-point--13 {
  grid-column: 1;
  grid-row: 5;
}

.story-point--14 {
  grid-column: 2;
  grid-row: 5;
}

.story-point--15 {
  grid-column: 3;
  grid-row: 5;
}


/* =========================================================
   STORY POINT
========================================================= */

.story-point {
  position: relative;
  z-index: 2;

  width: 260px;
  min-width: 260px;
  max-width: 260px;

  margin: 0;

  justify-self: start;
}


/* =========================================================
   CARD CONNECTORS
========================================================= */

.card-connector {
  position: absolute;
  z-index: 0;

  pointer-events: none;
}


/* RIGHT-HAND CONNECTORS */

.card-connector--3-4,
.card-connector--9-10 {
  top: 45%;
  right: -110px;

  width: 110px;
  height: 260px;
}

.card-connector--3-4::after,
.card-connector--9-10::after {
  content: "";

  position: absolute;
  inset: 0;

  border-top: 4px solid var(--story-dark);
  border-right: 4px solid var(--story-dark);

  border-radius: 0 100% 0 0;
}


/* LEFT-HAND CONNECTORS */

.card-connector--6-7,
.card-connector--12-13 {
  top: 65%;
  left: -110px;

  width: 110px;
  height: 260px;
}

.card-connector--6-7::after,
.card-connector--12-13::after {
  content: "";

  position: absolute;
  inset: 0;

  border-top: 4px solid var(--story-dark);
  border-left: 4px solid var(--story-dark);

  border-radius: 100% 0 0 0;
}


/* =========================================================
   STORY CARD
========================================================= */

.story-card {
  position: relative;
  z-index: 2;

  display: block;

  width: 100%;
  min-height: 280px;

  padding: 28px 21px 20px;

  overflow: hidden;

  border: 3px solid var(--story-dark);

  background: #ffffff;
  color: var(--story-dark);

  box-shadow: 8px 8px 0 var(--story-dark);

  transition:
    transform 200ms ease,
    box-shadow 200ms ease;
}

.story-point:hover .story-card {
  transform: translateY(-4px);

  box-shadow: 11px 11px 0 var(--story-dark);
}


/* =========================================================
   CIRCULAR STORY IMAGE
========================================================= */

.story-image {
  position: absolute;
  z-index: 5;

  top: -34px;
  right: -18px;

  width: 110px;

  aspect-ratio: 1;

  overflow: hidden;

  border: 7px solid var(--story-lime);
  border-radius: 50%;

  outline: 2px solid var(--story-dark);

  background: var(--story-lime);

  transition:
    transform 200ms ease,
    box-shadow 200ms ease;
}

.story-image img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;

  border-radius: 50%;
}

.story-point:hover .story-image {
  transform: translateY(-5px) rotate(-3deg);

  box-shadow: 6px 6px 0 var(--story-dark);
}


/* =========================================================
   STORY NUMBER
========================================================= */

.story-number {
  display: inline-flex;

  align-items: center;
  justify-content: center;

  min-width: 42px;
  min-height: 26px;

  margin-bottom: 17px;
  padding: 4px 10px;

  border: 2px solid var(--story-dark);
  border-radius: 999px;

  background: var(--story-lime);
  color: var(--story-dark);

  font-size: 0.72rem;
  font-weight: 900;

  line-height: 1;
}


/* =========================================================
   CARD TEXT
========================================================= */

.story-card h3 {
  max-width: calc(100% - 28px);

  margin: 0 0 11px;

  font-size: 1rem;
  font-weight: 900;

  letter-spacing: -0.025em;
  line-height: 1.08;
}

.story-card p {
  margin: 0;

  font-size: 0.77rem;

  line-height: 1.4;
}


/* =========================================================
   OPTIONAL ACCENT CARDS
========================================================= */

.story-point--dark .story-card {
  background: var(--story-dark);
  color: var(--story-cream);
}

.story-point--dark .story-card h3,
.story-point--dark .story-card p {
  color: var(--story-cream);
}

.story-point--lime .story-card {
  background: var(--story-lime);
}

.story-point--lime .story-number {
  background: var(--story-cream);
}

.story-point--purple .story-card {
  background: var(--story-purple);
}

.story-point--teal .story-card {
  background: var(--story-teal);
  color: var(--story-cream);
}

.story-point--teal .story-card h3,
.story-point--teal .story-card p {
  color: var(--story-cream);
}


/* =========================================================
   MEDIUM DESKTOP / TABLET
   1180px AND BELOW

   Silhouette remains top-right.
   Text width and image size reduce smoothly.
========================================================= */

@media (max-width: 1180px) {

  .story-section {
    padding: 70px 24px 100px;
  }

  .story-top {
    min-height: clamp(500px, 48vw, 570px);

    margin-bottom: 20px;
  }

  .story-intro {
    width: calc(100% - clamp(260px, 31vw, 360px));
    max-width: 720px;
  }

  .story-intro h2 {
    font-size: clamp(4rem, 7.2vw, 5.3rem);
  }

  .story-feature-image {
    top: 20px;

    width: clamp(240px, 28vw, 330px);
  }


  /* ---------------------------------------------------------
     STANDARD RESPONSIVE CARD GRID

     No hard-coded 3 -> 2 jump.
     Browser fits as many 260px cards as genuinely fit.
  --------------------------------------------------------- */

  .story-grid {
    grid-template-columns:
      repeat(auto-fit, minmax(260px, 260px));

    justify-content: center;

    width: min(880px, 100%);

    margin:
      clamp(-135px, -10vw, -90px)
      auto
      0;

    column-gap: clamp(20px, 3vw, 32px);
    row-gap: 80px;
  }

  .story-point,
  .story-point--1,
  .story-point--2,
  .story-point--3,
  .story-point--4,
  .story-point--5,
  .story-point--6,
  .story-point--7,
  .story-point--8,
  .story-point--9,
  .story-point--10,
  .story-point--11,
  .story-point--12,
  .story-point--13,
  .story-point--14,
  .story-point--15 {
    grid-column: auto;
    grid-row: auto;

    width: 260px;
    min-width: 260px;
    max-width: 260px;

    margin: 0;

    justify-self: center;
  }

  .card-connector {
    display: none;
  }
}


/* =========================================================
   NARROW TABLET
   900px AND BELOW
========================================================= */

@media (max-width: 900px) {

  .story-top {
    min-height: 520px;
  }

  .story-intro {
    width: calc(100% - clamp(200px, 28vw, 250px));
  }

  .story-intro h2 {
    font-size: clamp(3.6rem, 8.3vw, 4.6rem);
  }

  .story-quote {
    font-size: 1rem;
  }

  .story-feature-image {
    top: 20px;

    width: clamp(180px, 25vw, 225px);
  }

  .story-grid {
    width: min(580px, 100%);

    margin-top: -90px;
  }
}


/* =========================================================
   SMALL TABLET
   700px AND BELOW
========================================================= */

@media (max-width: 700px) {

  .story-section {
    padding: 55px 20px 85px;
  }

  .story-top {
    min-height: 500px;
  }

  .story-intro {
    /*
      Still reserve a smaller right-hand lane
      for the silhouette.
    */
    width: calc(100% - clamp(130px, 25vw, 175px));
  }

  .story-intro h2 {
    font-size: clamp(3.3rem, 9.5vw, 4rem);
  }

  .story-quote {
    /*
      Quote is allowed to extend farther right
      because silhouette is mostly above it.
    */
    width: calc(100vw - 40px);
    max-width: 620px;

    font-size: 0.98rem;
  }

  .story-feature-image {
    top: 10px;
    right: 0;

    width: clamp(125px, 23vw, 160px);
  }

  .story-grid {
    margin-top: -65px;
  }
}

.vibe-carousel {
  gap: 10px;
}

.vibe-check-grid {
  gap: 25px;
}

.vibe-article {
  flex: 0 0 100%;
}

.vibe-arrow {
  font-size: 2.2rem;
}


/* =========================================================
   MOBILE
   520px AND BELOW

   IMPORTANT:
   Silhouette STILL stays top-right.
   It does NOT move between Erini and card 01.
========================================================= */

@media (max-width: 520px) {

  .story-section {
    padding: 30px 18px 70px;
  }

  .story-container {
    width: 100%;
  }

  .story-top {
    /*
      Height comes primarily from the text.
      Silhouette remains floating.
    */
    min-height: 0;

    margin-bottom: 45px;
  }

  .story-intro {
    width: 100%;
    max-width: none;
  }

  .story-eyebrow {
    margin-bottom: 14px;

    font-size: 0.75rem;
  }

  .story-intro h2 {
    /*
      Three lines always:
      Throwing
      Shapes,
      Creating Vibes.
    */
    width: calc(100% - clamp(75px, 20vw, 100px));

    font-size: clamp(2.8rem, 13vw, 4rem);

    line-height: 0.91;

    white-space: nowrap;
  }

  .story-quote {
    width: calc(100% - 8px);
    max-width: none;

    margin-top: 28px;

    font-size: clamp(0.9rem, 3.6vw, 1rem);

    line-height: 1.6;
  }

  .story-quote-name {
    margin-top: 16px;
  }


  /* ---------------------------------------------------------
     PHONE SILHOUETTE

     Small, top-right, same visual concept as screenshot 8.
  --------------------------------------------------------- */

  .story-feature-image {
    position: absolute;

    top: 12px;
    right: -3px;

    width: clamp(70px, 20vw, 100px);

    height: auto;
    min-height: 0;
  }

  .story-feature-image img {
    width: 100%;
    height: auto;

    max-height: none;
  }


  /* ---------------------------------------------------------
     SINGLE COLUMN CARDS
  --------------------------------------------------------- */

  .story-layout {
    margin-top: 0;
  }

  .story-grid {
    display: grid;

    grid-template-columns: minmax(0, 320px);

    justify-content: center;

    width: 100%;

    margin: 0 auto;

    column-gap: 0;
    row-gap: 76px;
  }

  .story-point,
  .story-point--1,
  .story-point--2,
  .story-point--3,
  .story-point--4,
  .story-point--5,
  .story-point--6,
  .story-point--7,
  .story-point--8,
  .story-point--9,
  .story-point--10,
  .story-point--11,
  .story-point--12,
  .story-point--13,
  .story-point--14,
  .story-point--15 {
    grid-column: 1;
    grid-row: auto;

    width: 100%;
    min-width: 0;
    max-width: 320px;

    margin: 0;

    justify-self: center;
  }

  .story-card {
    min-height: 250px;
  }
}


/* =========================================================
   VERY SMALL PHONES
   390px AND BELOW
========================================================= */

@media (max-width: 390px) {

  .story-section {
    padding-left: 15px;
    padding-right: 15px;
  }

  .story-intro h2 {
    width: calc(100% - 68px);

    font-size: clamp(2.55rem, 13vw, 3.25rem);
  }

  .story-feature-image {
    top: 15px;
    right: -2px;

    width: clamp(62px, 19vw, 78px);
  }

  .story-quote {
    width: 100%;

    font-size: 0.9rem;
  }
}


/* =========================================================
   FULL-WIDTH IMAGE STRIP
========================================================= */

.image-strip {
  display: grid;

  grid-template-columns: repeat(4, 1fr);

  width: 100vw;

  margin: 0;
  padding: 0;

  gap: 0;
}

.image-strip-item {
  height: clamp(180px, 25vw, 420px);

  overflow: hidden;
}

.image-strip-item img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;
  object-position: center 20%;
}


/* =========================================================
   BLACK CTA SECTION
========================================================= */

.story-cta {
  padding: 90px 30px 110px;

  background: #1e1e1e;
  color: #ffffff;
}

.story-cta-inner {
  width: min(1100px, 100%);

  margin: 0 auto;
}

.story-cta-eyebrow {
  margin: 0 0 18px;

  color: #d1ff71;

  font-size: 0.85rem;
  font-weight: 900;

  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.story-cta h2 {
  max-width: 900px;

  margin: 0;

  font-family: Georgia, "Times New Roman", serif;

  font-size: clamp(3rem, 7vw, 6.5rem);

  letter-spacing: -0.05em;
  line-height: 0.95;
}

.story-cta h2 span {
  color: #d1ff71;
}

.story-cta-copy {
  max-width: 650px;

  margin: 30px 0 0;

  font-size: 1.1rem;

  line-height: 1.6;
}

/* =========================================================
SOCIAL LINKS
========================================================= */

.social-links {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 24px;
  padding: 45px 20px 0;
}

.social-links a {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  text-decoration: none;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.social-links svg {
  width: 25px;
  height: 25px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.social-links a:hover {
  transform: translateY(-2px);
  opacity: 0.6;
}

/* =========================================================
VIBE CHECK
========================================================= */

.vibe-check {
  padding: 70px 5vw 100px;
  background: transparent;
  color: #1e1e1e;
}


/* HEADER */

.vibe-check-header {
  width: min(1320px, 100%);
  margin: 0 auto 55px;
}

.vibe-check-header h2 {
  margin: 0;

  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}


/* CAROUSEL WRAPPER */

.vibe-carousel {
  width: min(1500px, 100%);
  margin: 0 auto;

  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) 40px;

  align-items: center;
  column-gap: 25px;
}


/* WINDOW */

.vibe-carousel-window {
  width: 100%;
  min-width: 0;

  overflow: hidden;
}


/* STORY TRACK */

.vibe-track {
  width: 100%;

  display: grid;
  grid-auto-flow: column;

  grid-auto-columns: calc((100% - 100px) / 3);

  gap: 50px;

  overflow-x: auto;
  overflow-y: visible;

  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;

  scrollbar-width: none;
}

.vibe-track::-webkit-scrollbar {
  display: none;
}


/* STORY */

.vibe-article {
  width: 100%;
  min-width: 0;

  padding: 15px 0;

  scroll-snap-align: start;

  transition:
    transform 0.25s ease,
    opacity 0.25s ease;
}

.vibe-article:hover {
  transform: translateY(-7px);
}


/* TITLE */

.vibe-article h3 {
  margin: 0 0 18px;

  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.55rem, 2.25vw, 2.8rem);
  font-weight: 400;

  line-height: 1.08;
}


/* DATE */

.vibe-date {
  display: inline;

  margin-right: 8px;

  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.75em;
  font-weight: 400;

  color: #069093;
}


/* SHORT LINE */

.vibe-line {
  width: 33%;
  height: 1px;

  margin: 0 0 12px;

  background: rgba(30, 30, 30, 0.28);
}


/* KEYWORD */

.vibe-keyword {
  margin: 0 0 10px;

  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.8rem;
  font-style: italic;
}


/* BODY TEXT */

.vibe-description {
  margin: 0;

  max-width: 28rem;

  font-size: 0.72rem;
  line-height: 1.55;

  letter-spacing: 0.025em;

  opacity: 0.68;
}


/* ARROWS */

.vibe-arrow {
  border: 0;
  padding: 0;

  background: transparent;
  color: #1e1e1e;

  font-family: Georgia, "Times New Roman", serif;
  font-size: 2.8rem;
  font-weight: 400;
  line-height: 1;

  cursor: pointer;

  transition:
    transform 0.2s ease,
    opacity 0.2s ease;
}

.vibe-arrow:hover {
  transform: scale(1.15);
  opacity: 0.5;
}


/* MOBILE */

@media (max-width: 600px) {

  .vibe-check {
    padding: 55px 18px 75px;
  }

  .vibe-check-header {
    margin-bottom: 35px;
  }

  .vibe-carousel {
    grid-template-columns: 24px minmax(0, 1fr) 24px;
    column-gap: 8px;
  }

  .vibe-track {
    grid-auto-columns: 100%;
    gap: 25px;
  }

  .vibe-arrow {
    font-size: 2rem;
  }

}

/* =========================================================
BLOG POST
========================================================= */

.blog-post {
  min-height: 100vh;
  padding: 100px 24px;
}

.blog-post-inner {
  width: min(760px, 100%);
  margin: 0 auto;
}

.blog-post-meta {
  margin: 0 0 22px;

  font-family: Georgia, "Times New Roman", serif;
  font-size: 1rem;

  color: #069093;
}

.blog-post h1 {
  margin: 0 0 30px;

  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(3rem, 7vw, 6.5rem);
  font-weight: 400;
  line-height: 0.95;
}

.blog-post-intro {
  margin: 0 0 55px;

  font-size: 1.2rem;
  line-height: 1.6;
}

.blog-post-body {
  font-size: 1rem;
  line-height: 1.8;
}

.blog-post-body p {
  margin: 0 0 24px;
}

.blog-post-body h2 {
  margin: 55px 0 20px;

  font-family: Georgia, "Times New Roman", serif;
  font-size: 2rem;
  font-weight: 400;
}

.blog-back-link {
  display: inline-block;
  margin-top: 60px;

  color: inherit;
  text-decoration: none;
  font-weight: 700;
}

.blog-back-link:hover {
  opacity: 0.55;
}

.vibe-article h3 a {
  color: inherit;
  text-decoration: none;
}