/* Joy Stories — black & white, so our clients can be colorful. */
:root {
  --black: #0a0a0a;
  --white: #ffffff;
  --line: #0a0a0a;
  --yellow: #ffd400;
  --pink: #ff3d7f;
  --blue: #2f6bff;
  --green: #00c48c;
  --orange: #ff7a00;
  --max: 1160px;
  --pad: clamp(16px, 4vw, 40px);
  --display: "Instrument Serif", "Times New Roman", Georgia, serif;
  --body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--white);
  color: var(--black);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img, video { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2 { font-family: var(--display); font-weight: 400; line-height: 1; letter-spacing: -0.015em; margin: 0 0 0.4em; }
h1 { font-size: clamp(3rem, 9vw, 7.2rem); }
h2 { font-size: clamp(2.4rem, 5.6vw, 4.2rem); }
h3 { font-family: var(--body); font-weight: 700; font-size: 1.15rem; line-height: 1.3; letter-spacing: -0.01em; margin: 0 0 0.5em; }
h1 em, h2 em { font-style: italic; }
p { margin: 0 0 1em; }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--pad); }
.section { padding: clamp(64px, 10vw, 128px) 0; }
.section--dark { background: var(--black); color: var(--white); }
.section--line { border-top: 2px solid var(--line); }
.eyebrow { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; margin-bottom: 1rem; display: inline-block; }
.lead { font-size: clamp(1.1rem, 2.2vw, 1.4rem); max-width: 40ch; }
.muted { opacity: 0.7; }

/* The colour moment: the only place colour lives is where joy shows up. */
.joy {
  background: linear-gradient(90deg, var(--yellow), var(--orange), var(--pink), var(--blue), var(--green));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.joy-bar { height: 8px; background: linear-gradient(90deg, var(--yellow) 0 20%, var(--orange) 20% 40%, var(--pink) 40% 60%, var(--blue) 60% 80%, var(--green) 80%); }
.dot { display: inline-block; width: 0.55em; height: 0.55em; border-radius: 50%; background: var(--pink); vertical-align: 0.1em; }

/* Header */
.site-header { position: sticky; top: 0; z-index: 20; background: var(--white); border-bottom: 2px solid var(--line); }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; height: 68px; }
.logo img { height: 46px; width: auto; display: block; }
.site-footer .logo img { height: 64px; }
.logo { font-family: var(--display); font-size: 1.7rem; text-decoration: none; letter-spacing: -0.02em; }
.logo span { color: var(--pink); }
.nav { display: flex; gap: 28px; align-items: center; }
.nav a { text-decoration: none; font-weight: 600; font-size: 0.95rem; }
.nav a:hover, .nav a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 6px; text-decoration-color: var(--yellow); }
.nav-toggle { display: none; background: none; border: 2px solid var(--black); font: 700 0.9rem var(--body); padding: 8px 12px; cursor: pointer; }

/* Buttons */
.btn { display: inline-block; font-weight: 600; font-size: 0.82rem; letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none; padding: 16px 28px; border: 2px solid currentColor; transition: transform .15s, box-shadow .15s; }
.btn--solid { background: var(--black); color: var(--white); border-color: var(--black); }
.section--dark .btn--solid { background: var(--white); color: var(--black); border-color: var(--white); }
.btn:hover { transform: translate(-3px, -3px); box-shadow: 6px 6px 0 var(--yellow); }
.btn-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; }

/* Hero */
.hero { padding: clamp(72px, 12vw, 150px) 0 clamp(56px, 8vw, 100px); }
.hero h1 { max-width: 13ch; }
.hero .lead { margin-top: 18px; }

/* Grids & cards */
.grid { display: grid; gap: 2px; background: var(--line); border: 2px solid var(--line); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
.card { background: var(--white); padding: clamp(24px, 3vw, 40px); position: relative; transition: background .2s; }
.card p:last-child { margin-bottom: 0; }
.card .num { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; display: block; margin-bottom: 18px; }
.card--link { text-decoration: none; display: block; }
.card--link:hover { background: var(--black); color: var(--white); }
.card--link .arrow { font-weight: 700; display: inline-block; margin-top: 12px; }
.accent-yellow { box-shadow: inset 0 8px 0 var(--yellow); }
.accent-pink { box-shadow: inset 0 8px 0 var(--pink); }
.accent-blue { box-shadow: inset 0 8px 0 var(--blue); }
.accent-green { box-shadow: inset 0 8px 0 var(--green); }
.accent-orange { box-shadow: inset 0 8px 0 var(--orange); }

/* Split */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 80px); align-items: center; }

/* I → We → Us */
.journey { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border: 2px solid var(--white); }
.journey > div { padding: clamp(24px, 4vw, 48px); border-right: 2px solid var(--white); }
.journey > div:last-child { border-right: 0; }
.journey .big { font-family: var(--display); font-style: italic; font-size: clamp(4rem, 10vw, 8rem); line-height: 1; display: block; margin-bottom: 12px; }
.journey > div:nth-child(1) .big { color: var(--yellow); }
.journey > div:nth-child(2) .big { color: var(--pink); }
.journey > div:nth-child(3) .big { color: var(--green); }

/* Media placeholders (swap for real photos and videos) */
.media {
  aspect-ratio: 4 / 3; border: 2px solid var(--black); display: grid; place-items: center; text-align: center;
  font-weight: 700; font-size: 0.85rem; letter-spacing: 0.12em; text-transform: uppercase; padding: 16px;
  background: repeating-linear-gradient(45deg, var(--white) 0 14px, #f2f2f2 14px 15px);
}
.media--wide { aspect-ratio: 16 / 9; }
.section--dark .media { border-color: var(--white); background: repeating-linear-gradient(45deg, var(--black) 0 14px, #1a1a1a 14px 15px); }

/* Lists */
.ticks { list-style: none; padding: 0; margin: 0; }
.ticks li { padding: 12px 0 12px 32px; border-bottom: 1px solid currentColor; position: relative; }
.ticks li::before { content: ""; position: absolute; left: 0; top: 21px; width: 14px; height: 14px; background: var(--yellow); border: 2px solid var(--black); }
.section--dark .ticks li::before { border-color: var(--white); }

/* Logos strip */
.logos { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; background: var(--black); border: 2px solid var(--black); }
.logos div { background: var(--white); aspect-ratio: 3/2; display: grid; place-items: center; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }

/* Joy calendar */
.cal-filter { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 28px; }
.cal-filter button { font: 700 0.9rem var(--body); padding: 10px 18px; border: 2px solid var(--black); background: var(--white); cursor: pointer; }
.cal-filter button[aria-pressed="true"] { background: var(--black); color: var(--white); }
.cal { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; background: var(--black); border: 2px solid var(--black); }
.month { background: var(--white); padding: 24px; }
.month h3 { font-family: var(--display); font-weight: 400; font-size: 1.6rem; margin-bottom: 14px; display: flex; justify-content: space-between; align-items: baseline; }
.month h3 small { font-family: var(--body); font-size: 0.75rem; font-weight: 700; opacity: 0.5; }
.month ul { list-style: none; margin: 0; padding: 0; }
.month li { font-size: 0.93rem; padding: 6px 0 6px 18px; position: relative; line-height: 1.35; }
.month li::before { content: ""; position: absolute; left: 0; top: 11px; width: 9px; height: 9px; border-radius: 50%; }
.month li.fest::before { background: var(--orange); }
.month li.wacky::before { background: var(--pink); }
.month li.cause::before { background: var(--green); }
.month li b { font-weight: 700; }
.month li span { display: block; font-size: 0.8rem; opacity: 0.6; }
.legend { display: flex; flex-wrap: wrap; gap: 20px; font-size: 0.85rem; font-weight: 600; margin-bottom: 18px; }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; }

/* Contact */
.form { display: grid; gap: 18px; }
.form label { font-weight: 700; font-size: 0.85rem; letter-spacing: 0.06em; text-transform: uppercase; display: grid; gap: 8px; }
.form input, .form select, .form textarea {
  font: 400 1rem var(--body); padding: 14px; border: 2px solid var(--black); background: var(--white); color: var(--black); border-radius: 0; width: 100%;
}
.form input:focus, .form select:focus, .form textarea:focus { outline: none; box-shadow: 6px 6px 0 var(--yellow); }
.form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form button { justify-self: start; cursor: pointer; font: inherit; font-weight: 700; }

/* CTA band */
.cta { text-align: center; }
.cta h2 { max-width: 18ch; margin: 0 auto 0.4em; }
.cta .btn-row { justify-content: center; }

/* Footer */
.site-footer { background: var(--black); color: var(--white); padding: 56px 0 32px; }
.site-footer .cols { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 32px; }
.site-footer a { text-decoration: none; opacity: 0.8; }
.site-footer a:hover { opacity: 1; text-decoration: underline; }
.site-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.site-footer .small { font-size: 0.8rem; opacity: 0.6; margin-top: 40px; border-top: 1px solid #333; padding-top: 20px; }

/* Responsive */
@media (max-width: 900px) {
  .grid--3, .grid--4, .cal { grid-template-columns: repeat(2, 1fr); }
  .logos { grid-template-columns: repeat(3, 1fr); }
  .split { grid-template-columns: 1fr; }
  .site-footer .cols { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  .grid--2, .grid--3, .grid--4, .cal, .journey { grid-template-columns: 1fr; }
  .journey > div { border-right: 0; border-bottom: 2px solid var(--white); }
  .journey > div:last-child { border-bottom: 0; }
  .form .row { grid-template-columns: 1fr; }
  .site-footer .cols { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }

/* Photos: the world in black & white, the people's joy in colour.
   Upload photos already edited with selective colour (faces/emotions in colour) and add class "selective".
   Any other photo is shown in black & white automatically, and blooms into colour on hover. */
.photo { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.05); transition: filter .4s; }
.photo:hover { filter: grayscale(0); }
.photo.selective { filter: none; }

@media (max-width: 1060px) {
  .nav-toggle { display: block; }
  .nav { display: none; position: absolute; top: 68px; left: 0; right: 0; background: var(--white); border-bottom: 2px solid var(--black); flex-direction: column; align-items: flex-start; gap: 0; padding: 8px var(--pad) 16px; }
  .nav.open { display: flex; }
  .nav a { padding: 10px 0; width: 100%; }
}

/* ---------- Playful layer ---------- */
/* Scroll reveal */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1); }
.reveal.in { opacity: 1; transform: none; }

/* Rotating hero word */
.rotator { display: inline-block; transition: transform .35s, opacity .35s; }
.rotator.out { transform: translateY(-0.4em) rotate(-4deg); opacity: 0; }

/* Colour burst on click: we are black & white, you bring the colour */
.burst { position: fixed; width: 10px; height: 10px; border-radius: 50%; pointer-events: none; z-index: 99; animation: burst .8s ease-out forwards; }
@keyframes burst { to { transform: translate(var(--x), var(--y)) scale(.2); opacity: 0; } }

/* Wobbly buttons and cards */
.btn:active { transform: scale(.96); }
.card--link:hover h3 { animation: wiggle .5s; }
@keyframes wiggle { 25% { transform: rotate(-2deg); } 75% { transform: rotate(2deg); } }

/* I -> We -> Us letters pop in */
.journey .big { transform: scale(.4); opacity: 0; transition: transform .6s cubic-bezier(.3,1.6,.5,1), opacity .4s; }
.journey.in .big { transform: none; opacity: 1; }
.journey.in > div:nth-child(2) .big { transition-delay: .25s; }
.journey.in > div:nth-child(3) .big { transition-delay: .5s; }

/* Mini team on the home page: people light up one by one */
.mini-team { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; width: 100%; max-width: 320px; margin-left: auto; }
.mini-team i { aspect-ratio: 1; border: 2px solid var(--white); border-radius: 50%; animation: glow 4.5s infinite; }
.mini-team i:nth-child(2) { animation-delay: .5s; } .mini-team i:nth-child(3) { animation-delay: 1s; }
.mini-team i:nth-child(4) { animation-delay: 1.5s; } .mini-team i:nth-child(5) { animation-delay: 2s; } .mini-team i:nth-child(6) { animation-delay: 2.5s; }
.mini-team i:nth-child(7) { animation-delay: 3s; } .mini-team i:nth-child(8) { animation-delay: 3.5s; } .mini-team i:nth-child(9) { animation-delay: 4s; }
@keyframes glow { 0%, 100% { background: transparent; } 20%, 60% { background: var(--c, var(--yellow)); border-color: var(--c, var(--yellow)); } }
.mini-team i:nth-child(3n+1) { --c: var(--yellow); } .mini-team i:nth-child(3n+2) { --c: var(--pink); } .mini-team i:nth-child(3n) { --c: var(--green); }

/* ---------- Play Room ---------- */
.stats { display: flex; flex-wrap: wrap; gap: 24px; font-weight: 600; }
.stats b { font-weight: 700; }
button.btn { font: inherit; font-weight: 700; background: var(--white); color: var(--black); cursor: pointer; }
.win { font-family: var(--display); font-size: 1.7rem; line-height: 1.15; margin-top: 24px; padding: 18px 22px; border: 2px solid var(--black); box-shadow: 8px 8px 0 var(--yellow); animation: pop .4s cubic-bezier(.3,1.6,.5,1); }
@keyframes pop { from { transform: scale(.8); opacity: 0; } }

/* Light up the team */
.lo-board { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; max-width: 420px; width: 100%; margin-left: auto; }
.lo-cell { aspect-ratio: 1; border: 2px solid var(--black); background: var(--white); cursor: pointer; position: relative; transition: background .25s, transform .15s; padding: 0; }
.lo-cell:hover { transform: translateY(-3px); }
.lo-cell::before, .lo-cell::after { content: ""; position: absolute; left: 50%; transform: translateX(-50%); background: var(--black); transition: background .25s; }
.lo-cell::before { top: 22%; width: 26%; aspect-ratio: 1; border-radius: 50%; }
.lo-cell::after { bottom: 16%; width: 50%; height: 28%; border-radius: 999px 999px 4px 4px; }
.lo-cell.on { background: var(--c); }
.lo-cell.on::before, .lo-cell.on::after { background: var(--black); }
.lo-cell.hint { animation: hint 1s 2; }
@keyframes hint { 50% { box-shadow: 0 0 0 6px var(--pink); } }

/* Team Match */
.mm-board { display: grid; grid-template-columns: repeat(8, 1fr); gap: 10px; }
.mm-card { aspect-ratio: 3/4; perspective: 600px; background: none; border: 0; padding: 0; cursor: pointer; font: inherit; color: inherit; }
.mm-inner { position: relative; width: 100%; height: 100%; transition: transform .45s; transform-style: preserve-3d; }
.mm-card.flip .mm-inner, .mm-card.done .mm-inner { transform: rotateY(180deg); }
.mm-face { position: absolute; inset: 0; backface-visibility: hidden; border: 2px solid var(--black); display: grid; place-items: center; align-content: center; gap: 6px; }
.mm-back { background: var(--black); color: var(--white); font-family: var(--display); font-size: 2rem; }
.mm-front { background: var(--white); transform: rotateY(180deg); }
.mm-front .e { font-size: clamp(1.4rem, 3vw, 2.2rem); filter: grayscale(1); transition: filter .3s; }
.mm-front .t { font-weight: 700; font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; }
.mm-card.done .mm-front { background: var(--c); }
.mm-card.done .e { filter: none; }

/* Team Words */
.tw-hint { font-weight: 600; opacity: .7; min-height: 1.6em; }
.tw-answer, .tw-tiles { display: flex; flex-wrap: wrap; gap: 8px; min-height: 58px; margin-bottom: 16px; }
.tw-answer { border-bottom: 2px solid var(--black); padding-bottom: 12px; }
.tw-tile { width: 50px; height: 50px; border: 2px solid var(--black); background: var(--white); font: 700 1.2rem var(--body); cursor: pointer; display: grid; place-items: center; transition: transform .15s, background .2s; padding: 0; color: var(--black); }
.tw-tile:hover { transform: translateY(-3px); }
.tw-tile[disabled] { opacity: .15; cursor: default; transform: none; }
.tw-answer .tw-tile { background: var(--black); color: var(--white); }
.tw-answer.right .tw-tile { background: var(--green); color: var(--black); animation: pop .3s; }
.tw-answer.wrong { animation: shake .4s; }
@keyframes shake { 25% { transform: translateX(-8px); } 75% { transform: translateX(8px); } }

@media (max-width: 900px) { .mm-board { grid-template-columns: repeat(4, 1fr); } .lo-board, .mini-team { margin: 0 auto; } }
@media (max-width: 420px) { .tw-tile { width: 42px; height: 42px; font-size: 1.15rem; } }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } .journey .big { opacity: 1; transform: none; } .mini-team i { animation: none; } }

/* Anatomy of a day */
.day-row { display: grid; grid-template-columns: 64px 1fr; gap: 20px; padding: 26px 0; border-bottom: 1px solid #333; }
.day-row:first-child { padding-top: 0; }
.day-n { font-family: var(--display); font-style: italic; font-size: 2.4rem; line-height: 1; color: var(--yellow); }
.day-row:nth-child(2) .day-n { color: var(--orange); } .day-row:nth-child(3) .day-n { color: var(--pink); }
.day-row:nth-child(4) .day-n { color: var(--blue); } .day-row:nth-child(5) .day-n { color: var(--green); }
.day-row p { margin: 0 0 8px; opacity: .85; }
.day-games { font-size: .78rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; opacity: .55 !important; }
@media (max-width: 900px) { .split > div[style*="sticky"] { position: static !important; } }
.tag { font-family: var(--display); font-size: 1.25rem; line-height: 1.2; }

.logos div { padding: 18px; }
.logos img { max-height: 54px; max-width: 100%; width: auto; filter: grayscale(1) contrast(1.1); opacity: .75; transition: filter .3s, opacity .3s; }
.logos div:hover img { filter: none; opacity: 1; }
@media (max-width: 720px) { .logos { grid-template-columns: repeat(3, 1fr); } .logos div { padding: 10px; } }

/* Testimonials */
.quotes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; background: var(--white); border: 2px solid var(--white); margin-top: 40px; }
.quote { margin: 0; background: var(--black); padding: 28px; display: flex; flex-direction: column; justify-content: space-between; gap: 24px; }
.quote blockquote { margin: 0; font-family: var(--display); font-size: 1.45rem; line-height: 1.2; }
.quote figcaption b { display: block; font-size: .9rem; }
.quote figcaption span { font-size: .8rem; opacity: .6; }
.quote:nth-child(5n+1) blockquote::first-letter { color: var(--yellow); } .quote:nth-child(5n+2) blockquote::first-letter { color: var(--pink); }
.quote:nth-child(5n+3) blockquote::first-letter { color: var(--green); } .quote:nth-child(5n+4) blockquote::first-letter { color: var(--blue); }
.quote:nth-child(5n) blockquote::first-letter { color: var(--orange); }
@media (max-width: 900px) { .quotes { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .quotes { grid-template-columns: 1fr; } }

/* Photos */
.shot { margin: 0; overflow: hidden; border: 2px solid var(--black); aspect-ratio: 4 / 3; }
.shot--wide { aspect-ratio: 16 / 9; }
.shot img { transition: filter .4s, transform .6s; }
.shot:hover img { transform: scale(1.04); }
.gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 40px; }
.gallery .shot:nth-child(1), .gallery .shot:nth-child(6) { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }
@media (max-width: 900px) { .gallery { grid-template-columns: repeat(2, 1fr); } }

/* Case study */
.case-video { position: relative; margin-top: 32px; border: 2px solid var(--white); aspect-ratio: 16 / 9; overflow: hidden; }
.case-video video { width: 100%; height: 100%; object-fit: cover; display: block; }
.case-play { position: absolute; left: 24px; bottom: 24px; }
.film { padding: 0; border: 0; background: var(--black); width: min(1100px, 94vw); }
.film::backdrop { background: rgba(0,0,0,.85); }
.film video { width: 100%; display: block; }
.film-close { position: absolute; top: 6px; right: 10px; z-index: 2; background: none; border: 0; color: var(--white); font-size: 2rem; cursor: pointer; }
.gallery--candid { grid-template-columns: repeat(3, 1fr); }
.gallery--candid .shot:nth-child(1) { grid-column: span 2; grid-row: auto; aspect-ratio: 4 / 3; }
.gallery--candid .shot:nth-child(2) { grid-row: span 2; aspect-ratio: auto; grid-column: auto; }
.gallery--candid .shot:nth-child(6) { grid-column: auto; grid-row: auto; aspect-ratio: 4 / 3; }
@media (max-width: 900px) { .gallery--candid { grid-template-columns: repeat(2, 1fr); } }

/* Journal */
.post-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 40px; }
.post-card { text-decoration: none; display: block; }
.post-card h3 { font-family: var(--display); font-weight: 400; font-size: 2rem; line-height: 1.05; }
.post-card p { opacity: .75; }
.post-card .arrow { font-weight: 700; font-size: .9rem; }
.post-card:hover h3 { text-decoration: underline; text-decoration-color: var(--yellow); text-decoration-thickness: 3px; text-underline-offset: 6px; }
.type-cover { aspect-ratio: 4 / 3; background: var(--black); color: var(--white); display: grid; place-items: center; border: 2px solid var(--black); overflow: hidden; }
.type-cover.shot--wide { aspect-ratio: 16 / 9; }
.type-cover span { font-family: var(--display); font-style: italic; font-size: clamp(3rem, 9vw, 9rem); letter-spacing: .02em; background: linear-gradient(90deg, var(--yellow), var(--orange), var(--pink), var(--blue), var(--green)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.post-card .type-cover span { font-size: clamp(2.4rem, 5vw, 4rem); }
.post-title { max-width: 16ch; font-size: clamp(2.6rem, 7vw, 5.4rem); }
.post-body { max-width: 68ch; margin: 0 auto; font-size: 1.1rem; line-height: 1.75; }
.post-body .lede { font-size: 1.4rem; line-height: 1.5; }
.post-body h2 { font-size: clamp(1.9rem, 4vw, 2.6rem); margin-top: 1.6em; }
.post-body a { text-decoration-color: var(--pink); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.post-body .pull { margin: 1.6em 0; padding: 0 0 0 24px; border-left: 6px solid var(--yellow); font-family: var(--display); font-size: clamp(1.6rem, 3.4vw, 2.2rem); line-height: 1.2; }
.post-body .pull b { color: var(--pink); font-weight: 400; }
.post-figure { margin: 2em 0; }
.post-figure .shot, .post-gallery .shot { aspect-ratio: 4 / 3; }
.post-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 2em 0; }
@media (max-width: 720px) { .post-gallery { grid-template-columns: 1fr 1fr; } }
.post-gallery--portrait .shot { aspect-ratio: 3 / 4; }
[id] { scroll-margin-top: 84px; }

/* FAQ */
.faq { border-top: 1px solid rgba(10,10,10,.15); padding: 18px 0; }
.faq:last-child { border-bottom: 1px solid rgba(10,10,10,.15); }
.faq summary { cursor: pointer; font-weight: 600; font-size: 1.1rem; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 1.4rem; line-height: 1; transition: transform .2s; }
.faq[open] summary::after { transform: rotate(45deg); }
.faq p { margin: 12px 0 0; max-width: 60ch; opacity: .85; }
.faq a { text-decoration-color: var(--yellow); text-underline-offset: 3px; }

/* Journal closing note */
.post-body .post-note { margin-top: 2.4em; padding-top: 1.2em; border-top: 1px solid rgba(10,10,10,.15); font-size: 1rem; opacity: .8; }