/*
 * XPT Magazine, design v2.
 * Palette: cream 60 / charcoal 25 / beige 10 / white 5.
 * Beige is a fill and a line colour, never text on cream (1.7:1); text uses charcoal,
 * --muted (6.3:1 on cream) or --beige-ink (5.6:1 on cream).
 */
:root {
	--cream: #F7F3EE;
	--charcoal: #242424;
	--beige: #D8C3A5;
	--white: #FFFFFF;
	--beige-soft: #EFE6D9;
	--beige-ink: #76603C;
	--muted: #5F5A53;
	--line: #E6DCCB;
	--f-display: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
	--f-body: "DM Sans", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
	--wrap: 1240px;
	--gut: clamp(20px, 4vw, 40px);
	--read: 720px;
	--r-card: 18px;
	--r-img: 22px;
	--shadow: 0 22px 44px -28px rgba(36, 36, 36, .45);
}

/* ---------- Base ---------- */
html:has(body.xp) { background: var(--cream); }
body.xp { background: var(--cream); }
body.xp { margin: 0; color: var(--charcoal); font: 400 18px/1.65 var(--f-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
.xp *, .xp *::before, .xp *::after { box-sizing: border-box; }
.xp :where(img) { max-width: 100%; height: auto; display: block; }
.xp :where(a) { color: inherit; }
.xp :where(h1, h2, h3, h4) { font-family: var(--f-display); font-weight: 600; line-height: 1.1; letter-spacing: -.005em; margin: 0; color: var(--charcoal); }
.xp :where(p) { margin: 0; }
.xp :where(ul, ol) { margin: 0; }
.xp :where(button) { font: inherit; color: inherit; }
.xp :focus-visible { outline: 2px solid var(--charcoal); outline-offset: 3px; border-radius: 4px; }
.xp .xp-sr, .xp .screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.xp-skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--charcoal); color: var(--cream); padding: 12px 18px; border-radius: 999px; text-decoration: none; }
.xp-skip:focus { top: 12px; }
.xp-wrap { width: 100%; max-width: calc(var(--wrap) + var(--gut) * 2); margin-inline: auto; padding-inline: var(--gut); }
.xp-narrow { max-width: calc(var(--read) + var(--gut) * 2); }
.xp-main { display: block; min-height: 60vh; }
.xp-eyebrow { display: inline-flex; align-items: center; gap: 12px; font: 600 12px/1 var(--f-body); letter-spacing: .2em; text-transform: uppercase; color: var(--beige-ink); }
.xp-eyebrow::before { content: ""; width: 28px; height: 1px; background: var(--beige); }
.xp-center .xp-eyebrow::after { content: ""; width: 28px; height: 1px; background: var(--beige); }
.xp-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font: 400 14px/1.4 var(--f-body); color: var(--muted); }
.xp-meta a { color: var(--charcoal); text-decoration: none; font-weight: 500; }
.xp-meta a:hover { text-decoration: underline; text-decoration-color: var(--beige); text-underline-offset: 3px; }
.xp-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--beige); }
.xp-cat { font: 600 11px/1 var(--f-body); letter-spacing: .16em; text-transform: uppercase; color: var(--beige-ink); text-decoration: none; }
a.xp-cat:hover { color: var(--charcoal); }

/* ---------- Buttons ---------- */
.xp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 26px; border-radius: 999px; font: 600 14px/1 var(--f-body); letter-spacing: .04em; text-decoration: none; border: 1px solid var(--charcoal); background: var(--charcoal); color: var(--cream); cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.xp-btn:hover { background: var(--beige); border-color: var(--beige); color: var(--charcoal); }
.xp-btn-ghost { background: transparent; color: var(--charcoal); }
.xp-btn-ghost:hover { background: var(--charcoal); border-color: var(--charcoal); color: var(--cream); }
.xp-btn-beige { background: var(--beige); border-color: var(--beige); color: var(--charcoal); }
.xp-btn-beige:hover { background: var(--cream); border-color: var(--cream); }
.xp-link { display: inline-flex; align-items: center; gap: 8px; font: 600 14px/1.2 var(--f-body); letter-spacing: .04em; color: var(--charcoal); text-decoration: none; padding-block: 10px; border-bottom: 1px solid var(--beige); }
.xp-link:hover { border-color: var(--charcoal); }
.xp-ico { width: 20px; height: 20px; flex: none; fill: currentColor; }
.xp-ico-s { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Header ---------- */
.xp-head { position: relative; z-index: 60; background: var(--cream); border-bottom: 1px solid var(--line); }
.xp-topbar { background: var(--charcoal); color: var(--cream); }
.xp-topbar-in { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 42px; font: 500 14px/1.3 var(--f-body); }
.xp-topbar p { display: flex; align-items: center; gap: 10px; }
.xp-topbar p::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--beige); flex: none; }
.xp-topbar a { color: var(--beige); text-decoration: none; font-weight: 600; border-bottom: 1px solid rgba(216, 195, 165, .5); }
.xp-topbar a:hover { color: var(--cream); border-color: var(--cream); }
.xp-topbar .xp-icon-btn { width: 36px; height: 36px; color: var(--cream); }
.xp-topbar .xp-icon-btn:hover { background: rgba(247, 243, 238, .14); }
.xp-topbar .xp-ico { width: 17px; height: 17px; }
.xp-head-top { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: clamp(12px, 2vw, 28px); min-height: 84px; }
.xp-head-r { display: flex; align-items: center; gap: 6px; justify-content: flex-end; }
.xp-icon-btn { width: 46px; height: 46px; display: inline-grid; place-items: center; border-radius: 50%; border: 0; background: transparent; cursor: pointer; color: var(--charcoal); text-decoration: none; transition: background .2s; }
.xp-icon-btn:hover { background: var(--beige-soft); }
.xp-menu-btn { display: none; }
.xp-search-btn { background: var(--white); border: 1px solid var(--line); }
.xp-search-btn:hover { background: var(--charcoal); border-color: var(--charcoal); color: var(--cream); }
.xp-logo { display: inline-flex; align-items: center; gap: 14px; text-decoration: none; color: var(--charcoal); line-height: 1; white-space: nowrap; }
.xp-logo-mark { width: 40px; height: 50px; flex: none; display: block; }
.xp-lm-arch { fill: var(--charcoal); }
.xp-lm-line { fill: none; stroke: var(--beige); stroke-width: 1.3; }
.xp-lm-x { fill: var(--cream); font: 600 italic 31px var(--f-display); }
.xp-logo-words { display: flex; flex-direction: column; gap: 1px; }
.xp-logo b { font: 700 30px/.74 var(--f-display); letter-spacing: .2em; }
.xp-logo i { font: 600 9px/1 var(--f-body); letter-spacing: .42em; text-transform: uppercase; font-style: normal; opacity: .8; border-top: 1px solid currentColor; padding-top: 2px; }
.xp-nav ul { list-style: none; padding: 0; margin: 0; display: flex; justify-content: center; flex-wrap: wrap; gap: 4px 2px; }
.xp-nav a { display: block; padding: 10px 11px; border-radius: 999px; font: 500 15px/1.2 var(--f-body); text-decoration: none; color: var(--charcoal); transition: background .2s, color .2s; }
.xp-nav a:hover { background: var(--beige-soft); }
.xp-nav .current-menu-item > a, .xp-nav .current-menu-ancestor > a { background: var(--charcoal); color: var(--cream); }
.xp-search-panel { background: var(--white); border-top: 1px solid var(--line); padding-block: 20px; }
.xp-search-panel[hidden] { display: none; }
.xp-search { display: flex; align-items: center; gap: 12px; background: var(--white); border: 1px solid var(--beige); border-radius: 999px; padding: 0 8px 0 20px; min-height: 52px; max-width: 640px; margin-inline: auto; }
.xp-search:focus-within { border-color: var(--charcoal); }
.xp-search input { flex: 1; min-width: 0; border: 0; background: transparent; font: 400 16px/1.2 var(--f-body); color: var(--charcoal); height: 48px; outline: 0; }
.xp-search button { width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--charcoal); color: var(--cream); display: grid; place-items: center; cursor: pointer; }
.xp-search button:hover { background: var(--beige); color: var(--charcoal); }
.xp-drawer { position: fixed; inset: 0; z-index: 80; background: var(--cream); padding: 20px var(--gut) 40px; overflow-y: auto; display: flex; flex-direction: column; gap: 28px; }
.xp-drawer[hidden] { display: none; }
.xp-drawer-top { display: flex; align-items: center; justify-content: space-between; }
.xp-drawer ul { list-style: none; padding: 0; }
.xp-drawer li a { display: block; padding: 14px 0; border-bottom: 1px solid var(--line); font: 600 34px/1.1 var(--f-display); text-decoration: none; }
.xp-drawer li a:hover { color: var(--beige-ink); }
.xp-social { display: flex; gap: 4px; }

/* ---------- Home: hero ---------- */
.xp-hero { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(32px, 6vw, 88px); align-items: center; padding-block: clamp(36px, 6vw, 80px) clamp(24px, 4vw, 48px); }
.xp-hero h1 { font-size: clamp(46px, 6.4vw, 92px); line-height: .98; margin: 22px 0 24px; letter-spacing: -.015em; }
.xp-hero h1 em { font-style: italic; font-weight: 500; color: var(--beige-ink); }
.xp-hero-sub { font-size: 19px; line-height: 1.6; color: var(--muted); max-width: 46ch; }
.xp-hero-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 34px; }
.xp-hero-art { width: 100%; position: relative; padding: 0 0 0 clamp(0px, 3vw, 40px); }
.xp-hero-art::before { content: ""; position: absolute; right: -6%; top: 10%; width: 62%; aspect-ratio: 1; border-radius: 50%; background: var(--beige); z-index: 0; }
.xp-arch { position: relative; z-index: 1; aspect-ratio: 4 / 5; border-radius: 999px 999px var(--r-img) var(--r-img); overflow: hidden; background: var(--beige-soft); display: block; }
.xp-arch img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
a.xp-arch:hover img { transform: scale(1.04); }
.xp-hero-card { position: absolute; z-index: 2; left: 0; bottom: 8%; max-width: 290px; background: var(--white); border-radius: 16px; padding: 18px 20px 20px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 10px; }
.xp-hero-card h2 { font-size: 22px; line-height: 1.15; }
.xp-hero-card h2 a { text-decoration: none; }
.xp-hero-card h2 a:hover { color: var(--beige-ink); }

/* ---------- Sections ---------- */
.xp-sec { padding-top: clamp(56px, 8vw, 104px); }
.xp-sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: clamp(24px, 3.4vw, 40px); }
.xp-sec-head h2 { font-size: clamp(32px, 4.2vw, 52px); margin-top: 14px; }
.xp-sec-head p { color: var(--muted); max-width: 56ch; margin-top: 10px; }
.xp-center { text-align: center; }
.xp-center .xp-sec-head { flex-direction: column; align-items: center; }
.xp-center .xp-sec-head p { margin-inline: auto; }

/* Landscape images are shown whole in a soft frame; only portrait images (pins) get the arch. */
.xp-arch.is-land { aspect-ratio: 4 / 3; border-radius: var(--r-img); }
.xp-hero-art .xp-arch.is-land { aspect-ratio: 16 / 11; border-radius: 240px var(--r-img) var(--r-img) var(--r-img); }
.xp-cat-tile .xp-arch.is-land { aspect-ratio: 4 / 3; }
.xp-person .xp-arch.is-land { aspect-ratio: 4 / 3; border-radius: var(--r-img); }

/* section arches */
.xp-cats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: clamp(16px, 2.4vw, 32px); }
.xp-cat-tile { display: flex; flex-direction: column; align-items: center; gap: 14px; text-decoration: none; text-align: center; }
.xp-cat-tile .xp-arch { width: 100%; aspect-ratio: 3 / 4; }
.xp-cat-tile b { font: 600 24px/1.1 var(--f-display); }
.xp-cat-tile span { font: 500 12px/1 var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.xp-cat-tile:hover b { color: var(--beige-ink); }
.xp-cat-tile:hover .xp-arch img { transform: scale(1.05); }

/* cards */
.xp-card { background: var(--white); border-radius: var(--r-card); overflow: hidden; display: flex; flex-direction: column; min-width: 0; transition: transform .25s ease, box-shadow .25s ease; }
.xp-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.xp-media { display: block; position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--beige-soft); }
.xp-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.xp-card:hover .xp-media img { transform: scale(1.04); }
.xp-media.is-tall { aspect-ratio: 4 / 5; }
.xp-media.is-wide { aspect-ratio: 16 / 9; }
.xp-noimg { display: grid; place-items: center; font: 600 26px/1 var(--f-display); letter-spacing: .24em; color: var(--beige-ink); }
.xp-card-body { padding: 22px 24px 26px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.xp-card-title { font-size: 25px; line-height: 1.14; }
.xp-card-title a { text-decoration: none; }
.xp-card-title a:hover { color: var(--beige-ink); }
.xp-dek { color: var(--muted); font-size: 15.5px; line-height: 1.6; }
.xp-card .xp-meta { margin-top: auto; padding-top: 4px; }
.xp-grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 2.4vw, 32px); }
.xp-grid4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); }
.xp-grid4 .xp-card-title { font-size: 22px; }

/* fresh: lead + stack */
.xp-fresh { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(18px, 2.4vw, 32px); margin-bottom: clamp(18px, 2.4vw, 32px); }
.xp-lead .xp-media { aspect-ratio: 16 / 9; }
.xp-lead .xp-card-title { font-size: clamp(30px, 3.4vw, 44px); }
.xp-lead .xp-card-body { padding: 28px 32px 32px; gap: 14px; }
.xp-stack { display: flex; flex-direction: column; gap: clamp(14px, 1.6vw, 20px); }
.xp-row { display: grid; grid-template-columns: 38% minmax(0, 1fr); background: var(--white); border-radius: var(--r-card); overflow: hidden; flex: 1; transition: transform .25s ease, box-shadow .25s ease; }
.xp-row:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.xp-row .xp-media { aspect-ratio: auto; height: 100%; min-height: 150px; }
.xp-row:hover .xp-media img { transform: scale(1.04); }
.xp-row-body { padding: 18px 22px; display: flex; flex-direction: column; justify-content: center; gap: 10px; min-width: 0; }
.xp-row .xp-card-title { font-size: 22px; }

/* people */
.xp-people { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 2.2vw, 30px); }
.xp-person { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.xp-person .xp-arch { aspect-ratio: 4 / 5; border-radius: 999px 999px var(--r-img) var(--r-img); }
.xp-person:hover .xp-arch img { transform: scale(1.05); }
.xp-person-body { display: flex; flex-direction: column; gap: 8px; text-align: center; align-items: center; }
.xp-person h3 { font-size: 26px; }
.xp-person h3 a { text-decoration: none; }
.xp-person h3 a:hover { color: var(--beige-ink); }
.xp-person p { font-size: 14.5px; color: var(--muted); line-height: 1.5; }

/* outfit slider */
.xp-slider { position: relative; }
.xp-slider-track { display: flex; gap: clamp(16px, 2vw, 26px); overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding-block: 4px 6px; cursor: grab; }
.xp-slider-track::-webkit-scrollbar { display: none; }
.xp-slider-track.is-drag { scroll-snap-type: none; scroll-behavior: auto; cursor: grabbing; }
.xp-slider-track.is-drag a { pointer-events: none; }
.xp-slide { flex: 0 0 calc((100% - 3 * clamp(16px, 2vw, 26px)) / 4); scroll-snap-align: start; min-width: 0; }
.xp-look { display: flex; flex-direction: column; gap: 14px; text-decoration: none; }
.xp-look .xp-media { aspect-ratio: 2 / 3; border-radius: var(--r-img); }
.xp-look:hover .xp-media img { transform: scale(1.04); }
.xp-look h3 { font-size: 24px; line-height: 1.15; }
.xp-look:hover h3 { color: var(--beige-ink); }
.xp-slider-btn { position: absolute; top: 38%; z-index: 3; width: 52px; height: 52px; border-radius: 50%; border: 0; background: var(--white); color: var(--charcoal); box-shadow: 0 10px 26px -10px rgba(36, 36, 36, .55); display: grid; place-items: center; cursor: pointer; transition: background .2s, color .2s, opacity .2s; }
.xp-slider-btn:hover { background: var(--charcoal); color: var(--cream); }
.xp-slider-btn[disabled] { opacity: 0; pointer-events: none; }
.xp-slider-btn.is-prev { left: -14px; }
.xp-slider-btn.is-next { right: -14px; }
.xp-slider-btn.is-prev .xp-ico { transform: scaleX(-1); }
.xp-slider-dots { display: flex; justify-content: center; gap: 4px; margin-top: 22px; }
.xp-slider-dots button { width: 28px; height: 28px; border: 0; background: transparent; cursor: pointer; display: grid; place-items: center; padding: 0; }
.xp-slider-dots button::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--beige); transition: width .25s, background .25s; }
.xp-slider-dots button[aria-current="true"]::before { width: 26px; border-radius: 999px; background: var(--charcoal); }

/* facets */
.xp-facets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 26px); }
.xp-facet { background: var(--white); border-radius: var(--r-card); padding: clamp(22px, 2.6vw, 32px); }
.xp-facet h3 { font-size: 28px; margin-bottom: 16px; }
.xp-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.xp-chips a { display: inline-flex; align-items: center; min-height: 42px; padding: 0 16px; border-radius: 999px; background: var(--cream); border: 1px solid var(--line); text-decoration: none; font: 500 15px/1 var(--f-body); }
.xp-chips a:hover { background: var(--charcoal); border-color: var(--charcoal); color: var(--cream); }
.xp-more-head { padding-top: clamp(72px, 10vw, 128px); }
.xp-more-head h2 { font-size: clamp(34px, 4.6vw, 58px); margin-top: 14px; }
.xp-sec-tight { padding-top: clamp(32px, 4vw, 48px); }

/* net worth */
.xp-ranks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(24px, 4vw, 56px); background: var(--white); border-radius: 26px; padding: clamp(10px, 2vw, 22px) clamp(20px, 3.4vw, 44px); }
.xp-rank { display: grid; grid-template-columns: 44px 68px minmax(0, 1fr) auto; align-items: center; gap: 16px; padding-block: 18px; border-bottom: 1px solid var(--line); }
.xp-rank:nth-last-child(-n+2) { border-bottom: 0; }
.xp-rank-n { font: 500 38px/1 var(--f-display); color: var(--beige); text-align: center; font-style: italic; }
.xp-rank .xp-thumb { width: 68px; height: 68px; border-radius: 50%; overflow: hidden; background: var(--beige-soft); display: block; }
.xp-rank .xp-thumb img { width: 100%; height: 100%; object-fit: cover; }
.xp-rank h3 { font-size: 22px; line-height: 1.15; }
.xp-rank h3 a { text-decoration: none; }
.xp-rank h3 a:hover { color: var(--beige-ink); }
.xp-rank p { font-size: 13.5px; color: var(--muted); margin-top: 4px; line-height: 1.4; }
.xp-fig { text-align: right; display: flex; flex-direction: column; gap: 4px; }
.xp-fig b { font: 600 24px/1 var(--f-display); }
.xp-fig span { font: 500 11px/1 var(--f-body); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.xp-note { margin-top: 16px; font-size: 13px; color: var(--muted); text-align: center; }

/* homes (overlay cards) */
.xp-homes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(18px, 2.4vw, 32px); }
.xp-over { position: relative; border-radius: var(--r-img); overflow: hidden; aspect-ratio: 16 / 11; background: var(--charcoal); display: flex; align-items: flex-end; }
.xp-over img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.xp-over:hover img { transform: scale(1.05); }
.xp-over::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(36, 36, 36, .86) 0%, rgba(36, 36, 36, .35) 48%, rgba(36, 36, 36, 0) 78%); }
.xp-over-body { position: relative; z-index: 1; padding: clamp(20px, 3vw, 34px); color: var(--cream); display: flex; flex-direction: column; gap: 10px; }
.xp-over .xp-cat { color: var(--beige); }
.xp-over h3 { color: var(--cream); font-size: clamp(26px, 3vw, 38px); }
.xp-over h3 a { text-decoration: none; color: inherit; }
.xp-over h3 a::before { content: ""; position: absolute; inset: 0; z-index: 2; }
.xp-over .xp-meta { color: rgba(247, 243, 238, .82); }

/* quotes band */
.xp-quoteband { margin-top: clamp(56px, 8vw, 104px); background: var(--beige); padding-block: clamp(56px, 8vw, 100px); text-align: center; }
.xp-quoteband .xp-eyebrow { color: var(--charcoal); }
.xp-quoteband .xp-eyebrow::before, .xp-quoteband .xp-eyebrow::after { background: var(--charcoal); }
.xp-bigquote { max-width: 860px; margin: 28px auto 0; position: relative; }
.xp-bigquote::before { content: "\201C"; display: block; font: 500 120px/.6 var(--f-display); color: var(--cream); height: 56px; }
.xp-bigquote p { font: 500 italic clamp(28px, 3.8vw, 46px)/1.22 var(--f-display); color: var(--charcoal); }
.xp-bigquote cite { display: block; margin-top: 22px; font: 600 12px/1 var(--f-body); letter-spacing: .18em; text-transform: uppercase; font-style: normal; }
.xp-bigquote cite a { text-decoration: none; border-bottom: 1px solid var(--charcoal); padding-bottom: 4px; }
.xp-pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 36px; }
.xp-pills a { display: inline-flex; align-items: center; min-height: 42px; padding: 0 20px; border-radius: 999px; background: var(--white); border: 1px solid transparent; text-decoration: none; font: 500 14px/1 var(--f-body); color: var(--charcoal); transition: background .2s, color .2s; }
.xp-pills a:hover { background: var(--charcoal); color: var(--cream); }

/* about strip */
.xp-about { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: center; background: var(--white); border-radius: 32px; padding: clamp(24px, 4vw, 56px); }
.xp-about-photo { margin: 0; aspect-ratio: 4 / 5; border-radius: 999px 999px 24px 24px; overflow: hidden; background: var(--beige-soft); }
.xp-about-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; }
.xp-about h2 { font-size: clamp(34px, 4.4vw, 56px); margin: 16px 0 18px; }
.xp-about-lede { font: 500 clamp(20px, 2.1vw, 26px)/1.4 var(--f-display); margin-bottom: 14px; }
.xp-about-text { color: var(--muted); margin-bottom: 12px; max-width: 58ch; }
.xp-about-links { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 24px; }

/* newsletter */
.xp-news { background: var(--charcoal); color: var(--cream); border-radius: 32px; padding: clamp(32px, 5vw, 68px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: center; }
.xp-news h2 { color: var(--cream); font-size: clamp(32px, 4vw, 52px); margin-top: 14px; }
.xp-news .xp-eyebrow { color: var(--beige); }
.xp-news p { color: rgba(247, 243, 238, .78); margin-top: 12px; }
.xp-news-form { display: flex; gap: 10px; background: var(--cream); border-radius: 999px; padding: 6px; }
.xp-news-form input { flex: 1; min-width: 0; border: 0; background: transparent; padding: 0 18px; font: 400 16px/1 var(--f-body); color: var(--charcoal); outline: 0; height: 48px; }
.xp-news-form .xp-btn { min-height: 48px; background: var(--charcoal); color: var(--cream); border-color: var(--charcoal); }
.xp-news-form .xp-btn:hover { background: var(--beige); color: var(--charcoal); border-color: var(--beige); }
.xp-news-fine { font-size: 12.5px; margin-top: 12px; color: rgba(247, 243, 238, .6); }
.xp-news-in-article { margin-top: 56px; }

/* ---------- Footer ---------- */
.xp-foot { background: var(--beige); color: var(--charcoal); margin-top: clamp(64px, 9vw, 120px); }
.xp-foot a { text-decoration: none; color: inherit; }
.xp-foot-cta { display: flex; align-items: center; justify-content: space-between; gap: 24px 48px; padding-block: clamp(40px, 6vw, 80px); border-bottom: 1px solid rgba(36, 36, 36, .22); }
.xp-foot-cta h2 { font-size: clamp(34px, 5vw, 66px); line-height: 1.02; max-width: 16ch; text-wrap: balance; }
.xp-foot-cta h2 em { font-weight: 500; }
.xp-foot-cta .xp-btn { color: var(--cream); }
.xp-foot-cta .xp-btn:hover { background: var(--cream); border-color: var(--cream); color: var(--charcoal); }
.xp-foot-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: clamp(28px, 4vw, 64px); padding-block: clamp(36px, 5vw, 64px); }
.xp-foot-brand p { margin-top: 20px; color: #3F392F; max-width: 38ch; font-size: 16px; line-height: 1.6; }
.xp-foot-brand .xp-social { margin-top: 18px; margin-left: -10px; }
.xp-foot .xp-icon-btn { color: var(--charcoal); }
.xp-foot .xp-icon-btn:hover { background: rgba(36, 36, 36, .1); }
.xp-foot-h { font: 700 12px/1 var(--f-body); letter-spacing: .2em; text-transform: uppercase; margin-bottom: 16px; }
.xp-foot ul { list-style: none; padding: 0; }
.xp-foot li a { display: inline-block; padding-block: 7px; font-size: 16px; border-bottom: 1px solid transparent; }
.xp-foot li a:hover { border-bottom-color: var(--charcoal); }
.xp-foot-base { background: var(--charcoal); color: rgba(247, 243, 238, .78); }
.xp-foot-base-in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px; min-height: 64px; padding-block: 14px; font-size: 14px; }
.xp-foot-base a { color: var(--cream); font-weight: 600; border-bottom: 1px solid rgba(216, 195, 165, .6); }
.xp-foot-base a:hover { color: var(--beige); }

/* ---------- Archive / page headers ---------- */
.xp-pagehead { background: var(--beige-soft); text-align: center; padding-block: clamp(40px, 6vw, 84px); }
.xp-pagehead h1 { font-size: clamp(40px, 6vw, 80px); margin: 18px 0 16px; }
.xp-pagehead .xp-intro { max-width: 62ch; margin-inline: auto; color: var(--muted); font-size: 17.5px; }
.xp-pagehead .xp-meta { justify-content: center; margin-top: 18px; }
.xp-crumbs { font: 500 12.5px/1.4 var(--f-body); color: var(--muted); margin-bottom: 14px; }
.xp-crumbs a { color: var(--muted); text-decoration: none; }
.xp-crumbs a:hover { color: var(--charcoal); text-decoration: underline; text-decoration-color: var(--beige); }
.xp-crumbs span.separator, .xp-crumbs .sep { margin-inline: 8px; color: var(--beige); }
.xp-subcats { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 28px; }
.xp-subcats a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 18px; border-radius: 999px; background: var(--white); text-decoration: none; font: 500 14px/1 var(--f-body); }
.xp-subcats a:hover { background: var(--charcoal); color: var(--cream); }
.xp-archive-body { padding-top: clamp(32px, 5vw, 64px); }
.xp-archive-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 2.4vw, 32px); }
.xp-archive-grid .xp-card:first-child { grid-column: span 2; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
.xp-archive-grid .xp-card:first-child .xp-media { aspect-ratio: auto; height: 100%; min-height: 320px; }
.xp-archive-grid .xp-card:first-child .xp-card-title { font-size: clamp(28px, 3vw, 38px); }
.xp-archive-grid .xp-card:first-child .xp-card-body { justify-content: center; padding: 32px; }
.xp-pagination { margin-top: clamp(36px, 5vw, 64px); }
.xp-pagination ul { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; padding: 0; }
.xp-pagination a, .xp-pagination span.page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 46px; height: 46px; padding: 0 18px; border-radius: 999px; background: var(--white); font: 500 15px/1 var(--f-body); text-decoration: none; border: 1px solid transparent; }
.xp-pagination a:hover { border-color: var(--charcoal); }
.xp-pagination .current { background: var(--charcoal); color: var(--cream); }
.xp-pagination .dots { background: transparent; }
.xp-empty { text-align: center; padding-block: 56px; color: var(--muted); }
.xp-explore { margin-top: clamp(56px, 8vw, 96px); text-align: center; }
.xp-explore h2 { font-size: clamp(28px, 3.4vw, 40px); margin-bottom: 22px; }
.xp-rows { display: flex; flex-direction: column; gap: 18px; }
.xp-rows .xp-card { flex-direction: row; }
.xp-rows .xp-media { width: 280px; flex: none; aspect-ratio: 4 / 3; }
.xp-rows .xp-card-body { padding: 22px 28px; justify-content: center; }

/* ---------- Article ---------- */
.xp-progress { position: fixed; left: 0; top: 0; height: 3px; width: 100%; background: var(--beige); transform: scaleX(0); transform-origin: 0 50%; z-index: 90; pointer-events: none; }
.xp-article-head { text-align: center; padding-block: clamp(36px, 5vw, 64px) clamp(24px, 3vw, 40px); }
.xp-article-head .xp-crumbs { margin-bottom: 22px; }
.xp-article-head .xp-cat { display: inline-block; padding: 9px 16px; background: var(--beige); color: var(--charcoal); border-radius: 999px; }
.xp-article-head .xp-cat:hover { background: var(--charcoal); color: var(--cream); }
.xp-article-title { font-size: clamp(36px, 5.6vw, 72px); line-height: 1.02; margin: 22px auto 0; max-width: 18ch; text-wrap: balance; }
.xp-standfirst { font: 500 italic clamp(20px, 2.3vw, 26px)/1.4 var(--f-display); color: var(--muted); max-width: 40ch; margin: 22px auto 0; }
.xp-byline { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 28px; text-align: left; }
.xp-byline-face { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; object-position: center 20%; background: var(--beige); display: grid; place-items: center; font: 600 20px/1 var(--f-display); flex: none; }
.xp-article-figure { margin: 0 auto; max-width: 1100px; padding-inline: var(--gut); position: relative; }
.xp-article-figure img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 26px; }
.xp-article-figure figcaption { font-size: 13px; color: var(--muted); text-align: center; margin-top: 10px; }
.xp-layout { display: grid; grid-template-columns: 64px minmax(0, var(--read)) 64px; justify-content: center; gap: clamp(20px, 3vw, 48px); padding-top: clamp(32px, 4vw, 56px); }
.xp-rail { position: sticky; top: 32px; align-self: start; display: flex; flex-direction: column; gap: 10px; }
.xp-share { display: flex; flex-direction: column; gap: 10px; }
.xp-share-btn { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--white); border: 1px solid var(--line); color: var(--charcoal); cursor: pointer; text-decoration: none; transition: background .2s, color .2s, border-color .2s; }
.xp-share-btn:hover { background: var(--charcoal); border-color: var(--charcoal); color: var(--cream); }
.xp-share-btn.is-pin { background: var(--beige); border-color: var(--beige); }
.xp-share-btn.is-pin:hover { background: var(--charcoal); border-color: var(--charcoal); }
.xp-share-btn .xp-ico { width: 19px; height: 19px; }
.xp-share-btn.copied { background: var(--charcoal); color: var(--cream); }
.xp-sharebar { display: none; }

.xp-toc { background: var(--white); border: 1px solid var(--line); border-radius: 18px; margin: 0 0 2em; padding: 0; }
.xp-toc summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 24px; font: 600 12px/1 var(--f-body); letter-spacing: .2em; text-transform: uppercase; }
.xp-toc summary::-webkit-details-marker { display: none; }
.xp-toc summary::after { content: "+"; font: 400 24px/1 var(--f-body); color: var(--beige-ink); }
.xp-toc[open] summary::after { content: "\2212"; }
.xp-toc ol { list-style: none; counter-reset: toc; margin: 0; padding: 0 24px 20px; display: flex; flex-direction: column; }
.xp-toc li { counter-increment: toc; border-top: 1px solid var(--line); }
.xp-toc li a { display: flex; gap: 14px; padding: 11px 0; text-decoration: none; font: 500 15.5px/1.35 var(--f-body); color: var(--charcoal); }
.xp-toc li a::before { content: counter(toc, decimal-leading-zero); font: 500 italic 16px/1.3 var(--f-display); color: var(--beige-ink); min-width: 24px; }
.xp-toc li a:hover { color: var(--beige-ink); }

.xp-prose { font-size: 18px; line-height: 1.78; color: var(--charcoal); overflow-wrap: break-word; min-width: 0; }
.xp-prose > * + * { margin-top: 1.25em; }
.xp-prose p { margin: 0; }
.xp-prose h2 { font-size: clamp(30px, 3.4vw, 42px); line-height: 1.08; margin-top: 2em; scroll-margin-top: 24px; }
.xp-prose h3 { font-size: clamp(24px, 2.6vw, 31px); line-height: 1.12; margin-top: 1.7em; scroll-margin-top: 24px; }
.xp-prose h4 { font: 700 14px/1.3 var(--f-body); letter-spacing: .12em; text-transform: uppercase; margin-top: 1.6em; }
.xp-prose h2 + *, .xp-prose h3 + *, .xp-prose h4 + * { margin-top: .7em; }
.xp-prose :where(a) { color: var(--charcoal); text-decoration: underline; text-decoration-color: var(--beige); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.xp-prose :where(a):hover { color: var(--beige-ink); }
.xp-prose strong { font-weight: 600; }
.xp-prose ul, .xp-prose ol { padding-left: 1.3em; }
.xp-prose li + li { margin-top: .5em; }
.xp-prose li::marker { color: var(--beige-ink); }
.xp-prose blockquote { margin: 2em 0; padding: 28px 0 0; border: 0; text-align: center; font: 500 italic clamp(24px, 2.8vw, 32px)/1.3 var(--f-display); position: relative; }
.xp-prose blockquote::before { content: "\201C"; position: absolute; top: -18px; left: 50%; transform: translateX(-50%); font: 500 80px/1 var(--f-display); color: var(--beige); }
.xp-prose blockquote p + p { margin-top: .6em; }
.xp-prose figure, .xp-prose .wp-block-image { margin: 2em 0; position: relative; }
.xp-prose img { border-radius: var(--r-img); }
.xp-prose figcaption, .xp-prose .wp-caption-text { font-size: 13px; line-height: 1.5; color: var(--muted); margin-top: 10px; text-align: center; }
.xp-prose hr { border: 0; height: 1px; background: var(--beige); margin: 2.6em auto; width: 80px; }
.xp-prose table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 15.5px; line-height: 1.5; background: var(--white); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; display: table; }
.xp-prose th, .xp-prose td { padding: 13px 18px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.xp-prose tr:last-child td { border-bottom: 0; }
.xp-prose thead th { background: var(--beige); color: var(--charcoal); font: 700 12px/1.3 var(--f-body); letter-spacing: .14em; text-transform: uppercase; border-bottom: 0; }
.xp-prose tbody td:first-child { width: 38%; color: var(--muted); }
.xp-prose tbody td:first-child strong { color: var(--charcoal); }
.xp-prose tbody tr:nth-child(even) td { background: #FBF8F3; }
.xp-prose div:has(> table) { overflow-x: auto; }
.xp-prose-wide { max-width: var(--wrap); }
.xp-prose .alignwide, .xp-prose .alignfull { max-width: 100%; }

/* pin button on in-article images */
.xp-pinwrap { position: relative; display: block; width: fit-content; max-width: 100%; margin-inline: auto; }
.xp-pin { position: absolute; top: 14px; left: 14px; z-index: 3; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px 0 12px; border-radius: 999px; background: var(--charcoal); color: var(--cream) !important; font: 600 13px/1 var(--f-body); letter-spacing: .04em; text-decoration: none !important; opacity: 0; transform: translateY(-4px); transition: opacity .2s, transform .2s, background .2s; }
.xp-pin .xp-ico { width: 16px; height: 16px; }
.xp-pinwrap:hover .xp-pin, .xp-pin:focus-visible { opacity: 1; transform: none; }
.xp-pin:hover { background: var(--beige); color: var(--charcoal) !important; }
@media (hover: none) { .xp-pin { opacity: 1; transform: none; } }

/* outfit card (block pattern xpt/outfit-card) */
.xp-prose .xp-outfit { background: var(--white); border-radius: 26px; padding: clamp(18px, 3vw, 32px); margin: 2.4em 0; display: flex; flex-direction: column; gap: 18px; counter-increment: outfit; }
.xp-prose .xp-outfit > * { margin: 0; }
.xp-prose .xp-outfit h2, .xp-prose .xp-outfit h3 { margin: 0; font-size: clamp(26px, 3vw, 36px); }
.xp-prose .xp-outfit img { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 18px; }
.xp-prose .xp-tip { background: var(--beige-soft); border-left: 3px solid var(--beige); border-radius: 0 12px 12px 0; padding: 14px 18px; font-size: 16px; line-height: 1.6; }

/* FAQ (Yoast FAQ block) */
.xp-prose .schema-faq-section { background: var(--white); border: 1px solid var(--line); border-radius: 16px; padding: 18px 22px; margin-top: 12px; }
.xp-prose .schema-faq-question { display: block; font: 600 22px/1.2 var(--f-display); margin-bottom: 8px; }
.xp-prose .schema-faq-answer { font-size: 16px; line-height: 1.65; color: var(--muted); }

/* legacy inline styles in older posts */
.xp-prose [style*="Newsreader"] { font-family: var(--f-body) !important; font-size: 18px !important; line-height: 1.78 !important; color: var(--charcoal) !important; max-width: none !important; }
.xp-prose [style*="Archivo"] { font-family: var(--f-display) !important; font-weight: 600 !important; color: var(--charcoal) !important; }
.xp-prose [style*="max-width:960px"] { max-width: none !important; padding-left: 0 !important; padding-right: 0 !important; margin-left: 0 !important; margin-right: 0 !important; }
.xp-prose [style*="border-top:2px solid #14181F"] { border-top: 1px solid var(--beige) !important; }

/* quote-card slider inside quote posts */
.xp-prose .rs-wrap { margin-block: 2em; }
.xp-prose .rs-card { background: var(--white) !important; border: 1px solid var(--line) !important; border-radius: 22px !important; box-shadow: none !important; }
.xp-prose .rs-quote-mark { color: var(--beige) !important; font-family: var(--f-display) !important; }
.xp-prose .rs-badge { font-family: var(--f-body) !important; color: var(--beige-ink) !important; border-color: var(--beige) !important; border-radius: 999px !important; letter-spacing: .12em !important; }
.xp-prose .rs-text { font-family: var(--f-display) !important; color: var(--charcoal) !important; }
.xp-prose .rs-num { font-family: var(--f-body) !important; color: var(--muted) !important; }
.xp-prose .rs-copy { font-family: var(--f-body) !important; background: var(--white) !important; border-color: var(--beige) !important; color: var(--charcoal) !important; border-radius: 999px !important; }
.xp-prose .rs-copy.copied { background: var(--charcoal) !important; color: var(--cream) !important; border-color: var(--charcoal) !important; }
.xp-prose .rs-arrow { background: var(--charcoal) !important; color: var(--cream) !important; border-radius: 999px !important; }
.xp-prose .rs-arrow:hover { background: var(--beige) !important; color: var(--charcoal) !important; }

/* A-Z directory shortcode: own layout, tokens remapped to this palette */
.xp .xpt-dir { --xpt-ink: #242424; --xpt-ink-body: #3A3835; --xpt-muted: #5F5A53; --xpt-rule: #E6DCCB; --xpt-rule-soft: #EFE6D9; --xpt-surface: #F7F3EE; --xpt-chrome: #242424; --xpt-on-chrome: #F7F3EE; --xpt-dim-chrome: #D8C3A5; --xpt-rule-chrome: #4A4640; --xpt-accent: #76603C; --xpt-on-accent: #FFFFFF; --xpt-head: "Cormorant Garamond", Georgia, serif; --xpt-mono: "DM Sans", "Segoe UI", Arial, sans-serif; margin-top: 0; }
.xp-prose .xpt-dir a { text-decoration: none; }
.xp-prose .xpt-dir .xpt-dir-matrix-key { color: var(--xpt-on-chrome); }
.xp-prose .xpt-dir .xpt-dir-matrix-key:hover, .xp-prose .xpt-dir .xpt-dir-matrix-key:focus-visible { color: var(--charcoal); }
.xp-prose .xpt-dir .xpt-dir-matrix-key.is-empty { color: #8E877B; }

/* article footer */
.xp-article-foot { padding-top: clamp(28px, 4vw, 48px); }
.xp-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-top: 28px; border-top: 1px solid var(--line); }
.xp-tags a { font: 500 13.5px/1 var(--f-body); text-decoration: none; background: var(--white); border-radius: 999px; padding: 11px 16px; }
.xp-tags a:hover { background: var(--charcoal); color: var(--cream); }
.xp-author { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 24px; align-items: center; margin-top: 36px; padding: 28px; background: var(--white); border-radius: 24px; }
.xp-author-face { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; object-position: center 20%; background: var(--beige); display: grid; place-items: center; font: 600 38px/1 var(--f-display); }
.xp-author-name { font: 600 28px/1.1 var(--f-display); margin: 8px 0; }
.xp-author-bio { font-size: 15.5px; color: var(--muted); line-height: 1.6; margin-bottom: 10px; }
.xp-postnav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 28px; }
.xp-postnav a { display: block; padding: 22px 26px; border: 1px solid var(--beige); border-radius: 20px; text-decoration: none; font: 600 22px/1.2 var(--f-display); transition: background .2s, color .2s; }
.xp-postnav a:hover { background: var(--charcoal); color: var(--cream); border-color: var(--charcoal); }
.xp-postnav span { display: block; font: 600 11px/1 var(--f-body); letter-spacing: .18em; text-transform: uppercase; color: var(--beige-ink); margin-bottom: 10px; }
.xp-postnav a:hover span { color: var(--beige); }
.xp-postnav-next { grid-column: 2; text-align: right; }

/* ---------- 404 ---------- */
.xp-404-n { font: 500 italic clamp(110px, 20vw, 240px)/.8 var(--f-display); color: var(--beige); margin-bottom: 8px; }

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
	.xp-people, .xp-grid4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.xp-foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.xp-slide { flex-basis: calc((100% - 2 * clamp(16px, 2vw, 26px)) / 3); }
	.xp-facets { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.xp-layout { grid-template-columns: minmax(0, var(--read)); }
	.xp-rail { display: none; }
	.xp-sharebar { display: flex; position: fixed; left: 50%; bottom: 16px; transform: translate(-50%, 140%); z-index: 70; gap: 8px; padding: 8px; background: var(--charcoal); border-radius: 999px; box-shadow: 0 16px 36px -14px rgba(36, 36, 36, .6); transition: transform .3s ease; }
	.xp-sharebar.is-on { transform: translate(-50%, 0); }
	.xp-sharebar .xp-share-btn { background: transparent; border-color: transparent; color: var(--cream); width: 44px; height: 44px; }
	.xp-sharebar .xp-share-btn:hover, .xp-sharebar .xp-share-btn.copied { background: var(--beige); color: var(--charcoal); }
	body.xp-has-sharebar { padding-bottom: 76px; }
}
@media (max-width: 900px) {
	.xp-nav { display: none; }
	.xp-menu-btn { display: inline-grid; }
	.xp-head-top { min-height: 68px; grid-template-columns: minmax(0, 1fr) auto; }
	.xp-search-btn { order: 0; }
	.xp-hero, .xp-fresh, .xp-about, .xp-news, .xp-homes { grid-template-columns: minmax(0, 1fr); }
	.xp-hero-art { max-width: 480px; margin-inline: auto; padding-left: 0; }
	.xp-hero-card { left: -8px; }
	.xp-grid3, .xp-archive-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.xp-archive-grid .xp-card:first-child { grid-column: span 2; }
	.xp-slide { flex-basis: calc((100% - clamp(16px, 2vw, 26px)) / 2); }
	.xp-ranks { grid-template-columns: minmax(0, 1fr); }
	.xp-rank:nth-last-child(2) { border-bottom: 1px solid var(--line); }
	.xp-about-photo { max-width: 300px; }
}
@media (max-width: 640px) {
	body.xp { font-size: 17.5px; }
	.xp-topbar .xp-social { display: none; }
	.xp-topbar-in { justify-content: center; text-align: center; font-size: 13px; }
	.xp-slide { flex-basis: 72%; }
	.xp-slider-btn { top: 32%; width: 46px; height: 46px; }
	.xp-slider-btn.is-prev { left: 4px; }
	.xp-slider-btn.is-next { right: 4px; }
	.xp-facets { grid-template-columns: minmax(0, 1fr); }
	.xp-logo-mark { width: 32px; height: 40px; }
	.xp-logo { gap: 11px; }
	.xp-logo b { font-size: 24px; }
	.xp-logo i { font-size: 7.5px; padding-top: 2px; }
	.xp-sec-head { flex-direction: column; align-items: flex-start; }
	.xp-center .xp-sec-head { align-items: center; }
	.xp-people, .xp-grid4 { gap: 22px 12px; }
	.xp-person h3 { font-size: 21px; }
	.xp-person p { display: none; }
	.xp-grid3, .xp-archive-grid { grid-template-columns: minmax(0, 1fr); }
	.xp-archive-grid .xp-card:first-child { grid-column: auto; display: flex; }
	.xp-archive-grid .xp-card:first-child .xp-media { aspect-ratio: 4 / 3; min-height: 0; }
	.xp-archive-grid .xp-card:first-child .xp-card-body { padding: 22px 24px 26px; }
	.xp-row { grid-template-columns: 34% minmax(0, 1fr); }
	.xp-row .xp-card-title { font-size: 19px; }
	.xp-row-body { padding: 14px 16px; }
	.xp-rank { grid-template-columns: 34px 56px minmax(0, 1fr); }
	.xp-rank .xp-thumb { width: 56px; height: 56px; }
	.xp-rank-n { font-size: 30px; }
	.xp-fig { grid-column: 3; text-align: left; flex-direction: row; align-items: baseline; gap: 8px; }
	.xp-rows .xp-card { flex-direction: column; }
	.xp-rows .xp-media { width: 100%; }
	.xp-foot-grid { grid-template-columns: minmax(0, 1fr); }
	.xp-foot-cta { flex-direction: column; align-items: flex-start; }
	.xp-news-form { flex-direction: column; border-radius: 22px; }
	.xp-news-form input { height: 52px; }
	.xp-author { grid-template-columns: minmax(0, 1fr); text-align: center; justify-items: center; }
	.xp-postnav { grid-template-columns: minmax(0, 1fr); }
	.xp-postnav-next { grid-column: 1; text-align: left; }
	.xp-prose { font-size: 17px; }
	.xp-article-figure { padding-inline: 12px; }
	.xp-article-figure img { border-radius: 18px; }
}
@media (prefers-reduced-motion: reduce) {
	.xp *, .xp *::before, .xp *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}
@media print {
	.xp-head, .xp-foot, .xp-rail, .xp-sharebar, .xp-progress, .xp-pin { display: none !important; }
}