/*
 * Responsive fixes layered on top of Framer's published CSS.
 * Framer's own styles are never edited; every rule here targets a specific
 * defect and is scoped to the breakpoint where it occurs.
 */

/* Phone breakpoint (< 810px): the footer component's phone variant is fixed at
   390px wide, so it renders as a narrow column on 391–809px screens and
   overflows sideways below 390px. Stretch it edge to edge, which is exactly
   how the design looks at 390px. Page side padding differs per page, so size
   against the viewport; clipping x-overflow absorbs the scrollbar width that
   100vw includes on desktop browsers with classic scrollbars. */
@media (max-width: 809.98px) {
  html {
    overflow-x: clip;
  }
  [class*="-container"]:has(> footer.framer-OH1TR.framer-v-17p6shp) {
    width: 100vw !important;
  }
  footer.framer-OH1TR.framer-v-17p6shp {
    width: 100% !important;
  }

  /* The top header (logo bar) is sized from the 390px design and ends up wider
     than the screen on narrower phones. Never let it exceed the viewport. */
  [class*="-container"]:has(> nav.framer-VerG9.framer-v-1c12xjd),
  [class*="-container"]:has(> .ssr-variant > nav.framer-VerG9.framer-v-1c12xjd) {
    max-width: 100% !important;
  }
}

/* Home page photo collage (tilted polaroids) is a fixed 350px composition that
   needs ~365px; scale it down on phones narrower than the 390px design so the
   photos stay whole instead of spilling off-screen. */
@media (max-width: 389.98px) {
  [data-framer-name="Images wrapper"] {
    zoom: 0.9;
  }

  /* Project cards: the Role value ("Product Designer, Design Systems
     Organiser") is set to never wrap, so on narrow phones it ran off the card
     and widened the whole page. Let it wrap within the remaining space. */
  [data-framer-name="details"] > [data-framer-name="Role"] {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    width: auto !important;
  }
  [data-framer-name="details"] [data-framer-name="Role"] * {
    white-space: normal !important;
    max-width: 100%;
  }
}

@media (max-width: 359.98px) {
  [data-framer-name="Images wrapper"] {
    zoom: 0.8;
  }
}

/* Mobile navigation (markup: src/mobile-nav.html). Framer's phone bars differed
   per page (2 links on most, none on 5 pages, a "Let's connect" with no link),
   so they are replaced by one consistent bar styled to match them. */
.sd-mobile-nav {
  display: none;
}

@media (max-width: 809.98px) {
  /* Framer's own phone bars: a fixed bar holding navlinks (desktop navs are <nav>) */
  :not(nav):has(> [data-framer-name="navlinks"]) {
    display: none !important;
  }

  .sd-mobile-nav {
    --gap: max(8px, 2vw);
    position: fixed;
    z-index: 10;
    bottom: 32px;
    left: var(--gap);
    right: var(--gap);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
    padding: 8px;
    border-radius: 50px;
    background-color: rgba(235, 235, 235, 0.46);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
  }

  .sd-mobile-nav__links {
    display: flex;
    align-items: center;
    min-width: 0;
    overflow-x: auto; /* last resort on very narrow screens; never clips silently */
    scrollbar-width: none;
  }

  .sd-mobile-nav__links::-webkit-scrollbar {
    display: none;
  }

  .sd-mobile-nav a {
    flex: none;
    border-radius: 50px;
    text-decoration: none;
    white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
  }

  /* Sizes scale with the screen: Framer's exact values (18px text, 16px
     padding) from ~530px up, shrinking so all items fit down to 320px. */
  .sd-mobile-nav__links a {
    padding: 8px clamp(8px, 3vw, 16px);
    font: 400 clamp(15px, 4.4vw, 18px)/1.2 "Inter Display", "Inter", system-ui, sans-serif;
    letter-spacing: -0.03em;
    color: #222;
    transition: background-color 0.2s;
  }

  .sd-mobile-nav__links a[aria-current="page"],
  .sd-mobile-nav__links a:active {
    background-color: rgba(0, 0, 0, 0.1);
  }

  .sd-mobile-nav__cta {
    padding: 10px clamp(10px, 3vw, 16px);
    font: 500 clamp(14px, 4.2vw, 17px)/1.2 "Inter", system-ui, sans-serif;
    letter-spacing: -0.03em;
    color: #fff;
    background-color: #0077ff;
  }

  .sd-mobile-nav a:focus-visible {
    outline: 2px solid #0077ff;
    outline-offset: 2px;
  }

}

/* The "Made in Framer" badge is removed: the site is self-hosted, and the
   sticky badge covered content in the bottom-right corner. */
#__framer-badge-container,
.__framer-badge {
  display: none !important;
}

/* ---------- Home: UI Explorations preview ----------
   The full grid now lives on /playground (src/explorations-section.html). On
   the home page it is clipped to about two rows and fades into the page, with
   a button (added by src/site.js) leading to the full set. */
#explorations [data-framer-name="works"] {
  position: relative !important;
  max-height: 760px;
  overflow: hidden !important;
}
#explorations [data-framer-name="works"]::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 320px;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.85) 55%, #fff 92%);
  z-index: 2;
}
.sd-explore-cta {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 48px;
  z-index: 3;
  display: flex;
  justify-content: center;
}
/* Same look as Framer's "See more on Dribbble" pill, which it replaces */
.sd-explore-cta a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 18px;
  border-radius: 50px;
  background: #000;
  color: #fff;
  text-decoration: none;
  font: 500 17px/1 "Inter", sans-serif;
  letter-spacing: -0.03em;
  transition: background-color 0.15s ease, scale 0.16s cubic-bezier(0.23, 1, 0.32, 1);
}
.sd-explore-cta a svg { transition: translate 0.2s cubic-bezier(0.23, 1, 0.32, 1); }
@media (hover: hover) and (pointer: fine) {
  .sd-explore-cta a:hover { background: #222; }
  .sd-explore-cta a:hover svg { translate: 3px 0; }
}
.sd-explore-cta a:active { scale: 0.97; }
/* One CTA only: Framer's Dribbble button under the grid is hidden (the
   Playground page keeps a Dribbble link) */
#explorations [data-framer-name="Images"] > :has(a[href*="dribbble.com"]) {
  display: none !important;
}
@media (max-width: 1199.98px) {
  #explorations [data-framer-name="works"] { max-height: 640px; }
}
@media (max-width: 809.98px) {
  #explorations [data-framer-name="works"] { max-height: 720px; }
  #explorations [data-framer-name="works"]::after { height: 260px; }
  .sd-explore-cta { bottom: 32px; }
}

/* ---------- Press feedback ----------
   Framer's pill buttons only change colour on hover; give them a small press.
   `scale` (not `transform`) composes with Framer's inline transforms. */
#main a[style*="border-radius: 50px"],
#main a[style*="border-radius:50px"],
.sd-mobile-nav a,
.sd-post,
.next a {
  transition: scale 0.16s cubic-bezier(0.23, 1, 0.32, 1);
}
#main a[style*="border-radius: 50px"]:active,
#main a[style*="border-radius:50px"]:active,
.sd-mobile-nav a:active {
  scale: 0.97;
}
.sd-post:active,
.next a:active {
  scale: 0.985;
}

/* ---------- Reveal for added sections (src/site.js) ----------
   Matches Framer's own appear animations, but shorter and subtler. */
.sd-reveal-ready .sd-reveal:not(.is-in) {
  opacity: 0;
  translate: 0 16px;
}
.sd-reveal-ready .sd-reveal {
  transition: opacity 0.6s cubic-bezier(0.23, 1, 0.32, 1), translate 0.6s cubic-bezier(0.23, 1, 0.32, 1);
  transition-delay: calc(var(--i, 0) * 60ms);
}
@media (prefers-reduced-motion: reduce) {
  .sd-reveal-ready .sd-reveal:not(.is-in) { translate: none; }
  .sd-reveal-ready .sd-reveal { transition: opacity 0.3s ease; transition-delay: 0s; }
  #main a, .sd-mobile-nav a, .sd-post, .next a, .sd-explore-cta a { transition: none; scale: none !important; translate: none !important; }
}

/* Playground: Framer's project carousel is replaced by folders
   (src/playground-section.html, inserted by src/site.js) */
.sd-page-playground [data-framer-name="Main"] {
  display: none !important;
}

/* ---------- "Playground" nav highlight (src/site.js) ----------
   A hand-drawn blue circle sketches itself around the link after load and
   redraws on hover. Reduced motion: shown already drawn. */
.sd-circled { position: relative !important; overflow: visible !important; }
/* Drawn inside the link's own box (the links have side padding), so no
   Framer container can clip it */
.sd-scribble {
  position: absolute; left: 0; top: 4%; width: 100%; height: 92%;
  overflow: visible; pointer-events: none; z-index: 1;
}
.sd-scribble path {
  fill: none; stroke: #0077ff; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
  vector-effect: non-scaling-stroke; opacity: .9;
  stroke-dasharray: 1; stroke-dashoffset: 1;
}
.sd-scribble.is-drawn path { animation: sd-sketch .9s cubic-bezier(0.65, 0, 0.35, 1) forwards; }
@keyframes sd-sketch { to { stroke-dashoffset: 0; } }
/* the mobile bar is tight: a smaller loop */
.sd-mobile-nav .sd-scribble { left: 0; top: 0; width: 100%; height: 100%; }
@media (prefers-reduced-motion: reduce) {
  .sd-scribble path, .sd-scribble.is-drawn path { animation: none; stroke-dashoffset: 0; }
}

/* Playground: breathing room between the explorations grid and the footer */
.sd-explore { margin-bottom: clamp(80px, 10vw, 140px) !important; }

/* Home: Framer's "Selected Projects" heading and cards are replaced by the
   indexed layout in src/work-section.html (added inside #projects) */
#projects > :not(.sd-work) {
  display: none !important;
}

/* About: Framer's story block is replaced by src/about-section.html */
.sd-page-about [data-framer-name="Content"],
.sd-page-about [data-framer-name="Container"]:has([data-framer-name="Question"]) {
  display: none !important;
}

/* Hero "4+ years" scribble (src/site.js) */
.sd-years { position: absolute; right: 100%; top: -46%; margin-right: 4px; pointer-events: none; display: flex; flex-direction: column; align-items: flex-end;
  font: 600 34px/1 "Caveat", "Bradley Hand", cursive; letter-spacing: 0; color: #0077ff; rotate: -8deg; }
.sd-years__text { opacity: 0; translate: 0 6px; animation: sd-years-in .5s cubic-bezier(0.23, 1, 0.32, 1) 1.2s forwards; }
.sd-years__arrow { width: 72px; height: 48px; margin-right: -46px; overflow: visible; }
.sd-years__arrow path { stroke: #0077ff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: sd-sketch .7s cubic-bezier(0.65, 0, 0.35, 1) 1.5s forwards; }
.sd-years__arrow path + path { animation-delay: 2.1s; animation-duration: .25s; }
@keyframes sd-years-in { to { opacity: 1; translate: 0 0; } }
@media (max-width: 809.98px) { .sd-years { font-size: 18px; top: -34%; right: auto; left: -10px; margin: 0; } .sd-years__arrow { width: 34px; height: 22px; margin-right: -22px; } }
@media (prefers-reduced-motion: reduce) { .sd-years__text, .sd-years__arrow path { animation: none; opacity: 1; translate: none; stroke-dashoffset: 0; } }

/* Home: "Stats & Facts" now lives on the About page (src/about-section.html) */
#main [data-framer-name="Stats"] { display: none !important; }