/* ============================================================
   SPRING SHAKE — case study page styles
   Prefix: ss-   Loaded only by spring-shake.html, after style.css
   ============================================================ */
:root {
  --ss-cream:  #FBF6EC;  /* page background                      */
  --ss-yellow: #EDD98C;  /* pineapple-mango-passionfruit flavour */
  --ss-orange: #F2A22C;  /* banana-pineapple-coconut-berries     */
  --ss-coral:  #F08D84;  /* banana-date-orange flavour           */
  --ss-ink:    #4A2320;  /* headings + body                      */
  --ss-muted:  #8C7A72;  /* labels, secondary text               */
  --ss-rule:   #E6DCCB;  /* hairlines                            */
}

/* ── SCROLL ANIMATIONS (driven by revealObserver in js/main.js) ── */
.ss-anim-up    { opacity: 0; transform: translateY(40px);  transition: opacity .8s cubic-bezier(.22,1,.36,1), transform .8s cubic-bezier(.22,1,.36,1); }
.ss-anim-left  { opacity: 0; transform: translateX(-50px); transition: opacity .8s cubic-bezier(.22,1,.36,1), transform .8s cubic-bezier(.22,1,.36,1); }
.ss-anim-right { opacity: 0; transform: translateX(50px);  transition: opacity .8s cubic-bezier(.22,1,.36,1), transform .8s cubic-bezier(.22,1,.36,1); }

.ss-anim-up.in,
.ss-anim-left.in,
.ss-anim-right.in { opacity: 1; transform: none; }

/* ── HERO ───────────────────────────────────────────────────── */
.ss-hero {
  width: 100%;
  line-height: 0;
  background: var(--ss-yellow);
}

.ss-hero img {
  width: 100%;
  height: auto;
  display: block;
}

/* ── PROJECT OVERVIEW ───────────────────────────────────────── */
.ss-info {
  background: var(--ss-cream);
  padding: 90px 48px;
  border-bottom: 1px solid var(--ss-rule);
}

.ss-info-grid {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 80px;
  max-width: 1120px;
  margin: 0 auto;
  align-items: start;
}

.ss-kicker {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ss-orange);
  margin-bottom: 14px;
}

.ss-title {
  font-size: clamp(30px, 3.6vw, 46px);
  font-weight: 700;
  line-height: 1.25;
  color: var(--ss-ink);
  margin-bottom: 26px;
}

.ss-desc {
  font-size: 17px;
  line-height: 1.85;
  color: var(--ss-ink);
  max-width: 62ch;
}

.ss-desc + .ss-desc {
  margin-top: 16px;
}

.ss-meta-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ss-muted);
  margin-bottom: 14px;
}

.ss-meta-rows {
  border-top: 1px solid var(--ss-rule);
}

.ss-meta-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--ss-rule);
}

.ss-meta-key {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ss-muted);
  white-space: nowrap;
}

.ss-meta-val {
  font-size: 15px;
  color: var(--ss-ink);
  text-align: left;
}

a.ss-meta-val {
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: opacity .2s;
}

a.ss-meta-val:hover { opacity: .6; }

/* ── IMAGE SECTIONS — 2 or 3 per row ────────────────────────── */
.ss-section {
  padding: 80px 48px;
  background: var(--ss-cream);
}

.ss-section--tint { background: #F6EFE1; }

.ss-section-head {
  max-width: 1120px;
  margin: 0 auto 34px;
}

.ss-section-title {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ss-muted);
}

.ss-grid {
  display: grid;
  gap: 24px;
  max-width: 1120px;
  margin: 0 auto;
}

.ss-grid--2 { grid-template-columns: repeat(2, 1fr); }
.ss-grid--3 { grid-template-columns: repeat(3, 1fr); }

.ss-grid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 6px;
}

/* photos of the street activation are portrait — keep them uncropped */
.ss-grid--photos img {
  object-fit: contain;
  height: auto;
  background: var(--ss-cream);
}

/* A single image in the 1120px grid gets stretched past its own pixel
   width and goes soft — spring_shake1-08 is only 1082px wide. Cap these
   below native size so the browser downscales instead of upscaling. */
.ss-grid--narrow {
  max-width: 640px;
}

.ss-grid--narrow img {
  object-fit: contain;
  height: auto;
}

/* ── FULL-BLEED SINGLE ──────────────────────────────────────── */
.ss-full {
  width: 100%;
  line-height: 0;
}

.ss-full img {
  width: 100%;
  height: auto;
  display: block;
}

/* ── RESPONSIVE ─────────────────────────────────────────────── */
@media (max-width: 900px) {
  .ss-info       { padding: 60px 24px; }
  .ss-info-grid  { grid-template-columns: 1fr; gap: 44px; }
  .ss-section    { padding: 56px 24px; }
  .ss-grid--3    { grid-template-columns: repeat(2, 1fr); }
  .ss-grid       { gap: 16px; }
}

@media (max-width: 600px) {
  .ss-grid--2,
  .ss-grid--3 { grid-template-columns: 1fr; }
}


/* The nav is fixed, so on a phone it sits on top of the opening image.
   Reserve its height here — clears the fixed nav. */
@media (max-width: 900px) {
  .ss-hero {
    padding-top: 70px;
  }
}