/* Generated by tools/sync-shared.js from styles/site.css. Edit the source. */
@font-face{font-family:"DM Serif Display";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/dm-serif-display-latin-400-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Lora";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/lora-latin-400-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Lora";font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/lora-latin-600-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Lora";font-style:italic;font-weight:400;font-display:swap;src:url(/fonts/lora-latin-400-italic.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* Shared accessibility helpers (all sites) */
.skip-link{position:absolute;left:.5rem;top:-4rem;z-index:100;padding:.6rem 1rem;background:#fff;color:#000;font-weight:700;border:2px solid #000;text-decoration:none}
.skip-link:focus{top:.5rem}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.table-wrap{position:relative;overflow-x:auto;max-width:100%}
img{max-width:100%;height:auto}
main:focus{outline:none}
.photo-credit{font-size:.8rem;opacity:.85;margin:.3rem 0 0}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}

/* Coitus Coach: editorial journal. 60 ivory / 30 plum / 10 rose. */
:root {
  --ivory: #fbf6f1;
  --blush: #f3e3e6;
  --plum: #4a2545;
  --plum-soft: #6b4565;
  --rose: #b8456b;
  --text: #2e1d2b;
  --display: "DM Serif Display", Georgia, "Times New Roman", serif;
  --serif: "Lora", Georgia, "Times New Roman", serif;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--ivory); color: var(--text); font: 400 1.1rem/1.75 var(--serif); }
a { color: var(--rose); text-underline-offset: 3px; }
a:hover { color: var(--plum); }
:focus-visible { outline: 2px solid var(--plum); outline-offset: 3px; }
h1, h2, h3 { font-family: var(--display); font-weight: 400; line-height: 1.15; color: var(--plum); }
.kicker { font-family: var(--serif); font-size: .8rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--rose); margin: 0 0 .4rem; }

.sale-banner { background: var(--plum); color: var(--ivory); }
.sale-banner__inner { margin: 0 auto; max-width: 70rem; padding: .5rem 1rem; text-align: center; font-size: .92rem; }
.sale-banner__domain { font-family: var(--display); font-weight: 400; font-size: 1.05rem; margin-right: .35rem; }
.sale-banner__text { margin-right: .4rem; }
.sale-banner__link { color: var(--ivory); font-weight: 600; text-decoration-color: #e79ab5; text-decoration-thickness: 2px; white-space: nowrap; }
.sale-banner__link:hover, .sale-banner__link:focus-visible { color: #ffd6e4; outline-color: var(--ivory); }

.masthead { text-align: center; padding: 1.75rem 1rem 0; border-bottom: 3px double var(--plum); max-width: 70rem; margin: 0 auto; }
.masthead__title { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; font-family: var(--display); font-size: clamp(2.2rem, 8vw, 3.6rem); color: var(--plum); line-height: 1; }
.masthead__dek { font-style: italic; margin: .5rem 0 .75rem; font-size: .95rem; color: var(--plum-soft); }
.masthead__nav { border-top: 1px solid var(--plum); }
.masthead__nav ul { list-style: none; margin: 0; padding: .45rem 0; display: flex; flex-wrap: wrap; justify-content: center; gap: .2rem 1.75rem; }
.masthead__nav a { color: var(--plum); text-decoration: none; font-size: .95rem; letter-spacing: .05em; padding: .2rem 0; display: inline-block; }
.masthead__nav a[aria-current="page"] { color: var(--rose); border-bottom: 2px solid var(--rose); }

.cover { max-width: 70rem; margin: 0 auto; padding: 2.5rem 1rem; display: grid; gap: 2rem; align-items: center; }
@media (min-width: 56rem) { .cover { grid-template-columns: 1.3fr 1fr; } }
.cover h1 { font-size: clamp(2.3rem, 7vw, 4rem); margin: 0 0 1rem; }
.cover h1 em { color: var(--rose); }
.cover__dek { font-size: 1.2rem; }
.cover__art img, .plate img { display: block; width: 100%; height: auto; }
.cover__art { border: 1px solid var(--plum); padding: .6rem; background: #fff; }
.plate { margin: 1.5rem 0 2rem; border: 1px solid var(--plum); padding: .5rem; background: #fff; }
.link-arrow { font-weight: 600; font-size: 1.1rem; }
.link-arrow::after { content: " →"; }

.columns { max-width: 70rem; margin: 0 auto; padding: 1rem; }
.rule-heading { font-size: 1rem; font-family: var(--serif); font-weight: 600; text-transform: uppercase; letter-spacing: .14em; border-top: 1px solid var(--plum); border-bottom: 1px solid var(--plum); padding: .4rem 0; }
.columns__grid { display: grid; gap: 1.5rem 2.5rem; }
@media (min-width: 56rem) { .columns__grid { grid-template-columns: 2fr 1fr 1fr; } .story + .story { border-left: 1px solid #dcc7cf; padding-left: 2rem; } }
.story h3, .story h2 { font-size: 1.6rem; margin: .2rem 0 .5rem; }
.story--lead h3 { font-size: 2.2rem; }
.story h3 a, .story h2 a { color: var(--plum); text-decoration: none; }
.story h3 a:hover, .story h2 a:hover { text-decoration: underline; }
.story--row { border-top: 1px solid #dcc7cf; padding: 1.25rem 0; }
.pull { max-width: 46rem; margin: 3rem auto; padding: 0 1rem; text-align: center; }
.pull blockquote { margin: 0; font-family: var(--display); font-size: clamp(1.8rem, 5vw, 2.6rem); color: var(--plum); line-height: 1.25; }
.pull blockquote p { margin: 0 0 .75rem; }
.pull footer { font-family: var(--serif); font-size: 1rem; font-style: italic; }
.starter-teaser { max-width: 46rem; margin: 0 auto 3rem; background: var(--blush); padding: 2rem; text-align: center; }
@media (max-width: 48rem) { .starter-teaser { margin: 0 1rem 3rem; } }
.button { display: inline-block; background: var(--plum); color: var(--ivory); border: 0; padding: .7rem 1.4rem; font: 600 1rem var(--serif); letter-spacing: .03em; text-decoration: none; cursor: pointer; }
.button:hover { background: var(--rose); color: #fff; }

.article-wrap { max-width: 44rem; margin: 0 auto; padding: 1.5rem 1rem 3rem; }
.article-wrap--wide { max-width: 60rem; }
.breadcrumbs ol { list-style: none; padding: 0; margin: 0 0 1.25rem; display: flex; flex-wrap: wrap; gap: .4rem; font-size: .9rem; font-style: italic; }
.breadcrumbs li + li::before { content: "/"; margin-right: .4rem; color: var(--rose); }
.headline h1 { font-size: clamp(2.3rem, 7vw, 3.6rem); margin: .25rem 0 .75rem; }
.dek { font-size: 1.25rem; font-style: italic; color: var(--plum-soft); }
.byline { font-size: .9rem; border-top: 1px solid #dcc7cf; padding-top: .6rem; }
.takeaway { background: var(--blush); border-left: 4px solid var(--rose); padding: 1rem 1.25rem; margin: 2rem 0; }
.takeaway h2 { font-family: var(--serif); font-size: .85rem; font-weight: 600; text-transform: uppercase; letter-spacing: .14em; color: var(--rose); margin: 0 0 .3rem; }
.takeaway p:last-child { margin-bottom: 0; }
.prose--dropcap > p:first-of-type::first-letter { font-family: var(--display); float: left; font-size: 4.2rem; line-height: .8; padding: .35rem .5rem 0 0; color: var(--rose); }
.prose h2 { font-size: 1.9rem; margin-top: 2.5rem; }
.prose blockquote { border-left: 3px solid var(--rose); margin: 1.5rem 0; padding: .25rem 0 .25rem 1.25rem; font-family: var(--display); font-size: 1.5rem; color: var(--plum); }
.prose table { border-collapse: collapse; width: 100%; min-width: 30rem; font-size: 1rem; }
.prose th, .prose td { border-bottom: 1px solid #dcc7cf; padding: .55rem .5rem; text-align: left; vertical-align: top; }
.prose thead th { border-bottom: 2px solid var(--plum); font-weight: 600; color: var(--plum); }
.table-wrap { margin: 1.25rem 0; }
.care-note { font-style: italic; font-size: .98rem; background: #fff; border: 1px solid #dcc7cf; padding: .8rem 1rem; }
.sources { font-size: .95rem; margin-top: 2rem; }
.sources h2 { font-size: 1.4rem; }
.readnext { border-top: 3px double var(--plum); margin-top: 2.5rem; padding-top: 1rem; }
.readnext h2 { font-size: 1.5rem; }
.readnext__plain { list-style: none; padding: 0; font-size: 1.2rem; }
.qa { border-top: 1px solid #dcc7cf; padding: .75rem 0; }
.qa h2 { font-size: 1.55rem; }

.filters { display: grid; gap: 1rem; background: #fff; border: 1px solid var(--plum); padding: 1.25rem; align-items: end; }
@media (min-width: 44rem) { .filters { grid-template-columns: 1fr 1fr auto; } }
.filters label { display: block; font-weight: 600; margin-bottom: .3rem; }
.filters select { width: 100%; font: inherit; padding: .55rem; border: 1px solid var(--plum); background: var(--ivory); color: var(--text); }
.count { font-style: italic; margin: 1.25rem 0 .5rem; }
.cards { list-style: none; padding: 0; display: grid; gap: 1rem; }
@media (min-width: 44rem) { .cards { grid-template-columns: 1fr 1fr; } }
.card { background: #fff; border: 1px solid #dcc7cf; border-top: 4px solid var(--plum); padding: 1rem 1.25rem; }
.card--deeper { border-top-color: var(--rose); }
.card__meta { font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: var(--plum-soft); margin: 0 0 .4rem; }
.card__text { font-family: var(--display); font-size: 1.35rem; line-height: 1.35; color: var(--plum); margin: 0; }
.lost { text-align: center; }

.colophon { background: var(--plum); color: var(--ivory); margin-top: 3rem; }
.colophon__inner { max-width: 70rem; margin: 0 auto; padding: 2.5rem 1rem; display: grid; gap: 1.5rem; }
@media (min-width: 56rem) { .colophon__inner { grid-template-columns: 1.3fr 1fr 1.3fr; } }
.colophon a { color: #ffd6e4; }
.colophon ul { list-style: none; margin: 0; padding: 0; }
.colophon li { margin: .3rem 0; }
.colophon__title { font-family: var(--display); font-size: 2rem; margin: 0; }
.footer-sale { border: 1px solid #e79ab5; padding: 1rem; margin-top: 0; }
.footer-legal { font-size: .88rem; }