@font-face {
  font-family: 'Sprite Graffiti Shadow';
  src: url('../assets/fonts/SpriteGraffiti-Shadow.woff2') format('woff2'),
       url('../assets/fonts/SpriteGraffiti-Shadow.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}
/* ============================================
   SIGNPOST FOOTER (homepage, very bottom)
   A pole with tilted arrow-shaped signs that slide in as links, a ring-patterned
   speech bubble beside it. Palette = brand variables only.
============================================ */
.signpost-footer {
  position: relative;
  margin-top: clamp(40px, 5vw, 72px);
  overflow-x: clip;
  padding: clamp(72px, 10vw, 128px) 20px 28px;
  color: #fff;
  background:
    radial-gradient(ellipse 900px 420px at 15% 0%, rgba(0, 82, 255, 0.4), transparent 70%),
    var(--navy);
}

/* The gap above the footer is white, so the page background does not show through as a pale strip. */
.signpost-footer::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: clamp(40px, 5vw, 72px); background: #fff; }
/* The skills ticker, copied from the landing page, sits on the top edge of the footer and tilts the same way. */
.signpost-footer > .skills-strip {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}
.skills-strip {
  position: relative;
  z-index: 6;
  height: 0;
  overflow-x: clip;
}
.sk-band {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  width: 112vw;
  margin-left: -6vw;
  padding: clamp(14px, 1.8vw, 22px) 0;
  background: var(--blue);
  color: #fff;
  transform: translateY(-30%) rotate(-0.8deg);
  box-shadow: 0 10px 0 var(--indigo);
  overflow: hidden;
}
.sk-track {
  flex: none;
  display: flex;
  align-items: center;
  gap: clamp(18px, 2.4vw, 34px);
  margin: 0;
  padding: 0 clamp(18px, 2.4vw, 34px) 0 0;
  list-style: none;
  white-space: nowrap;
  animation: sk-run 38s linear infinite;
}
.sk-track li {
  font-size: clamp(1.25rem, 2.6vw, 2.2rem);
  font-weight: 800;
  letter-spacing: 0.2px;
  text-transform: uppercase;
}
.sk-star { display: flex; color: var(--periwinkle); }
.sk-star svg { width: clamp(18px, 2vw, 28px); height: clamp(18px, 2vw, 28px); }
@keyframes sk-run { from { transform: translateX(-100%); } to { transform: translateX(0); } }
@media (prefers-reduced-motion: reduce) { .sk-track { animation: none; } }
.signpost-footer > .sp-grid, .signpost-footer > .sp-base { position: relative; z-index: 1; }

.sp-grid {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  align-items: center;
  gap: clamp(48px, 7vw, 96px);
}

/* ---------- the post ---------- */
.sp-post {
  position: relative;
  order: 2;
  width: fit-content;
  margin: 0 auto;
  padding: 66px 0 40px;
}
.sp-post::before { /* the wand: tapers towards the top, with a darker handle at the base */
  content: '';
  position: absolute;
  left: 50%;
  top: 48px;
  bottom: 14px;
  width: 18px;
  transform: translateX(-50%);
  clip-path: polygon(30% 0, 70% 0, 100% 100%, 0 100%);
  background: linear-gradient(to bottom, var(--periwinkle) 0 82%, var(--blue) 82% 100%);
}
.sp-post::after { /* ground shadow */
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 220px;
  height: 22px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.45);
}
.sp-finial { /* the cursor's shape (triangle, circle, line) crowning the wand */
  position: absolute;
  left: 50%;
  top: 0;
  width: 44px;
  height: 48px;
  transform: translateX(-50%);
  color: var(--periwinkle);
  overflow: visible;
}

.sp-signs {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sp-sign {
  --rot: 0deg;
  --x: 0px;
  --from: -60px;
  --delay: 0ms;
  display: block;
  filter: drop-shadow(0 6px 0 rgba(0, 0, 0, 0.35));
  transform: translateX(calc(var(--x) + var(--from))) rotate(calc(var(--rot) * 2.2));
  opacity: 0;
  transition:
    transform 0.8s cubic-bezier(0.19, 1, 0.22, 1) var(--delay),
    opacity 0.5s ease var(--delay);
}
.sp-signs.is-in .sp-sign {
  opacity: 1;
  transform: translateX(var(--x)) rotate(var(--rot));
}
.sp-signs.is-in .sp-sign:hover {
  transform: translateX(var(--x)) rotate(0deg) translateY(-4px) scale(1.04);
  transition-delay: 0ms;
  transition-duration: 0.25s;
}
.sp-sign:focus-visible { outline: 3px solid #fff; outline-offset: 6px; }

.sp-face {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-width: 250px;
  padding: 15px 34px;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3.2vw, 1.9rem);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.sp-sign--left  .sp-face { padding-left: 54px;  clip-path: polygon(16% 0, 100% 0, 100% 100%, 16% 100%, 0 50%); }
/* every sign points the same way (towards the speech bubble) */
.sp-sign--right .sp-face { padding-left: 54px; clip-path: polygon(16% 0, 100% 0, 100% 100%, 16% 100%, 0 50%); }
.sp-face svg { width: 0.8em; height: 0.8em; flex-shrink: 0; }

/* colours: all brand */
.sp-c-pale   { --bg: var(--pale);       --fg: var(--navy); }
.sp-c-blue   { --bg: var(--blue);       --fg: #fff; }
.sp-c-peri   { --bg: var(--periwinkle); --fg: var(--navy); }
.sp-c-indigo { --bg: var(--indigo);     --fg: #fff; }
.sp-c-white  { --bg: #fff;              --fg: var(--navy); }
.sp-face { --cut: var(--bg); background: var(--bg); color: var(--fg); }
.sp-sign:hover .sp-face { --cut: var(--periwinkle); background: var(--periwinkle); color: var(--navy); }
.sp-sign:hover .sp-face.sp-c-peri { --cut: var(--pale); background: var(--pale); }

/* sparkles instead of clouds */
.sp-spark { position: absolute; width: 34px; height: 34px; color: var(--periwinkle); pointer-events: none; }
.sp-spark--a { left: -64px; top: 24%; }
.sp-spark--b { right: -70px; top: 62%; width: 26px; height: 26px; color: var(--blue); }
@media (prefers-reduced-motion: no-preference) {
  .sp-spark { animation: spTwinkle 3.2s ease-in-out infinite; }
  .sp-spark--b { animation-delay: 1.4s; }
}
@keyframes spTwinkle { 0%, 100% { transform: scale(0.8) rotate(0deg); opacity: 0.6; } 50% { transform: scale(1.1) rotate(20deg); opacity: 1; } }

/* ---------- right column: bubble + rotating highlights ---------- */
.sp-right { order: 1; display: flex; flex-direction: column; gap: 48px; }

.sp-rotator {
  position: relative;
  height: 150px;
  padding: 12px;
  border-radius: 24px;
  background: var(--blue);
  color: #fff;
}
.sp-rotator::after { /* tail */
  content: '';
  position: absolute;
  right: 36px;
  bottom: -18px;
  width: 0;
  height: 0;
  border-right: 0 solid transparent;
  border-left: 26px solid transparent;
  border-top: 22px solid var(--blue);
}
.sp-rotator .hero-highlight-slide {
  inset: 12px;
  gap: 18px;
}
.sp-rotator .hero-highlight-slide img {
  border-radius: 14px;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.55); /* thin pale edge; pictures keep their original colours */
}
.sp-rotator .hero-highlight-slide p {
  padding-right: 8px;
  font-weight: 600;
  font-size: clamp(1.05rem, 1.7vw, 1.3rem);
  line-height: 1.25;
  color: #fff;
}

/* ---------- the speech bubble ---------- */
.sp-bubble {
  position: relative;
  padding: clamp(28px, 4vw, 44px);
  border-radius: 24px;
  overflow: visible;
  background: var(--pale);
  color: var(--navy);
}
.sp-bubble > * { position: relative; }
.sp-bubble h2 {
  margin: 0 0 12px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(1.45rem, 2.5vw, 2.05rem);
  line-height: 1.18;
  letter-spacing: -0.3px;
  color: var(--navy);
}
.sp-bubble h2 .sp-hl { color: var(--blue); }
.sp-bubble p {
  margin: 0 0 24px;
  max-width: 460px;
  font-family: var(--font-body);
  font-size: clamp(1rem, 1.6vw, 1.15rem);
  line-height: 1.6;
}
.sp-cta { display: flex; flex-wrap: wrap; gap: 12px; }
.sp-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 26px;
  border-radius: 999px;
  border: 2px solid var(--navy);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1rem;
  transition: transform 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}
.sp-btn--solid { background: var(--navy); color: #fff; box-shadow: 0 5px 0 rgba(12, 0, 84, 0.35); }
.sp-btn--ghost { background: #fff; color: var(--navy); }
.sp-btn--icon { justify-content: center; width: 50px; height: 50px; padding: 0; background: #fff; color: var(--navy); }
.sp-btn--icon svg { width: 22px; height: 22px; }
.sp-btn:hover { transform: translateY(-3px); background: var(--blue); border-color: var(--blue); color: #fff; }

/* ---------- bottom strip ---------- */
.sp-base {
  max-width: 1180px;
  margin: clamp(56px, 8vw, 96px) auto 0;
  padding-top: 20px;
  border-top: 2px solid rgba(191, 212, 255, 0.35);
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  justify-content: space-between;
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.75);
}
.sp-credit, .sp-credit-note { font-weight: 700; }
/* The credit stays on one spread-out row whenever the screen can hold it: the text scales down with the window, and it only breaks onto two lines on very narrow screens. */
.sp-credit {
  white-space: nowrap;
  font-size: clamp(0.62rem, 1.6vw, 0.9rem);
}
@media (max-width: 380px) {
  .sp-credit { white-space: normal; }
}
.sp-credit-note { color: #fff; }
.sp-base a { color: #fff; font-weight: 600; }
.sp-base a:hover { color: var(--periwinkle); }

@media (max-width: 900px) {
  .sp-top { display: none; } /* no back-to-top link on phones/tablets */
  .sp-grid { grid-template-columns: 1fr; gap: 72px; }
  .sp-right { order: 0; }   /* the two cards come first… */
  .sp-post { order: 1; }    /* …then the stand, on its own line */
  .sp-spark--a { left: -30px; }
  .sp-spark--b { right: -30px; }
}
@media (max-width: 420px) {
  .sp-face { min-width: 210px; padding: 13px 26px; gap: 10px; }
  .sp-sign--left  .sp-face { padding-left: 44px; }
  .sp-sign--right .sp-face { padding-left: 44px; }
}

/* Reduced motion: signs are simply there. */
@media (prefers-reduced-motion: reduce) {
  .sp-sign { opacity: 1; transform: translateX(var(--x)) rotate(var(--rot)); transition: none; }
}

@media (max-width: 900px) {
  .sp-bubble { text-align: center; }
  .sp-cta { justify-content: center; }
}

@media (max-width: 900px) {
  .sp-rotator { text-align: center; }
  .sp-rotator .hero-highlight-slide { justify-content: center; align-items: center; }
  .sp-rotator .hero-highlight-slide p { text-align: center; padding-right: 0; }
}

@media (max-width: 900px) {
  .sp-bubble p { margin-left: auto; margin-right: auto; }
  /* highlight card: a smaller picture on the left, the line centred in the space beside it */
  .sp-rotator { height: 140px; }
  .sp-rotator .hero-highlight-slide { flex-direction: row; gap: 14px; }
  .sp-rotator .hero-highlight-slide img { height: 100px; width: 100px; }
  .sp-rotator .hero-highlight-slide p { flex: 1; font-size: 1rem; }
}


/* ---------- Phones: no pole, just two stacks of signs side by side ----------
   Work / Events / Storytelling on the left, Side-Quests / LinkedIn / X (and Instagram on Side Quests) on the right. */
@media (max-width: 640px) {
  .sp-post { width: 100%; padding: 0; }
  .sp-post::before, .sp-post::after, .sp-finial, .sp-spark { display: none; }
  .sp-signs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 12px;
    row-gap: 10px;
    align-items: start;
  }
  .sp-signs li { min-width: 0; }
  .sp-signs li:nth-child(1) { grid-column: 1; grid-row: 1; }
  .sp-signs li:nth-child(2) { grid-column: 1; grid-row: 2; }
  .sp-signs li:nth-child(3) { grid-column: 1; grid-row: 3; }
  .sp-signs li:nth-child(4) { grid-column: 2; grid-row: 1; }
  .sp-signs li:nth-child(5) { grid-column: 2; grid-row: 2; }
  .sp-signs li:nth-child(6) { grid-column: 2; grid-row: 3; }
  .sp-signs li:nth-child(7) { grid-column: 2; grid-row: 4; }
  .sp-sign { --x: 0px !important; --rot: 0deg !important; filter: drop-shadow(0 4px 0 rgba(0, 0, 0, 0.35)); }
  .sp-face { min-width: 0; width: 100%; min-height: 66px; box-sizing: border-box; gap: 7px; padding: 14px 10px 14px 24px; font-size: 1rem; }
  .sp-sign--left .sp-face, .sp-sign--right .sp-face { padding-left: 24px; padding-right: 10px; }
  .sp-face svg { width: 1em; height: 1em; }
  .sp-i { font-size: 0.85em; }
  /* Rounded tags instead of pointed arrows: each has a punched hole, and little chain links join the ones in a stack */
  .sp-sign--left .sp-face, .sp-sign--right .sp-face { clip-path: none; border-radius: 18px; position: relative; padding-left: 28px; }
  .sp-face::before {
    content: '';
    position: absolute;
    left: 11px; top: 50%;
    width: 9px; height: 9px;
    margin-top: -4.5px;
    border-radius: 50%;
    background: var(--bg);
    box-shadow: inset 0 0 0 2px var(--fg);
    opacity: 0.55;
  }
  .sp-signs { row-gap: 14px; }
  /* like the cards above: a rounded card with a little speech-bubble tail */
  .sp-sign--left .sp-face, .sp-sign--right .sp-face { border-radius: 24px; }
  .sp-face::after {
    content: '';
    position: absolute;
    left: 22px; bottom: -8px;
    width: 0; height: 0;
    border-left: 0 solid transparent;
    border-right: 14px solid transparent;
    border-top: 9px solid var(--bg);
  }
  /* the right-hand stack points its tails to the right */
  .sp-signs li:nth-child(n+4) .sp-face::after { left: auto; right: 22px; border-right: 0 solid transparent; border-left: 14px solid transparent; }
  .sp-sign:hover .sp-face::after { border-top-color: var(--periwinkle); }
  .sp-sign:hover .sp-face.sp-c-peri::after { border-top-color: var(--pale); }
  .sp-sign { filter: drop-shadow(0 3px 0 rgba(0, 0, 0, 0.3)); }
  /* LinkedIn and X wear their own logo colours */
  .sp-signs li:nth-child(5) .sp-face { --bg: #0a66c2; --fg: #fff; }
  .sp-signs li:nth-child(6) .sp-face { --bg: #000; --fg: #fff; }
  /* Side-Quests wears the yellow of the Side Quests page */
  .sp-sign[href="side-quests.html"] .sp-face { --bg: #ffd23f; --fg: var(--navy); }
}

/* The LinkedIn and X buttons in the footer card use their logos' own colours */
.sp-btn--icon[aria-label="LinkedIn"] { background: #0a66c2; border-color: #0a66c2; color: #fff; }
.sp-btn--icon[aria-label="X"] { background: #000; border-color: #000; color: #fff; }
.sp-btn--icon[aria-label="LinkedIn"]:hover { background: #0a66c2; border-color: #0a66c2; color: #fff; }
.sp-btn--icon[aria-label="X"]:hover { background: #000; border-color: #000; color: #fff; }

/* the graffiti "I" from the wordmark (the first letter of IFEOLUWA), set inside a circle, marks the Side-Quests sign */
.sp-i {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.4em; height: 1.4em;
  border: 2px solid currentColor;
  border-radius: 50%;
  font-family: 'Sprite Graffiti Shadow', var(--font-display);   /* the outlined version of the graffiti font (letters with holes in) */
  font-size: 0.7em;
  line-height: 1;
  text-transform: none;
  padding-top: 0.04em;
}

/* ---------- Larger screens: the stand keeps its pole, but the signs are the same rounded tags as on phones ---------- */
@media (min-width: 641px) {
  .sp-sign--left .sp-face, .sp-sign--right .sp-face {
    clip-path: none;
    border-radius: 24px;
    position: relative;
    padding: 18px 34px 18px 44px;
  }
  .sp-face::before {   /* the punched hole */
    content: '';
    position: absolute;
    left: 16px; top: 50%;
    width: 10px; height: 10px;
    margin-top: -5px;
    border-radius: 50%;
    background: var(--bg);
    box-shadow: inset 0 0 0 2px var(--fg);
    opacity: 0.55;
  }
  .sp-face::after {    /* the little speech-bubble tail */
    content: '';
    position: absolute;
    left: 26px; bottom: -10px;
    width: 0; height: 0;
    border-left: 0 solid transparent;
    border-right: 16px solid transparent;
    border-top: 11px solid var(--bg);
  }
  .sp-signs li:nth-child(n+4) .sp-face::after { left: auto; right: 26px; border-right: 0 solid transparent; border-left: 16px solid transparent; }
  .sp-sign:hover .sp-face::after { border-top-color: var(--periwinkle); }
  .sp-sign:hover .sp-face.sp-c-peri::after { border-top-color: var(--pale); }
  .sp-sign { filter: drop-shadow(0 4px 0 rgba(0, 0, 0, 0.3)); }
  .sp-signs { gap: 20px; }
  /* Side-Quests in its yellow; LinkedIn and X in their logo colours */
  .sp-sign[href="side-quests.html"] .sp-face { --bg: #ffd23f; --fg: var(--navy); }
  .sp-signs li:nth-child(5) .sp-face { --bg: #0a66c2; --fg: #fff; }
  .sp-signs li:nth-child(6) .sp-face { --bg: #000; --fg: #fff; }
  .sp-i { font-size: 0.78em; }
}

/* ---------- Phones: the whole footer is one screen, no scrolling inside it ---------- */
@media (max-width: 640px) {
  .signpost-footer {
    padding: 68px 20px 18px;   /* clears the fixed nav bar; the footer is only as tall as its content */
    box-sizing: border-box;
  }
  .signpost-footer .sp-grid { gap: 26px; width: 100%; }
  .sp-right { gap: 26px; }
  /* the speech card */
  .sp-bubble { padding: 18px 18px 20px; border-radius: 22px; }
  .sp-bubble h2 { font-size: 1.12rem; line-height: 1.22; margin: 0 0 8px; }
  .sp-bubble p { font-size: 0.86rem; line-height: 1.4; margin: 0 auto 12px; }
  .sp-cta { gap: 8px; }
  .sp-btn { padding: 9px 20px; font-size: 0.9rem; }
  .sp-btn--icon { width: 40px; height: 40px; padding: 0; }
  .sp-btn--icon svg { width: 18px; height: 18px; }
  /* the blue rotating card */
  .sp-rotator { height: 84px; padding: 9px; border-radius: 22px; }
  .sp-rotator .hero-highlight-slide { inset: 9px; gap: 12px; }
  .sp-rotator .hero-highlight-slide img { height: 64px; width: 64px; border-radius: 12px; }
  .sp-rotator .hero-highlight-slide p { font-size: 0.63rem; line-height: 1.25; }
  /* the sign tags */
  .sp-signs { row-gap: 18px; column-gap: 10px; }
  .sp-face { min-height: 46px; padding: 8px 8px 8px 22px; font-size: 0.88rem; gap: 6px; border-radius: 18px; }
  .sp-sign--left .sp-face, .sp-sign--right .sp-face { border-radius: 18px; padding-left: 22px; }
  .sp-face::before { left: 9px; width: 7px; height: 7px; margin-top: -3.5px; }
  .sp-face::after { bottom: -6px; left: 16px; border-right-width: 11px; border-top-width: 7px; }
  .sp-signs li:nth-child(n+4) .sp-face::after { right: 16px; border-left-width: 11px; border-right-width: 0; }
  .sp-face svg { width: 0.95em; height: 0.95em; }
  .sp-i { font-size: 0.8em; }
  /* the credit */
  .sp-base { margin-top: 16px; padding-top: 12px; font-size: 0.74rem; gap: 4px 12px; }
}

/* Instagram sign (Side Quests page): Instagram's own pink */
.sp-sign[href*="instagram.com"] .sp-face { --bg: #e1306c; --fg: #fff; }
.sp-sign::after { content: none !important; }   /* no little external-link arrow beside the Instagram tag */

/* No punched-hole circles on any sign, on any device; the labels sit centred in the tags */
.sp-face::before { content: none !important; display: none !important; }
@media (max-width: 640px) {
  .sp-face, .sp-sign--left .sp-face, .sp-sign--right .sp-face { padding-left: 10px; padding-right: 10px; }
}
@media (min-width: 641px) {
  .sp-sign--left .sp-face, .sp-sign--right .sp-face { padding: 18px 34px; }
}

/* every sign, Instagram (an external link) included, is a full block that fills its column */
.sp-signs li > a.sp-sign { display: block; width: 100%; }
@media (min-width: 641px) { .sp-signs li > a.sp-sign { width: auto; } }

/* "Email me": its label is centred in the button, and the button has no shadow under it */
.sp-btn { justify-content: center; }
.sp-btn--solid { box-shadow: none; }

/* ---------- phones and tablets: the floating music + "In this file" buttons never cover the copyright line ---------- */
@media (max-width: 1279px) {
  .signpost-footer,
  body[data-page] .signpost-footer { padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
}
/* tablets and small laptops: the music button is 56px tall from the edge, so 64px keeps the copyright line clear of it without a big empty band */
@media (min-width: 641px) and (max-width: 1279px) {
  .signpost-footer,
  body[data-page] .signpost-footer { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }
}