section[id] { scroll-margin-top: 90px; }
.explore { min-height: calc(calc(100 * var(--layout-svh, 1svh)) - 78px); padding: 34px 0 46px; font-family: Helvetica, Arial, sans-serif; }
.explore-heading { margin-bottom: 34px; font-family: Helvetica, "Helvetica Neue", Arial, sans-serif; }
.explore-heading h2 { font-family: Helvetica, "Helvetica Neue", Arial, sans-serif; font-size: clamp(28px, calc(3.3 * var(--layout-vw, 1vw)), 46px); line-height: 1; letter-spacing: -.055em; font-weight: 700; margin: 0; white-space: nowrap; }
.explore-heading h2 span { color: #ff8d98; font-family: "Brush Script MT", "Segoe Script", "URW Chancery L", cursive; font-style: italic; font-weight: 400; font-size: 1.06em; letter-spacing: -.02em; }
.explore-heading > p { font-size: 10px; letter-spacing: .16em; margin-bottom: 14px; }
.explore-heading em { color: #ff8d98; }
.explore-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.explore-card { position: relative; border: 1px solid #e7e7e7; padding: 22px; color: #151515; text-decoration: none; background: #fff; box-shadow: 0 13px 0 #ffb8c1, 0 22px 36px rgba(255, 143, 157, .2); transition: background .3s, border-color .3s, box-shadow .3s, transform .3s; }
.explore-card:hover { transform: translateY(-7px); box-shadow: 0 18px 0 #ff9fab, 0 30px 44px rgba(255, 143, 157, .26); }
.explore-card:hover, .explore-card:focus-visible { background: #ffc7ce; border-color: #ffc7ce; outline: none; }
.explore-card:focus-visible { box-shadow: 0 0 0 3px #151515; }
.explore-number { position: absolute; top: 16px; right: 14px; color: #777; font-size: 10px; }
.explore-portrait { height: clamp(205px, calc(22 * var(--layout-vw, 1vw)), 300px); margin-top: -48px; margin-bottom: 14px; position: relative; z-index: 1; }
.explore-portrait img { width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%; transition: transform .4s; mix-blend-mode: multiply; }
.explore-card:hover img { transform: translateY(-10px) rotate(-2deg); }
.explore-card:nth-child(1) { --offset: 150%; --i: 0; }
.explore-card:nth-child(2) { --offset: 50%; --i: 1; }
.explore-card:nth-child(3) { --offset: -50%; --i: 2; }
.explore-card:nth-child(4) { --offset: -150%; --i: 3; }
.explore.is-animated .explore-portrait { opacity: 0; transform: translateX(var(--offset)); }
.explore.is-animated .explore-caption { opacity: 0; }
.explore.is-visible .explore-portrait { animation: unfold 1.2s cubic-bezier(.2,.65,.2,1) calc(var(--i) * 90ms) both; }
.explore.is-visible .explore-caption { animation: caption-in .6s ease calc(.65s + var(--i) * 90ms) both; }
@keyframes unfold { 0% { opacity: 0; } 15% { opacity: 1; } 100% { opacity: 1; transform: translateX(0); } }
@keyframes caption-in { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior: auto; } .explore * { animation: none !important; transition: none !important; } .explore.is-animated .explore-portrait, .explore.is-animated .explore-caption { opacity: 1; transform: none; } }
.explore-caption { border-top: 1px solid #dedede; padding-top: 12px; }
.explore-caption > span { font-size: 8px; letter-spacing: .12em; }
.explore-caption h3 { display: flex; justify-content: space-between; gap: 8px; font-size: clamp(20px, calc(2 * var(--layout-vw, 1vw)), 28px); font-weight: 500; letter-spacing: -.045em; margin: 5px 0 8px; }
.explore-caption b { font-weight: 400; font-size: 20px; }
.explore-caption p { font-size: 12px; line-height: 1.6; color: #656565; margin: 0; }
@media(max-width:780px) { .explore-heading h2 { white-space: normal; } .explore-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 75px 16px; } .explore-portrait { height: 250px; } }
@media(max-width:420px) { .explore-card { padding: 10px; } .explore-portrait { height: 190px; } }

.explore-portrait,
.explore-portrait img { will-change: transform, opacity; backface-visibility: hidden; }
.explore.is-visible .explore-portrait { animation-duration: .85s; animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
.explore-portrait img { mix-blend-mode: multiply; filter: contrast(1.04) saturate(1.04); }

/* Wrap longer Guide titles without squeezing the arrow. */
.explore-caption h3 span { min-width: 0; overflow-wrap: anywhere; }
.explore-caption h3 b { flex-shrink: 0; }

/* All portraits end at the card border; the square research photo gets a white top fill. */
.guide-page .explore-card { overflow: hidden; }
.guide-page .explore-card:first-child .explore-portrait { background: transparent; }
.guide-page .explore-card:first-child .explore-portrait::before {
  content: '';
  position: absolute;
  inset: 0;
  background: #fff;
  transition: transform .4s;
}
.guide-page .explore-card:first-child .explore-portrait img { position: relative; }
.guide-page .explore-card:first-child:hover .explore-portrait::before {
  transform: translateY(-10px) rotate(-2deg);
}