/* Julie Tremblay portfolio
   One spacing scale, one type scale, one container. Every gap on the site comes from these tokens. */

:root {
  --blue: #004ece;
  --blue-deep: #0a3fae;
  --pink: #fff1f1;
  --white: #ffffff;
  --rule: rgba(0, 78, 206, 0.35);

  --serif: "IBM Plex Serif", Georgia, serif;
  --sans: "IBM Plex Sans", system-ui, -apple-system, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;

  /* spacing scale (4px base) */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;
  --s-10: 128px;

  /* fluid type, measured from the Squarespace site:
     size = 1rem + step × u, where u grows with the viewport (1.2vw, capped at 2000px wide)
     and holds at 9.75px on phones so headings stay big on small screens. */
  --u: max(min(1.2vw, 24px), min(2.6vw, 9.75px));
  --t-display: calc(1rem + 4 * var(--u));     /* hero h1: 85px @1440, 99px @1728 */
  --t-h1: calc(1rem + 2.5 * var(--u));        /* page titles: 59px @1440 */
  --t-h2: calc(1rem + 1.2 * var(--u));        /* section titles: 37px @1440 */
  --t-h3: calc(1rem + 0.6 * var(--u));        /* card + sub heads: 26px @1440 */
  --t-lead: calc(1rem + 0.2 * var(--u));      /* intro paragraphs: 19.5px @1440 */
  --t-title: calc(1rem + 0.6 * var(--u));     /* site name */
  --t-body: 1rem;
  --t-small: calc(1rem - 0.1 * var(--u));
  --t-mono: 0.82rem;

  --gutter: 8vw;
  --max: 2000px;
  --section-y: clamp(var(--s-8), 6vw, 144px);
  --header-h: calc(4vw + 32px);
}

*, *::before, *::after { box-sizing: border-box; }
html { color-scheme: light; scroll-padding-top: calc(var(--header-h) + var(--s-4)); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--white);
  color: var(--blue);
  font-family: var(--sans);
  font-size: var(--t-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
p { margin: 0; }
p + p { margin-top: var(--s-4); }
h1, h2, h3, h4 { margin: 0; }
h1, h2, h3, h4, .display, .h1, .h2, .h3 { font-family: var(--serif); font-weight: 500; letter-spacing: -0.02em; }

.skip { position: absolute; left: -9999px; top: 0; }
.skip:focus { left: var(--s-4); top: var(--s-4); z-index: 100; background: var(--pink); padding: var(--s-2) var(--s-4); }

/* ---------- type ---------- */
.display { font-size: var(--t-display); line-height: 1.01; }
.h1 { font-size: var(--t-h1); line-height: 1.08; }
.h2 { font-size: var(--t-h2); line-height: 1.14; }
.h3 { font-size: var(--t-h3); line-height: 1.17; }
.lead { font-size: var(--t-lead); line-height: 1.5; }
.small { font-size: var(--t-small); line-height: 1.5; }
.eyebrow {
  font-family: var(--mono);
  font-size: var(--t-mono);
  line-height: 1.5;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  margin: 0;
}
strong { font-weight: 700; }

/* ---------- layout ---------- */
.wrap { width: min(var(--max), 100% - 2 * var(--gutter)); margin-inline: auto; }
.section { padding-block: var(--section-y); }
.section--pink { background: var(--pink); }
.stack > * + * { margin-top: var(--s-5); }

/* ---------- header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  height: var(--header-h);
  display: flex; align-items: center;
  background: var(--white);
  transition: background-color .25s ease, color .25s ease;
}
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); }
.site-title { font-family: var(--serif); font-weight: 500; font-size: var(--t-title); letter-spacing: -0.02em; text-decoration: none; white-space: nowrap; }
.site-nav { display: flex; gap: clamp(var(--s-4), 2vw, var(--s-6)); }
.site-nav a { text-decoration: none; }
.site-nav a:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.site-title { transition: color .2s ease; }
.site-title:hover, .site-title:focus-visible { color: #0040a9; }                 /* on the white header */
.site-header.is-scrolled .site-title:hover, .site-header.is-scrolled .site-title:focus-visible,
.page-home .site-header .site-title:hover, .page-home .site-header .site-title:focus-visible { color: #ffcbcb; }  /* on the blue header */
.site-header.is-scrolled, .page-home .site-header { background: var(--blue); color: var(--pink); }
.page-home .site-header:not(.is-scrolled) { background: transparent; }
.page-home .site-header { position: fixed; left: 0; right: 0; }

/* ---------- hero (home) ---------- */
.hero {
  position: relative;
  background: var(--blue);
  color: var(--pink);
  padding-top: calc(var(--header-h) + 4.5vw + 6px);
  padding-bottom: 13vw;
  overflow: hidden;
}
.hero__blobs { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.hero__blobs path { fill: #0043b0; transform-box: fill-box; transform-origin: center; animation: blob-wander 36s ease-in-out infinite; }
/* each blob wanders through its own three waypoints and back, set per blob in the markup */
@keyframes blob-wander {
  0%, 100% { transform: translate(0, 0) rotate(0deg) scale(1); }
  25% { transform: translate(var(--x1), var(--y1)) rotate(var(--r1)) scale(var(--s1)); }
  50% { transform: translate(var(--x2), var(--y2)) rotate(var(--r2)) scale(var(--s2)); }
  75% { transform: translate(var(--x3), var(--y3)) rotate(var(--r3)) scale(var(--s3)); }
}
@media (prefers-reduced-motion: reduce) { .hero__blobs path { animation: none; } }
.hero .wrap { position: relative; }
.hero .eyebrow { max-width: 50%; }
.hero .display { max-width: 83%; margin-top: 2.4vw; }
.hero .lead { max-width: 54%; margin-top: 2vw; }
/* the wave: one full sine period across the width, 6vw tall, dipping on the left and rolling up on the right */
.hero__wave { position: absolute; left: 0; right: 0; bottom: -1px; width: 100%; height: calc(6vw + 1px); display: block; }
.hero__wave path { fill: var(--white); }

/* ---------- wavy dividers (same curve as the hero, mirrored) ---------- */
.section--wave { position: relative; padding-top: calc(6vw + 40px); }
.wave-top { position: absolute; top: 0; left: 0; width: 100%; height: 6vw; display: block; }
.wave-top--white path { fill: var(--white); }
.wave-top--pink path { fill: var(--pink); }

/* ---------- work cards ---------- */
.work-head { margin-bottom: var(--s-6); }
.card-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-8) 40px; }
.card { position: relative; display: flex; flex-direction: column; }
.card__media { aspect-ratio: 4 / 3; overflow: hidden; border-radius: 6px; background: var(--pink); margin-bottom: var(--s-5); }
.section--pink .card__media { background: var(--white); }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.card:hover .card__media img { transform: scale(1.02); }
.card .eyebrow { margin-bottom: var(--s-3); }
.card__title a { text-decoration: none; }
.card__title a::after { content: ""; position: absolute; inset: 0; }
.card:hover .card__title a, .card__title a:focus-visible { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.card .lead { margin-top: var(--s-3); }
.tags { display: flex; flex-wrap: wrap; gap: var(--s-2); margin: var(--s-5) 0 0; padding: 0; list-style: none; }
.tags li { background: var(--pink); border-radius: 4px; padding: 0 var(--s-3); font-size: var(--t-small); line-height: 1.85; }
.section--pink .tags li { background: var(--white); }

/* ---------- about ---------- */
.about { display: grid; grid-template-columns: 16.7% 33.3% 4.1% 29.2% 1fr; align-items: start; }
/* About spacing measured from the Squarespace page at 1728px wide */
#work { padding-bottom: 4.3vw; }
#about { padding-top: calc(6vw + 11.1vw); }
.about__text { padding-top: 3vw; }
.about__text p + p { margin-top: var(--s-5); }
.about__text .h1 { margin-bottom: 3vw !important; }
.about__text { grid-column: 2; }
.about__photo { grid-column: 4; }
.about__text .h1 { margin-bottom: var(--s-6); }
.about__photo { width: 100%; }
.about__photo img { width: 100%; height: auto; } /* the slanted shape is cut into the image itself */

.experience {
  margin: 7.8vw 4.2% 0;
  border: 6px solid var(--blue);
  border-radius: 21px;
  padding: var(--s-7) 0;
}
.job { display: grid; grid-template-columns: minmax(0, 35fr) minmax(0, 60fr); gap: var(--s-5) 5%; padding: var(--s-7) 4.5%; border-top: 1px solid var(--blue); }
.job:first-child { border-top: 0; padding-top: 0; }
.job:last-child { padding-bottom: 0; }
.job__org .small { margin-bottom: var(--s-2); }
.job__org .h3 { margin-bottom: var(--s-3); }
.job__role + .job__role { margin-top: 0; }
.job__roles { margin-bottom: var(--s-4); }
.job__sub { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; gap: inherit; margin-top: var(--s-5); }

/* ---------- contact ---------- */
.contact .h1 { margin-bottom: var(--s-7); }
.contact__row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-4); padding-block: var(--s-5); border-bottom: 1px solid rgba(0, 78, 206, 0.3); }
.contact__row:first-of-type { padding-top: 0; }
.contact__row a { text-underline-offset: 4px; text-decoration-thickness: 1px; overflow-wrap: anywhere; }

/* ---------- case study ---------- */
.cs-head { padding-top: calc(3.6vw); padding-bottom: var(--s-4); }
.cs-logo { height: auto; min-width: 96px; margin-bottom: var(--s-5); }
.cs-head .h1 { max-width: 100%; text-wrap: balance; }
.cs-head .eyebrow { margin-top: var(--s-4); }
.meta { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-5) var(--s-6); margin: var(--s-7) 0 0; padding-block: var(--s-4); border-block: 1px solid var(--blue); }
.meta div { margin: 0; }
.meta dt { font-family: var(--mono); font-size: var(--t-mono); text-transform: uppercase; letter-spacing: -.02em; }
.meta dd { margin: var(--s-1) 0 0; }

.cs-section { display: grid; grid-template-columns: 18.2% 7.7% minmax(0, 1fr); padding-block: var(--s-7); }  /* 48px top + bottom = 96px between sections */
.cs-section > .eyebrow { grid-column: 1; padding-top: 0.6em; }
.cs-body { grid-column: 3; max-width: 77%; }
.cs-body > .h3 { margin-bottom: var(--s-5); }
.cs-body .fig { max-width: 100%; }
.cs-body--cont { margin-top: var(--s-8); }
.cs-body > .h3:not(:first-child) { margin-top: var(--s-8); }
.cs-body p + .h3 { margin-top: var(--s-8); }

.steps { list-style: none; margin: 0; padding: 0; }
.steps li { display: grid; grid-template-columns: 52px minmax(0, 1fr); }
.steps li + li { margin-top: var(--s-6); }
.steps .eyebrow { padding-top: 1px; }
.steps strong { display: block; margin-bottom: var(--s-1); }

.mandate { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5); margin-top: var(--s-6); }
.mandate > div { background: var(--pink); border-radius: 12px; padding: var(--s-6); }
.mandate .h3 { margin-bottom: var(--s-2); }
.mandate .eyebrow { margin-bottom: var(--s-3); }

blockquote.hmw { margin: var(--s-7) 0 0; padding-left: var(--s-5); border-left: 4px solid var(--blue); }

/* figures: three widths, all on the same grid */
.fig { margin: var(--s-8) 0 0; }
.fig img, .fig video { width: 100%; }
.fig figcaption { margin-top: var(--s-3); font-size: var(--t-small); line-height: 1.5; font-style: italic; max-width: min(100%, 120ch); }
.fig--full { grid-column: 1 / -1; }
.fig--wide { grid-column: 3; }
.cs-section > .fig { grid-row: auto; }
.fig-pair { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; margin-top: var(--s-8); }
.fig-pair .fig { margin: 0; }
.fig-pair .fig img { aspect-ratio: 585 / 516; object-fit: cover; }
.fig .placeholder { aspect-ratio: 16 / 9; background: var(--pink); display: grid; place-items: center; font-family: var(--mono); font-size: var(--t-mono); text-transform: uppercase; padding: var(--s-5); text-align: center; }

.more .h2 { margin-bottom: var(--s-7); }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .about { grid-template-columns: 1fr; gap: var(--s-7); }
  .about__text, .about__photo { grid-column: 1; }
  #about { padding-top: calc(6vw + var(--s-7)); }
  .about__text { padding-top: 0; }
  .about__text .h1 { margin-bottom: var(--s-6) !important; }
  .about__photo { justify-self: start; max-width: 300px; }
  .experience { margin-inline: 0; }
  .hero .display, .hero .lead, .hero .eyebrow { max-width: 100%; }
  .cs-head .h1 { max-width: 100%; }
  .job { grid-template-columns: 1fr; gap: var(--s-4); }
  .job__sub { grid-template-columns: 1fr; }
  .meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cs-section { grid-template-columns: 1fr; padding-block: 36px; }
  .cs-section > .eyebrow { grid-column: 1; padding-top: 0; margin-bottom: var(--s-4); }
  .cs-body, .fig--wide { grid-column: 1; max-width: 100%; }
}
@media (max-width: 767px) {
  :root { --header-h: 64px; --gutter: 6vw; }
  .hero { padding-top: calc(var(--header-h) + var(--s-8)); padding-bottom: calc(var(--s-8) + 6vw); }
  .hero .display { margin-top: var(--s-6); }
  .hero .lead { margin-top: var(--s-5); }
  .card-grid { grid-template-columns: 1fr; gap: var(--s-8); }
  .fig-pair, .mandate { grid-template-columns: 1fr; }
  .experience { border-width: 4px; border-radius: 16px; margin-top: var(--s-8); }
  .contact__row { flex-direction: column; gap: var(--s-1); }
  .site-nav { gap: var(--s-4); }
  .experience { padding: var(--s-5) 0; }
  .job { padding-inline: var(--s-5); }
}
@media (max-width: 380px) {
  .site-nav { gap: var(--s-3); font-size: var(--t-small); }
  .site-title { font-size: 1.125rem; }
}
@media (prefers-reduced-motion: reduce) { .site-title { transition: none; } .card__media img { transition: none; } }