/* Reusable components */

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .6rem; min-height: 48px; padding: .75rem 1.7rem; border: 1px solid var(--maroon); border-radius: var(--radius); background: var(--maroon); color: #fff; font: 500 .92rem/1 var(--font-ui); letter-spacing: .02em; cursor: pointer; transition: background .25s, color .25s, border-color .25s, transform .15s; text-align: center; }
.btn:hover { background: var(--maroon-deep); border-color: var(--maroon-deep); color: #fff; }
.btn:active { transform: translateY(1px); }
.btn-secondary { background: transparent; color: var(--maroon); }
.btn-secondary:hover { background: var(--maroon); color: #fff; }
.btn-light { background: var(--ivory); border-color: var(--ivory); color: var(--plum); }
.btn-light:hover { background: #fff; border-color: #fff; color: var(--plum); }
.btn-outline-light { background: transparent; border-color: rgba(248,245,239,.55); color: var(--ivory); }
.btn-outline-light:hover { background: var(--ivory); color: var(--plum); border-color: var(--ivory); }
.btn-sm { min-height: 40px; padding: .5rem 1.1rem; font-size: .84rem; }
.btn-block { width: 100%; }
.btn-text { display: inline-flex; gap: .5rem; align-items: center; font: 500 .92rem/1.4 var(--font-ui); color: var(--maroon); padding-block: .3rem; border-bottom: 1px solid var(--brass); }
.btn-text::after { content: '\2192'; transition: transform .25s var(--ease); }
.btn-text:hover { border-color: var(--maroon); }
.btn-text:hover::after { transform: translateX(4px); }
.btn-text.light { color: var(--ivory); }

/* ---------- wordmark & navigation ---------- */
.wordmark { display: inline-flex; align-items: center; gap: .65rem; font: 600 1.85rem/1 var(--font-display); color: var(--plum); letter-spacing: .01em; }
.wordmark:hover { color: var(--plum); }
.wm-mark { position: relative; width: 17px; height: 24px; border: 1.5px solid var(--brass); border-radius: 9px 9px 0 0; flex: none; }
.wm-mark::after { content: ''; position: absolute; inset: 4px 3px 0; border: 1px solid var(--maroon); border-bottom: 0; border-radius: 6px 6px 0 0; }
.wordmark.light, .wordmark.light:hover { color: var(--ivory); }

.site-header { position: sticky; top: 0; z-index: 50; background: rgba(248,245,239,.97); border-bottom: var(--line); }
.header-inner { display: flex; align-items: center; gap: var(--s-5); min-height: var(--header-h); padding-inline: var(--gutter); max-width: calc(var(--container) + 2 * var(--gutter)); margin-inline: auto; }
.nav-toggle { position: absolute; opacity: 0; pointer-events: none; }
.nav-burger { display: none; margin-inline-start: auto; width: 46px; height: 46px; place-items: center; border: var(--line); border-radius: var(--radius); cursor: pointer; }
.nav-burger i, .nav-burger i::before, .nav-burger i::after { display: block; width: 18px; height: 1.5px; background: var(--ink); position: relative; transition: .25s; }
.nav-burger i::before, .nav-burger i::after { content: ''; position: absolute; left: 0; }
.nav-burger i::before { top: -6px; } .nav-burger i::after { top: 6px; }
.nav-toggle:focus-visible + .nav-burger { outline: 2px solid var(--maroon); outline-offset: 2px; }
.nav-toggle:checked + .nav-burger i { background: transparent; }
.nav-toggle:checked + .nav-burger i::before { top: 0; transform: rotate(45deg); }
.nav-toggle:checked + .nav-burger i::after { top: 0; transform: rotate(-45deg); }
.nav-panel { display: flex; flex: 1; align-items: center; justify-content: space-between; gap: var(--s-5); }
.nav-links { display: flex; gap: clamp(1rem, 2.2vw, 2.2rem); margin-inline: auto; }
.nav-links a, .nav-actions a:not(.btn) { position: relative; font-size: .88rem; font-weight: 500; color: var(--ink); padding-block: .4rem; white-space: nowrap; }
.nav-links a::after, .nav-actions a:not(.btn)::after { content: ''; position: absolute; inset: auto 0 0; height: 1px; background: var(--maroon); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease); }
.nav-links a:hover::after, .nav-actions a:not(.btn):hover::after, .nav-links a[aria-current]::after { transform: scaleX(1); }
.nav-links a[aria-current], .nav-links a:hover, .nav-actions a:not(.btn):hover { color: var(--maroon); }
.nav-actions { display: flex; align-items: center; gap: var(--s-4); }

/* ---------- editorial details ---------- */
.arch { border-radius: 999px 999px 0 0; overflow: hidden; }
.frame { position: relative; isolation: isolate; }
.frame::before { content: ''; position: absolute; inset: 14px -14px -14px 14px; border: 1px solid var(--brass); z-index: -1; }
.frame.arch-frame::before { border-radius: 999px 999px 0 0; }
.frame.flip::before { inset: 14px 14px -14px -14px; }
.img-box { position: relative; overflow: hidden; background: linear-gradient(160deg, var(--pale), var(--sand)); }
.img-box img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
a:hover .img-box img, .hover-zoom:hover img { transform: scale(1.035); }
.ratio-portrait { aspect-ratio: 4 / 5; } .ratio-tall { aspect-ratio: 3 / 4.3; } .ratio-square { aspect-ratio: 1; } .ratio-wide { aspect-ratio: 16 / 10; } .ratio-narrow { aspect-ratio: 2 / 3; }
.caption { font: italic 500 1.1rem/1.4 var(--font-display); color: var(--grey); }
.rule { display: flex; align-items: center; gap: .8rem; color: var(--brass); margin-block: var(--s-4); }
.rule::before, .rule::after { content: ''; flex: 1; height: 1px; background: var(--sand); }
.rule i { width: 7px; height: 7px; border: 1px solid var(--brass); transform: rotate(45deg); }
.rule.left::before { display: none; }
.tag { display: inline-block; font: 500 .72rem/1 var(--font-ui); letter-spacing: .06em; text-transform: uppercase; color: var(--grey); border: var(--line); padding: .4rem .65rem; }
.demo-note { display: inline-block; font: 500 .72rem/1.2 var(--font-ui); letter-spacing: .08em; text-transform: uppercase; color: #8a6f3c; background: rgba(180,154,105,.14); padding: .3rem .55rem; }
.verified { display: inline-flex; align-items: center; gap: .35rem; font-size: .75rem; font-weight: 500; color: var(--ok); }
.verified::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--ok); }

/* ---------- profile cards ---------- */
.pcard { display: flex; flex-direction: column; background: var(--white); border: var(--line); transition: border-color .3s; }
.pcard:hover { border-color: var(--brass); }
.pcard .img-box { display: block; }
.pcard-body { display: flex; flex-direction: column; flex: 1; padding: var(--s-4); }
.pcard h3 { font-size: 1.6rem; display: flex; justify-content: space-between; align-items: baseline; gap: .6rem; margin-bottom: .2rem; }
.pcard h3 span { font: 400 1rem var(--font-ui); color: var(--grey); }
.pcard .where { color: var(--grey); font-size: .88rem; margin-bottom: var(--s-3); }
.meta { display: grid; grid-template-columns: auto 1fr; gap: .2rem 1rem; font-size: .88rem; padding-block: var(--s-3); border-block: var(--line); margin-bottom: var(--s-3); }
.meta dt { color: var(--grey); } .meta dd { font-weight: 500; }
.pcard .intro { font-size: .93rem; color: #54504b; margin-bottom: var(--s-4); }
.pcard-actions { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); margin-top: auto; flex-wrap: wrap; }
.pcard-actions .btn-sm { flex: none; }
.pcard .verified { position: absolute; inset: auto auto .8rem .8rem; background: rgba(255,255,255,.94); padding: .3rem .6rem; }
.pcard.editorial { background: var(--pale); border-color: transparent; }
.pcard.editorial blockquote { font: italic 500 1.55rem/1.3 var(--font-display); color: var(--plum); margin-bottom: var(--s-4); }
.shortlist { display: inline-flex; align-items: center; gap: .4rem; font-size: .85rem; color: var(--grey); background: none; border: 0; padding: .4rem 0; cursor: pointer; }
.shortlist:hover { color: var(--maroon); }

/* ---------- forms ---------- */
.field { min-width: 0; }
.field .hint { font-size: .8rem; color: var(--grey); margin-top: .35rem; }
.form-block { padding-block: var(--s-5); border-top: var(--line); }
.form-block:first-of-type { border-top: 0; padding-top: 0; }
.form-block > legend, .form-block > h2 { font: 500 1.8rem/1.1 var(--font-display); color: var(--plum); margin-bottom: var(--s-4); float: left; width: 100%; }
.form-block > legend + *, .form-block > h2 + * { clear: both; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); }
.form-grid .full { grid-column: 1 / -1; }
.option-row { display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; padding-block: .5rem; }
.option { display: inline-flex; align-items: center; gap: .55rem; font-size: .93rem; margin: 0; cursor: pointer; }
.check { display: flex; gap: .7rem; align-items: flex-start; font-size: .9rem; font-weight: 400; cursor: pointer; }
.check input { margin-top: .2rem; }
.form-foot { display: flex; align-items: center; gap: var(--s-4); flex-wrap: wrap; margin-top: var(--s-4); }

/* ---------- plans ---------- */
.plan { display: flex; flex-direction: column; background: var(--white); border: var(--line); padding: var(--s-5); }
.plan h3 { margin-bottom: .3rem; }
.plan .for { color: var(--grey); font-size: .9rem; min-height: 3.2em; }
.price { font: 500 clamp(2.6rem, 4vw, 3.4rem)/1 var(--font-display); color: var(--plum); margin-block: var(--s-4) .3rem; }
.price small { font: 400 .85rem var(--font-ui); color: var(--grey); margin-inline-start: .3rem; }
.plan ul { margin-block: var(--s-4) var(--s-5); flex: 1; }
.plan li { position: relative; padding: .55rem 0 .55rem 1.5rem; border-top: var(--line); font-size: .92rem; }
.plan li::before { content: ''; position: absolute; left: .1rem; top: 1.1rem; width: 7px; height: 7px; border: 1px solid var(--brass); transform: rotate(45deg); }
.plan li.off { color: #aaa39b; } .plan li.off::before { border-color: var(--sand); }
.plan.prime { border-color: var(--maroon); border-top: 3px solid var(--maroon); }
.plan.prime .price { color: var(--maroon); }
.plan .prime-note { font: 500 .72rem/1 var(--font-ui); letter-spacing: .16em; text-transform: uppercase; color: var(--maroon); margin-bottom: var(--s-2); display: block; }
.table-scroll { overflow-x: auto; border: var(--line); background: var(--white); }
.compare { width: 100%; min-width: 640px; border-collapse: collapse; font-size: .93rem; }
.compare th, .compare td { padding: 1rem 1.2rem; text-align: center; border-bottom: var(--line); }
.compare th:first-child, .compare td:first-child { text-align: start; font-weight: 500; }
.compare thead th { font: 500 1.5rem var(--font-display); color: var(--plum); background: var(--pale); }
.compare thead th.prime, .compare td.prime { background: #f6eef0; }
.compare tr:last-child td { border-bottom: 0; }
.compare .on { color: var(--maroon); font-weight: 600; } .compare .off { color: #bdb6ae; }

/* ---------- disclosure ---------- */
.accordion details { border-bottom: var(--line); }
.accordion details:first-child { border-top: var(--line); }
.accordion summary { display: flex; justify-content: space-between; align-items: center; gap: 1rem; list-style: none; cursor: pointer; padding: 1.2rem 0; font: 500 1.35rem/1.25 var(--font-display); color: var(--plum); }
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary::after { content: '+'; flex: none; font: 300 1.7rem/1 var(--font-ui); color: var(--maroon); transition: transform .25s; }
.accordion details[open] summary::after { transform: rotate(45deg); }
.accordion details > :not(summary) { padding-bottom: 1.3rem; max-width: 62ch; color: #54504b; }

/* ---------- list rows (interests, shortlisted, activity) ---------- */
.prow { display: grid; grid-template-columns: 84px minmax(0, 1fr) auto; gap: var(--s-4); align-items: center; padding: var(--s-4) 0; border-bottom: var(--line); }
.prow:first-child { border-top: var(--line); }
.prow > .img-box { width: 84px; height: 104px; }
.prow h3 { font-size: 1.5rem; margin-bottom: .1rem; }
.prow p { font-size: .9rem; color: var(--grey); }
.prow .acts { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; justify-content: flex-end; }
.state { display: inline-block; font: 500 .72rem/1 var(--font-ui); letter-spacing: .08em; text-transform: uppercase; padding: .4rem .65rem; border: 1px solid; }
.state.pending { color: #8a6f3c; border-color: var(--brass); }
.state.accepted { color: var(--ok); border-color: var(--ok); }
.state.declined { color: var(--grey); border-color: var(--sand); }
.state.mutual { color: #fff; background: var(--maroon); border-color: var(--maroon); }

/* ---------- footer ---------- */
.site-footer { border-top: var(--line); background: var(--pale); padding-block: var(--s-7) var(--s-4); }
.footer-grid { display: grid; grid-template-columns: 1.5fr repeat(3, 1fr); gap: var(--s-6); padding-bottom: var(--s-6); }
.site-footer h4 { font: 500 .74rem/1 var(--font-ui); letter-spacing: .18em; text-transform: uppercase; color: var(--grey); margin-bottom: var(--s-4); }
.site-footer li { margin-bottom: .55rem; }
.site-footer li a { color: var(--ink); font-size: .93rem; } .site-footer li a:hover { color: var(--maroon); }
.site-footer .statement { max-width: 32ch; color: #54504b; margin-block: var(--s-3) 0; font: italic 500 1.25rem/1.4 var(--font-display); }
.footer-base { display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--s-3); padding-top: var(--s-4); border-top: var(--line); font-size: .82rem; color: var(--grey); }

/* ---------- monogram introductions (photo-free profile cards) ---------- */
.mono { position: relative; display: grid; place-items: center; overflow: hidden; isolation: isolate; color: var(--ivory); background-color: var(--maroon);
  background-image: linear-gradient(45deg, rgba(180,154,105,.2) 1px, transparent 1px), linear-gradient(-45deg, rgba(180,154,105,.2) 1px, transparent 1px); background-size: 38px 38px; }
.mono::before { content: ''; position: absolute; inset: 11% 16% 0; border: 1px solid var(--brass); border-bottom: 0; border-radius: 999px 999px 0 0; background: rgba(57,37,45,.28); z-index: -1; transition: background .4s, border-color .4s; }
.mono.tone-plum { background-color: var(--plum); }
.mono.tone-terracotta { background-color: var(--terracotta); }
.mono.tone-terracotta::before { background: rgba(107,38,56,.22); }
.mono .initial { font: italic 500 clamp(6rem, 11vw, 9.5rem)/1 var(--font-display); color: var(--ivory); transform: translateY(8%); }
.mono .lock { position: absolute; inset: auto 0 0; padding: .8rem 1rem; text-align: center; font: 500 .72rem/1.3 var(--font-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--ivory); background: rgba(57,37,45,.55); }
a.mono:hover::before { background: rgba(57,37,45,.1); border-color: var(--ivory); }
.pcard .mono + .pcard-body { border-top: 0; }

/* ---------- traditional framed introductions ---------- */
.intro-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5); }
.icard { position: relative; text-align: center; background: var(--white); border: var(--line); padding: var(--s-5) var(--s-5) var(--s-5); transition: border-color .3s; }
.icard::before { content: ''; position: absolute; inset: 8px; border: 1px solid var(--sand); pointer-events: none; transition: border-color .3s; }
.icard:hover, .icard:hover::before { border-color: var(--brass); }
.tframe { display: block; width: 118px; margin: 0 auto var(--s-4); padding: 5px; border: 1px solid var(--brass); border-radius: 999px 999px 4px 4px; background: var(--ivory); }
.tframe-in { display: grid; place-items: center; aspect-ratio: 3 / 4; overflow: hidden; border-radius: 999px 999px 2px 2px; outline: 1px solid var(--maroon); outline-offset: -1px; background: var(--maroon); color: var(--ivory); }
.tframe-in img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; }
.tframe-in .initial { font: italic 500 4.4rem/1 var(--font-display); }
.icard h3 { font-size: 1.8rem; margin-bottom: .2rem; }
.icard .where { color: var(--grey); font-size: .9rem; }
.icard .rule { max-width: 150px; margin: var(--s-3) auto; }
.icard .facts { font-size: .92rem; color: var(--ink); margin-bottom: var(--s-3); }
.icard .intro { color: #54504b; font-size: .93rem; margin-bottom: var(--s-4); }
.icard .pcard-actions { justify-content: center; border-top: 0; padding-top: 0; gap: var(--s-4); }

/* ---------- biodata-style introductions ---------- */
.biodata-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5); }
.bcard { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: var(--s-5); align-items: center; padding: var(--s-5); background: var(--white); border: var(--line); border-top: 3px solid var(--maroon); transition: border-color .3s, box-shadow .3s; }
.bcard:hover { border-color: var(--brass); border-top-color: var(--maroon); box-shadow: var(--shadow); }
.oval { display: block; width: 170px; padding: 6px; border: 1px solid var(--brass); border-radius: 50%; background: var(--ivory); }
.oval span { display: block; aspect-ratio: 3 / 4; overflow: hidden; border-radius: 50%; outline: 1px solid var(--maroon); outline-offset: -1px; }
.oval img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 15%; }
.bcard .tagline { font: 500 .72rem/1 var(--font-ui); letter-spacing: .16em; text-transform: uppercase; color: var(--terracotta); margin-bottom: .6rem; display: block; }
.bcard h3 { font-size: 2rem; margin-bottom: .2rem; }
.bcard .where { color: var(--grey); font-size: .92rem; margin-bottom: var(--s-3); }
.bcard .quote { font: italic 500 1.25rem/1.35 var(--font-display); color: var(--plum); margin-bottom: var(--s-3); }
.bcard .meta { margin-bottom: var(--s-4); }
.bcard .pcard-actions { justify-content: flex-start; gap: var(--s-4); border-top: 0; padding-top: 0; }
.invite-band { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; gap: var(--s-5); flex-wrap: wrap; padding: var(--s-5); background: var(--plum); color: var(--ivory); }
.invite-band h3 { color: var(--ivory); margin: 0 0 .3rem; font-size: 1.8rem; }
.invite-band p { color: #d9cdc5; margin: 0; font-size: .95rem; }