/* ExpeditionHubert — editorial portfolio
   Palette: white / blush pink / near-black, Poppins throughout */

:root {
  --blush: #f9e0d6;
  --blush-deep: #f4cdbc;
  --brand-panel: #e9b7a2;
  --ink: #151515;
  --muted: #4f4f4f;
  --maxw: 1140px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: 'Poppins', system-ui, sans-serif;
  color: var(--ink);
  background: #fff;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img { display: block; width: 100%; height: 100%; object-fit: cover; }
a { color: inherit; text-decoration: none; }

.container { max-width: var(--maxw); margin: 0 auto; padding: 0 32px; }

::selection { background: var(--blush-deep); color: var(--ink); }

/* ---------- slim nav (subpages) ---------- */
.site-nav {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 0 20px;
}
.site-nav .wordmark {
  font-weight: 800; font-size: 17px; letter-spacing: -0.01em; text-transform: uppercase;
  display: inline-flex; align-items: center;
}
.site-nav .wordmark img {
  height: clamp(42px, 4.6vw, 56px); width: auto; object-fit: contain;
}
.site-nav ul { display: flex; gap: 22px; list-style: none; }
.site-nav ul a {
  display: inline-flex; align-items: baseline; gap: .42em;
  font-size: 12.5px; font-weight: 400; color: var(--muted); transition: color .2s;
  white-space: nowrap;
}
.site-nav ul a:hover, .site-nav ul a.active { color: var(--ink); }

/* ---------- homepage: positioned canvas matching the hi-fi ---------- */
/* full-bleed: the canvas spans the whole viewport so edge cards touch the
   browser edges, exactly like the mockup */
.hp {
  width: 100%; margin: 0; padding: 0 0 10px;
  container-type: inline-size;
}
/* header + footer text keep a small inset from the very edge */
.hp-head, .hp-foot { padding-left: 2.7cqw; padding-right: 2.7cqw; }

/* header: menu left, signature centred, tagline right — all three
   vertically centred on each other for a quiet, even band */
.hp-head {
  position: relative; margin-top: 1.7cqw;
  display: flex; align-items: center;
  min-height: clamp(92px, 8.6cqw, 132px);
}
.hp-menu {
  display: flex; flex-direction: row; align-items: baseline;
  margin-left: 1.7%; gap: 1.05em;
}
.hp-menu a {
  display: inline-flex; align-items: baseline; gap: .42em;
  font-size: clamp(11px, 1.07cqw, 16.5px); line-height: 1.4;
  font-weight: 400; color: var(--ink); white-space: nowrap;
}
.hp-menu a .d { flex: none; }
.hp-menu a:hover { opacity: .55; }
.hp-logo {
  position: absolute; left: 42.27%; top: 50%; transform: translateY(-50%);
  width: clamp(120px, 11.5cqw, 178px); margin: 0; line-height: 0;
}
.hp-logo img { width: 100%; height: auto; object-fit: contain; }
.hp-tagline {
  position: absolute; left: 67.34%; top: 50%; transform: translateY(-50%);
  width: 26.5%;
  font-size: clamp(11px, 0.95cqw, 14.5px); line-height: 1.5; font-weight: 400;
}

/* each section is a proportional canvas; children placed by percentage.
   headings sit above their image, captions beside them, and a rotated
   location label runs down the far-left margin. */
.hp2-sec { position: relative; aspect-ratio: var(--ar); margin-top: 3.5%; }
.hp2-sec:first-of-type { margin-top: 5.5%; }

.hp2-label {
  position: absolute; left: 0.55%; top: 50%;
  transform: translateY(-50%) rotate(180deg); writing-mode: vertical-rl;
  font-size: 1.6cqw; font-weight: 400;
  letter-spacing: .01em; color: var(--ink); white-space: nowrap;
}

/* heading + its captions live in one flex row, bottom-baseline aligned:
   the caption's last line and the "PG" line sit on the heading's last
   baseline, with consistent spacing — same treatment for every project. */
.hp2-headrow {
  position: absolute; left: var(--l); top: var(--t);
  display: flex; align-items: last baseline; white-space: nowrap;
}
.hp2-headrow h2 {
  font-size: 1.62cqw; font-weight: 500; line-height: 1.06;
  letter-spacing: -0.01em; text-transform: uppercase;
}
.hp2-cap {
  font-size: 0.63cqw; line-height: 1.42;
  font-weight: 500; text-transform: uppercase; letter-spacing: .012em;
  color: var(--ink); white-space: nowrap;
  margin-left: 3.3cqw;
}
.hp2-cap.pg { margin-left: 1.5cqw; color: var(--muted); font-weight: 400; }

.hp2-img {
  position: absolute; left: var(--l); top: var(--t); width: var(--w);
  aspect-ratio: var(--r); overflow: hidden; display: block; background: #111;
}
.hp2-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s ease; }
a.hp2-img:hover img { transform: scale(1.03); }

.hp-foot { text-align: center; padding: 6.3% 0 5%; }
.hp-foot .footer-kicker { font-size: clamp(14px, 1.5cqw, 24px); font-weight: 400; }
.hp-foot .footer-email {
  display: inline-block; margin-top: .5em;
  font-size: clamp(19px, 2.3cqw, 36px); font-weight: 400;
}
.hp-foot .footer-email:hover { opacity: .6; }

/* ---------- footer ---------- */
.site-footer { text-align: center; padding: 64px 0 72px; }
.site-footer .footer-kicker { font-size: 13px; font-weight: 400; }
.site-footer .footer-email { display: inline-block; margin-top: 4px; font-size: 17px; font-weight: 500; }
.site-footer .footer-email:hover { opacity: .6; }
.site-footer.on-blush { background: var(--blush); }

/* ---------- social icons ---------- */
.social { display: flex; justify-content: center; gap: 22px; margin-top: 22px; }
.social a { display: inline-flex; color: var(--ink); opacity: .78; transition: opacity .2s; }
.social a:hover { opacity: 1; }
.social svg { width: 20px; height: 20px; display: block; }

/* ---------- case study ---------- */
.case-header { padding: 26px 0 34px; }
.case-header .top {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 24px;
}
.case-header h1 {
  font-size: clamp(30px, 4vw, 44px); font-weight: 500; line-height: 1.15;
  letter-spacing: -0.01em; max-width: 10ch;
}
.case-header .client { font-size: clamp(16px, 2vw, 21px); font-weight: 400; }
.case-header .location {
  font-size: clamp(16px, 2.2vw, 24px); font-weight: 400; line-height: 1.3;
  text-align: left; margin-top: 22px; max-width: 11ch;
}
.case-meta {
  display: grid; grid-template-columns: auto auto auto; gap: 24px 48px;
  margin-top: 18px; align-items: baseline;
}
.case-meta .pair { font-size: 11.5px; display: flex; gap: 14px; align-items: baseline; }
.case-meta .pair .label { color: var(--muted); font-weight: 300; white-space: nowrap; }
.case-meta .pair .value { font-weight: 400; }

.case-header .subtitle {
  font-size: clamp(15px, 1.7vw, 19px); font-weight: 400; color: var(--muted);
  margin-top: 10px;
}
.case-lede {
  font-size: clamp(14px, 1.5vw, 17px); font-weight: 300; line-height: 1.6;
  max-width: 46ch; margin-top: 16px;
}

.case-hero { position: relative; aspect-ratio: 16 / 9; background: #111; overflow: hidden; }
.play-btn {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 64px; height: 64px; border-radius: 50%;
  background: rgba(255,255,255,.92);
  display: flex; align-items: center; justify-content: center;
  z-index: 2; border: none; cursor: pointer;
}
.play-btn svg { width: 18px; height: 18px; margin-left: -2px; }

.case-body { background: var(--blush); }
.case-body .inner { padding: 90px 0 0; }

.overview { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.overview .text { grid-column: 2; }
.overview h2 { font-size: clamp(26px, 3vw, 34px); font-weight: 400; margin-bottom: 26px; }
.overview p { font-size: 14.5px; line-height: 2; font-weight: 300; }

.challenge-approach {
  display: grid; grid-template-columns: 1fr 1fr; gap: 64px;
  padding: 90px 0 20px;
}
.ca-col .media { overflow: hidden; }
.ca-col.left .media { aspect-ratio: 10 / 7; }
.ca-col.right { margin-top: 120px; }
.ca-col.right .media { aspect-ratio: 4 / 5; max-width: 420px; }
.ca-col h3 { font-size: 15px; font-weight: 500; margin: 34px 0 18px; }
.ca-col.no-media h3 { margin-top: 0; }
.ca-col p { font-size: 13.5px; line-height: 2; font-weight: 300; max-width: 44ch; }

.case-closing {
  display: grid; grid-template-columns: 1.55fr 1fr; gap: 0;
  padding: 90px 0 110px;
}
.case-closing .media { aspect-ratio: 4 / 3.4; overflow: hidden; }
.case-closing .badge-panel {
  background: var(--brand-panel);
  display: flex; align-items: center; justify-content: center;
}
.badge-panel img {
  width: 46%; max-width: 210px; height: auto; object-fit: contain;
}
.badge-panel.quote-panel { padding: 40px 32px; }
.badge-panel blockquote {
  font-size: clamp(19px, 2.3vw, 30px); font-weight: 400; line-height: 1.3;
  text-align: center; max-width: 15ch; letter-spacing: -0.01em;
}

.case-gallery {
  display: grid; grid-template-columns: 1fr 1.42fr; gap: 22px;
  padding: 74px 0 20px;
}
.case-gallery.reverse { grid-template-columns: 1.42fr 1fr; }
.case-gallery .media { overflow: hidden; }
.case-gallery .media.small { aspect-ratio: 4 / 3.4; }
.case-gallery .media.large { aspect-ratio: 16 / 10.8; }

.case-info {
  display: grid; grid-template-columns: 240px 1fr; gap: 56px;
  padding: 0 0 34px;
}
.case-info + .case-info { padding-top: 6px; }
.case-info h3 { font-size: clamp(18px, 2vw, 24px); font-weight: 400; }
.case-info p { font-size: 13.5px; line-height: 2; font-weight: 300; max-width: 58ch; }

/* ---------- about ---------- */
.about-header { padding: 26px 0 34px; }
.about-header .top { display: flex; justify-content: space-between; gap: 24px; }
.about-header h1 { font-size: clamp(30px, 4vw, 44px); font-weight: 400; letter-spacing: -0.01em; }
.about-header .services { margin-top: 10px; margin-left: 90px; }
.about-header .services li { list-style: none; font-size: 12.5px; font-weight: 300; line-height: 1.75; }
.about-header .right { text-align: left; max-width: 300px; }
.about-header .statement { font-size: clamp(16px, 2vw, 21px); font-weight: 400; line-height: 1.5; }
.about-header .credit { font-size: 10.5px; font-weight: 300; margin-top: 26px; color: var(--muted); }

.about-hero { aspect-ratio: 16 / 10.5; overflow: hidden; }

.about-bio { background: var(--blush); padding: 92px 0; }
.about-bio .inner { max-width: 680px; margin: 0 auto; padding: 0 32px; }
.about-bio p { font-size: clamp(15px, 1.3vw, 17.5px); line-height: 1.95; font-weight: 300; }
.about-bio p + p { margin-top: 32px; }

.about-gallery {
  display: grid; grid-template-columns: 1fr 1.42fr; gap: 22px;
  padding: 74px 0;
}
.about-gallery .media { overflow: hidden; }
.about-gallery .media.small { aspect-ratio: 4 / 3.4; }
.about-gallery .media.large { aspect-ratio: 16 / 10.8; }

.about-approach {
  display: grid; grid-template-columns: 240px 1fr; gap: 56px;
  padding: 10px 0 80px;
}
.about-approach h2 { font-size: clamp(20px, 2.4vw, 26px); font-weight: 400; color: #3c3c3c; }
.about-approach .text p { font-size: clamp(14.5px, 1.2vw, 16.5px); line-height: 1.95; font-weight: 300; }
.about-approach .text p + p { margin-top: 24px; }

.about-closing { aspect-ratio: 16 / 9.5; overflow: hidden; margin-bottom: 0; }

/* ---------- responsive ---------- */
@media (max-width: 860px) {
  .container { padding: 0 20px; }
  /* homepage: unwind the positioned canvas into a simple stack */
  .hp { padding: 0 20px 10px; }
  /* mobile header: signature left, menu in one row top-right, tagline beneath */
  .hp-head {
    padding-top: 18px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: "logo menu" "logo tagline";
    column-gap: 6%; align-items: start;
  }
  .hp-logo {
    grid-area: logo; position: static; transform: none; margin: 0;
    width: clamp(86px, 22vw, 150px); align-self: center;
  }
  .hp-menu {
    grid-area: menu; margin-left: 0;
    flex-direction: row; flex-wrap: wrap; gap: 4px 14px;
  }
  .hp-menu a { font-size: 12.5px; line-height: 1.3; }
  .hp-menu a.menu-work { display: none; }
  .hp-tagline {
    grid-area: tagline; position: static; transform: none; width: 100%;
    margin-top: 12px; font-size: 12.5px; line-height: 1.35;
  }
  /* homepage: unwind the positioned canvas into a simple stack */
  .hp2-sec { aspect-ratio: auto !important; margin-top: 46px; display: flex; flex-direction: column; gap: 26px; }
  .hp2-label {
    position: static; transform: none; writing-mode: horizontal-tb;
    font-size: 13px; text-transform: uppercase; letter-spacing: .08em;
    color: var(--muted); margin-bottom: 2px;
  }
  .hp2-headrow { position: static; display: block; white-space: normal; }
  .hp2-headrow h2 { font-size: 21px; }
  .hp2-cap {
    display: block; white-space: normal; font-size: 11px;
    margin: 4px 0 0;
  }
  .hp2-cap.pg { display: none; }
  .hp2-img { position: relative; left: auto; top: auto; width: 100% !important; margin-top: 8px; }
  .hp-foot { padding: 64px 0 56px; }
  /* subpage header matches the homepage on mobile:
     signature left, menu in one row beside it */
  .site-nav {
    flex-wrap: nowrap; align-items: center;
    gap: 6%; padding: 18px 0 16px;
  }
  .site-nav .wordmark { flex: none; }
  .site-nav .wordmark img { height: auto; width: clamp(86px, 22vw, 150px); }
  .site-nav ul { flex: 1; flex-wrap: wrap; gap: 4px 14px; }
  .site-nav ul a { font-size: 12.5px; color: var(--ink); }
  .site-nav li:has(.nav-work) { display: none; }
  .case-header .top { flex-direction: column; gap: 18px; }
  .case-header h1, .case-header .location { max-width: none; }
  .case-header .case-meta[style] { justify-content: flex-start !important; }
  .case-meta { grid-template-columns: 1fr; gap: 10px; }
  .case-meta .pair { flex-wrap: wrap; gap: 4px 14px; }
  .overview { grid-template-columns: 1fr; }
  .overview .text { grid-column: 1; }
  .challenge-approach { grid-template-columns: 1fr; gap: 56px; }
  .ca-col.right { margin-top: 0; }
  .case-closing { grid-template-columns: 1fr; }
  .case-closing .badge-panel { padding: 56px 0; }
  .case-gallery, .case-gallery.reverse { grid-template-columns: 1fr; }
  .case-info { grid-template-columns: 1fr; gap: 16px; }
  .about-header .top { flex-direction: column; }
  .about-header .services { margin-left: 0; }
  .about-gallery { grid-template-columns: 1fr; }
  .about-approach { grid-template-columns: 1fr; gap: 20px; }
}


/* ---------- travel blog (empty state) ---------- */
.blog-empty { background: var(--blush); padding: 96px 0 110px; text-align: center; }
.blog-empty .kicker { font-size: clamp(20px, 2.6vw, 30px); font-weight: 400; }
.blog-empty p + p { margin-top: 14px; font-size: 13.5px; font-weight: 300; }
.blog-empty a { border-bottom: 1px solid currentColor; }

/* ---------- hero film embed ---------- */
.case-hero-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---------- Instagram moments (recognition grid) ---------- */
.ig-moments { padding: 84px 0 20px; }
.ig-moments h3 { font-size: clamp(20px, 2.4vw, 26px); font-weight: 400; }
.ig-moments .ig-lede {
  font-size: clamp(13px, 1.2vw, 15px); line-height: 1.7; font-weight: 300;
  max-width: 52ch; margin-top: 12px;
}
.ig-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
  margin-top: 34px;
}
.ig-tile { display: block; aspect-ratio: 4 / 5; overflow: hidden; background: #eadfd7; }
.ig-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s ease; }
.ig-tile:hover img { transform: scale(1.03); }
@media (max-width: 640px) {
  .ig-moments { padding: 56px 0 8px; }
  .ig-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .ig-grid .ig-tile:nth-child(3) { grid-column: 1 / -1; aspect-ratio: 16 / 10; }
}