/* ==========================================================================
   Marcella — product content stylesheet (mc-content.css)
   Contract v1 · stylesheet release 1.8 · 2026-10-30

   Its own file in the child theme folder, loaded by mc-content-enqueue.php, which versions it
   by file date: replacing this file restyles every page built since v1 at once (then clear
   the WP Rocket cache). Styles only the classes in references/html-contract.md, all prefixed
   mc- so the older marsella-* rules in style.css never collide. Never declares a font: the
   theme's default font (IRANSans) is used for Persian and Latin alike.

   A. Tokens
   B. Content base, headings, links, text roles
   C. Opening: hero, dossier, glance, jump links
   D. Blotter strips and widgets (accords, votes, seasons, day/night, performance, vote distributions)
   E. Text blocks: lead, quote, scene, aside, why/result, glossary
   F. Groups: did-you-know, hero box, note, person, fit, pros/cons
   G. Lists: dot, check, alt, pro, con, steps, grid, pyramid (gold key notes), timeline
   H. Tables and comparison cards (with the similarity meter)
   I. Verdict band, blog cards
   J. FAQ
   K. Images: figures (tall, product), perfumer rows
   L. Sections and tones
   M. Wide screens: reading column + sticky jump list
   N. End boxes (rebuilt marsella_* snippets; legacy restyle for the others)
   O. Short description
   P. Phones and reduced motion
   ========================================================================== */

/* A. Tokens -------------------------------------------------------------- */
:root {
    --mc-navy: #1A2B4A;          /* Marcella navy: headings, strong text, the verdict band */
    --mc-navy-2: #2A3D63;
    --mc-text: #3B4252;          /* body text, 10:1 on white */
    --mc-muted: #626977;         /* secondary text, 5.6:1 */
    --mc-gold: #C5A66A;          /* brand gold: rules, marks, strips */
    --mc-gold-deep: #9C7A3C;
    --mc-gold-text: #7A5B22;     /* gold for small text and links, 6.3:1 */
    --mc-gold-soft: rgba(197, 166, 106, 0.35);
    --mc-ivory: #F8F3E9;
    --mc-ivory-2: #FCFAF5;
    --mc-line: #E9E2D3;
    --mc-line-gold: #E2D2AE;
    --mc-strip: #F1EADB;         /* blotter paper */
    --mc-dip: linear-gradient(to left, #9C7A3C 0%, #C5A66A 55%, #E3CC95 100%);   /* gold dip, dark where it starts (right) */
    --mc-r-lg: 18px;
    --mc-r: 12px;
    --mc-r-sm: 8px;
}

/* B. Content base -------------------------------------------------------- */
.mc-content {
    direction: rtl;
    text-align: right;
    font-size: 1.0625rem;
    line-height: 1.95;
    color: var(--mc-text);
    margin: 0 auto;
}
.mc-content *,
.mc-content *::before,
.mc-content *::after { box-sizing: border-box; }
.mc-content p {
    font-size: 1em;
    line-height: 1.95;
    color: var(--mc-text);
    margin: 0 0 1.05em;
    text-align: right;           /* never justified: Persian justification opens holes between words */
}
.mc-content p:last-child { margin-bottom: 0; }
.mc-content h2,
.mc-content h3 {
    color: var(--mc-navy);
    font-weight: 700;
    line-height: 1.55;
    text-align: right;
    text-wrap: balance;
    letter-spacing: 0;
    text-transform: none;
}
.mc-content h2 {
    font-size: 1.6rem;
    margin: 0 0 0.75em;
    position: relative;
}
/* a single gold droplet marks every section heading (the perfume drop, not a generic rule) */
.mc-content h2::before {
    content: "";
    display: block;
    width: 11px;
    height: 11px;
    margin-bottom: 0.9rem;
    background: var(--mc-gold);
    border-radius: 0 50% 50% 50%;
    transform: rotate(45deg);
}
.mc-content h3 {
    font-size: 1.2rem;
    margin: 2em 0 0.55em;
}
.mc-content h2 + h3 { margin-top: 0.5em; }
.mc-content strong { color: var(--mc-navy); font-weight: 700; }
.mc-content .mc-mark {
    color: var(--mc-navy);
    font-weight: 700;
    background: linear-gradient(transparent 60%, rgba(197, 166, 106, 0.34) 60%);
    padding: 0 2px;
}
.mc-content a {
    color: var(--mc-gold-text);
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: var(--mc-gold-soft);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.35em;
    transition: color 0.2s ease, text-decoration-color 0.2s ease;
}
.mc-content a:hover { color: var(--mc-navy); text-decoration-color: var(--mc-gold); }
.mc-content a:focus-visible,
.mc-content summary:focus-visible {
    outline: 2px solid var(--mc-navy);
    outline-offset: 3px;
    border-radius: 4px;
}
.mc-content bdi { unicode-bidi: isolate; }
.mc-content bdi.mc-nw { white-space: nowrap; }
.mc-content ul,
.mc-content ol { margin: 0 0 1.2em; padding: 0; list-style: none; }
.mc-content li { margin: 0; padding: 0; list-style: none; }
/* themes style `.entry-content ul li` (0,1,2): match that weight; component rules (0,2,1) still win over this */
.mc-content ul > li,
.mc-content ol > li { margin: 0; list-style: none; }
.mc-content .mc-sep {             /* separators kept in the text for search and screen readers, not shown */
    display: inline-block;
    width: 0;
    overflow: hidden;
    white-space: pre;
    vertical-align: bottom;
    color: transparent;
}
.mc-content .mc-sr,
.mc-short .mc-sr {
    position: absolute !important;
    width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.mc-content a[target="_blank"]::after {   /* external link: a small arrow drawn in CSS, no glyph */
    content: "";
    display: inline-block;
    width: 0.42em;
    height: 0.42em;
    margin-inline-start: 0.35em;
    border: solid currentColor;
    border-width: 1.5px 1.5px 0 0;
    transform: rotate(-90deg);
    vertical-align: 0.2em;
}
.mc-content .mc-label {
    display: inline-block;
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1.6;
    color: var(--mc-gold-text);
    margin: 0 0 0.7rem;
}

/* C. Opening -------------------------------------------------------------- */
.mc-content .mc-hero {
    padding: 0.4rem 0 0.6rem;
    margin: 0 0 1.4rem;
}
.mc-content .mc-hero h2.mc-title {
    font-size: 2rem;
    line-height: 1.5;
    margin: 0;
}
.mc-content .mc-hero h2.mc-title::before { display: none; }
.mc-content p.mc-latin {
    margin: 0.35rem 0 0;
    font-size: 1.02rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: var(--mc-gold-text);
    direction: ltr;
    text-align: right;
}
.mc-content .mc-hook {
    margin: 1.5rem 0 0;
    padding-inline-start: 1.25rem;
    border-inline-start: 2px solid var(--mc-gold);
    max-width: 44rem;
}
.mc-content .mc-hook p {
    font-size: 1.18em;
    line-height: 1.95;
    font-weight: 500;
    color: var(--mc-navy);
}
.mc-content p.mc-intro { margin: 0 0 1.6rem; max-width: 44rem; }

.mc-content .mc-dossier {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: 0;
    background: var(--mc-ivory);
    border-radius: var(--mc-r-lg);
    margin: 1.6rem 0;
    overflow: hidden;
}
.mc-content .mc-dossier > * { margin: 0; padding: 1.6rem 1.7rem; }
.mc-content .mc-dossier > * + * { border-inline-start: 1px solid var(--mc-line-gold); }
.mc-content .mc-dossier > .mc-widget,
.mc-content .mc-dossier > .mc-glance { background: transparent; border: 0; border-radius: 0; margin: 0; }
.mc-content .mc-glance {
    background: var(--mc-ivory);
    border-radius: var(--mc-r-lg);
    padding: 1.5rem 1.7rem;
    margin: 1.6rem 0;
}
.mc-content .mc-dossier .mc-glance { background: transparent; border-radius: 0; }
.mc-content .mc-glance ul { margin: 0; display: grid; gap: 0.55rem; }
.mc-content .mc-glance li {
    position: relative;
    padding-inline-start: 1.15rem;
    font-size: 0.97rem;
    line-height: 1.8;
}
.mc-content .mc-glance li::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    top: 0.72em;
    width: 6px;
    height: 6px;
    border-radius: 0 50% 50% 50%;
    transform: rotate(45deg);
    background: var(--mc-gold);
}

.mc-content .mc-jump {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem;
    margin: 1.4rem 0 0.4rem;
    padding: 0.7rem 0.9rem;
    border: 1px solid var(--mc-line);
    border-radius: var(--mc-r);
    background: #fff;
}
.mc-content .mc-jump__label {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--mc-gold-text);
    margin-inline-end: 0.3rem;
}
.mc-content .mc-jump a {
    white-space: nowrap;
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.6;
    color: var(--mc-navy);
    text-decoration: none;
    border-radius: 999px;
    padding: 0.35rem 0.85rem;
    background: var(--mc-ivory-2);
    border: 1px solid var(--mc-line);
}
.mc-content .mc-jump a:hover { border-color: var(--mc-gold); color: var(--mc-gold-text); }

/* D. Blotter strips and widgets ------------------------------------------ */
/* A strip is a perfumer's blotter: ivory paper with one tapered end; the gold "dip" shows strength. */
.mc-content .mc-widget {
    background: #fff;
    border: 1px solid var(--mc-line);
    border-radius: var(--mc-r-lg);
    padding: 1.4rem 1.6rem;
    margin: 1.6rem 0;
}
.mc-content p.mc-wtitle {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--mc-navy);
    margin: 0 0 1rem;
}
.mc-content p.mc-wnote {
    font-size: 0.82rem;
    color: var(--mc-muted);
    margin: 0.9rem 0 0;
}
.mc-content .mc-bars { margin: 0; display: grid; gap: 0.8rem; }
.mc-content .mc-bar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: baseline;
    column-gap: 0.8rem;
    row-gap: 0.3rem;
}
.mc-content .mc-bar__name { font-size: 0.93rem; font-weight: 600; color: var(--mc-navy); line-height: 1.6; }
.mc-content .mc-bar__name bdi { font-size: 0.8rem; font-weight: 500; color: var(--mc-muted); margin-inline-start: 0.25rem; }
.mc-content .mc-bar__val { font-size: 0.82rem; font-weight: 700; color: var(--mc-gold-text); white-space: nowrap; }
.mc-content .mc-bar__track,
.mc-content .mc-gauge__track {
    grid-column: 1 / -1;
    display: block;
    position: relative;
    height: 9px;
    background: var(--mc-strip);
    /* tapered tip at the end of the strip (left in RTL), round where it is held */
    border-radius: 999px 2px 2px 999px;
    clip-path: polygon(0 50%, 10px 0, 100% 0, 100% 100%, 10px 100%);
    overflow: hidden;
}
.mc-content .mc-bar__fill,
.mc-content .mc-gauge__fill {
    display: block;
    height: 100%;
    margin-inline-start: 0;        /* RTL: grows from the right, where the strip was dipped */
    background: var(--mc-dip);
    box-shadow: 0 1px 6px rgba(156, 122, 60, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.35);
    border-radius: 999px 0 0 999px;
    font-size: 0;
    color: transparent;
    line-height: 0;
}
.mc-content .mc-accords .mc-bars { gap: 0.65rem; }
/* the accords' long tail: one quiet line instead of more strips */
.mc-content p.mc-accords__more { margin: 0.95rem 0 0; font-size: 0.86rem; line-height: 1.8; color: var(--mc-text); }
.mc-content .mc-accords__k { color: var(--mc-gold-text); font-weight: 600; margin-inline-end: 0.2rem; }

/* seasons: four small vials filling from the bottom */
.mc-content .mc-seasons > .mc-bars {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
    align-items: end;
    max-width: 26rem;
}
.mc-content .mc-season {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
}
.mc-content .mc-season__col {
    position: relative;
    display: flex;
    align-items: flex-end;
    width: 34px;
    height: 112px;
    background: var(--mc-strip);
    border-radius: 14px 14px 9px 9px;
    overflow: hidden;
    box-shadow: inset 0 0 0 1px rgba(156, 122, 60, 0.12);
}
.mc-content .mc-season__fill {
    display: block;
    width: 100%;
    background: linear-gradient(to top, #9C7A3C 0%, #C5A66A 60%, #E3CC95 100%);
    box-shadow: 0 -1px 6px rgba(156, 122, 60, 0.35);
    border-radius: 6px 6px 0 0;
    font-size: 0;
    color: transparent;
    line-height: 0;
}
.mc-content .mc-season__val { font-size: 0.85rem; font-weight: 700; color: var(--mc-gold-text); line-height: 1.4; }
/* the most-voted season stands out; the others step back a little */
.mc-content .mc-season:not(.is-key) .mc-season__fill { opacity: 0.72; }
.mc-content .mc-season.is-key .mc-season__col { box-shadow: inset 0 0 0 1px rgba(156, 122, 60, 0.3), 0 0 0 3px #fff, 0 0 0 4px var(--mc-gold-soft); }
.mc-content .mc-season.is-key .mc-season__name { color: var(--mc-gold-text); }
.mc-content .mc-season__name { font-size: 0.88rem; color: var(--mc-navy); font-weight: 600; line-height: 1.4; }
.mc-content .mc-daynight { margin-top: 1.4rem; padding-top: 1.2rem; border-top: 1px solid var(--mc-line); max-width: 26rem; }
.mc-content .mc-widget > .mc-daynight:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.mc-content .mc-daynight .mc-wtitle { margin-bottom: 0.4rem; }
.mc-content p.mc-dn__labels {
    display: flex;
    justify-content: space-between;
    font-size: 0.86rem;
    font-weight: 600;
    margin: 0 0 0.35rem;
}
.mc-content .mc-dn__day { color: var(--mc-gold-text); }
.mc-content .mc-dn__night { color: var(--mc-navy); }
.mc-content .mc-daynight .mc-bar__track {
    clip-path: none;
    border-radius: 999px;
    background: var(--mc-navy);
    height: 10px;
}
.mc-content .mc-daynight .mc-bar__fill { border-radius: 999px 0 0 999px; box-shadow: none; }

/* performance gauges (longevity, sillage): the same strip, with the word instead of a number */
.mc-content .mc-perf { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem 2rem; }
.mc-content .mc-gauge {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: baseline;
    column-gap: 0.8rem;
    row-gap: 0.35rem;
}
.mc-content .mc-gauge__k { font-weight: 700; color: var(--mc-navy); font-size: 0.95rem; }
.mc-content .mc-gauge__v { grid-row: 1; grid-column: 2; text-align: left; font-size: 0.88rem; font-weight: 600; color: var(--mc-gold-text); }
.mc-content .mc-gauge__track { height: 11px; }

/* longevity / sillage with the users' answers: the level word as a pill, one small vial per answer */
.mc-content .mc-perf:has(.mc-dist) { gap: 1.6rem 2.4rem; }
.mc-content .mc-dist { min-width: 0; }
.mc-content p.mc-dist__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.8rem;
    margin: 0 0 0.9rem;
}
.mc-content .mc-dist__k { font-weight: 700; color: var(--mc-navy); font-size: 0.95rem; }
.mc-content .mc-dist__lvl {
    font-weight: 700;
    font-size: 0.86rem;
    color: var(--mc-gold-text);
    background: var(--mc-ivory-2);
    border: 1px solid var(--mc-line-gold);
    border-radius: 999px;
    padding: 0.1rem 0.8rem;
}
.mc-content ul.mc-dist__cols {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    align-items: start;            /* vials line up even when an answer's name wraps */
    gap: 0.5rem;
    margin: 0;
}
.mc-content .mc-dist__c { display: flex; flex-direction: column; align-items: center; gap: 0.3rem; text-align: center; min-width: 0; }
.mc-content .mc-dist__bar {
    display: flex;
    align-items: flex-end;
    width: 100%;
    max-width: 30px;
    height: 64px;
    background: var(--mc-strip);
    border-radius: 9px 9px 5px 5px;
    overflow: hidden;
    box-shadow: inset 0 0 0 1px rgba(156, 122, 60, 0.12);
}
.mc-content .mc-dist__fill {
    display: block;
    width: 100%;
    background: linear-gradient(to top, #9C7A3C 0%, #C5A66A 60%, #E3CC95 100%);
    border-radius: 4px 4px 0 0;
    opacity: 0.5;
    font-size: 0;
    color: transparent;
    line-height: 0;
}
.mc-content .mc-dist__c.is-key .mc-dist__fill { opacity: 1; box-shadow: 0 -1px 6px rgba(156, 122, 60, 0.35); }
.mc-content .mc-dist__v { font-size: 0.8rem; font-weight: 700; color: var(--mc-gold-text); line-height: 1.3; }
.mc-content .mc-dist__n { font-size: 0.74rem; color: var(--mc-muted); line-height: 1.45; }
.mc-content .mc-dist__c.is-key .mc-dist__n { color: var(--mc-navy); font-weight: 600; }

/* E. Text blocks ---------------------------------------------------------- */
.mc-content p.mc-lead {
    font-size: 1.1em;
    line-height: 1.9;
    color: var(--mc-navy-2);
}
.mc-content .mc-quote {
    margin: 2rem 0;
    padding: 0.2rem 1.4rem 0.2rem 0;
    padding-inline: 1.4rem 0;
    border: 0;
    border-inline-start: 3px solid var(--mc-gold);
    background: none;
    quotes: none;
}
.mc-content .mc-quote p {
    font-size: 1.22em;
    line-height: 1.85;
    font-weight: 600;
    font-style: normal;
    color: var(--mc-navy);
}
.mc-content p.mc-aside {
    background: var(--mc-ivory-2);
    border: 1px solid var(--mc-line-gold);
    border-radius: var(--mc-r);
    padding: 1rem 1.2rem;
    margin: 1.4rem 0;
    font-size: 0.97em;
}
.mc-content p.mc-why {
    color: var(--mc-muted);
    font-size: 0.97em;
    margin-bottom: 1.1rem;
}
.mc-content p.mc-result {
    margin: 1.2rem 0 1.6rem;
    padding: 0.95rem 1.2rem;
    background: var(--mc-ivory);
    border-radius: var(--mc-r);
    color: var(--mc-navy);
    font-weight: 500;
}

/* scene: the page's one evocative moment (an Iranian-life image of the scent, the perfumer's own picture of it).
   A pause in the reading, not a box: larger, softer type under a gold drop, fading paper behind it. */
.mc-content p.mc-scene {
    position: relative;
    max-width: 38rem;
    margin: 2.4rem auto 2.2rem;
    padding: 1.7rem 1.9rem 1.5rem;
    font-size: 1.12rem;
    line-height: 2.15;
    color: var(--mc-navy-2);
    background: linear-gradient(180deg, var(--mc-ivory) 0%, rgba(248, 243, 233, 0) 100%);
    border-top: 1px solid var(--mc-line-gold);
    border-radius: var(--mc-r-lg) var(--mc-r-lg) 0 0;
    text-wrap: pretty;
}
.mc-content p.mc-scene::before {
    content: "";
    position: absolute;
    top: -6px;
    inset-inline-start: 50%;
    width: 11px;
    height: 11px;
    background: var(--mc-gold);
    border-radius: 0 50% 50% 50%;
    transform: translateX(50%) rotate(45deg);
    box-shadow: 0 0 0 4px #fff;
}

/* glossary: slim pills under the paragraph that uses the term; open on tap */
.mc-content .mc-terms {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: -0.2rem 0 1.4rem;
}
.mc-content .mc-term {
    flex: 0 1 auto;
    max-width: 100%;
    border: 1px solid var(--mc-line-gold);
    border-radius: 999px;
    background: #fff;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}
.mc-content .mc-term[open] {
    flex: 1 1 100%;
    border-radius: var(--mc-r);
    background: var(--mc-ivory-2);
}
.mc-content .mc-term > summary {
    list-style: none;
    cursor: pointer;
    display: block;
    position: relative;
    padding: 0.32rem 0.9rem;
    padding-inline-end: 2rem;
    font-size: 0.86rem;
    line-height: 1.7;
}
.mc-content .mc-term > summary::-webkit-details-marker { display: none; }
.mc-content .mc-term > summary::after {      /* chevron drawn in CSS, points down, up when open */
    content: "";
    position: absolute;
    inset-inline-end: 0.9rem;
    top: 50%;
    width: 6px;
    height: 6px;
    margin-top: -5px;
    border: solid var(--mc-gold-text);
    border-width: 0 1.5px 1.5px 0;
    transform: rotate(45deg);
    transition: transform 0.2s ease;
}
.mc-content .mc-term[open] > summary::after { transform: rotate(-135deg); margin-top: -1px; }
.mc-content .mc-term:hover { border-color: var(--mc-gold); }
.mc-content .mc-term__k { color: var(--mc-gold-text); font-weight: 600; margin-inline-end: 0.35rem; }
.mc-content .mc-term__t { color: var(--mc-navy); font-weight: 700; }
.mc-content .mc-term__d { padding: 0 1rem 0.85rem; }
.mc-content .mc-term__d p { font-size: 0.93rem; line-height: 1.85; margin: 0; }

/* F. Groups --------------------------------------------------------------- */
.mc-content details.mc-dyk {
    background: var(--mc-ivory-2);
    border: 1px solid var(--mc-line-gold);
    border-radius: var(--mc-r-lg);
    margin: 1.6rem 0;
}
.mc-content details.mc-dyk > summary {
    list-style: none;
    cursor: pointer;
    display: block;
    position: relative;
    padding: 0.95rem 1.2rem;
    padding-inline-start: calc(1.2rem + 28px + 0.75rem);
}
.mc-content details.mc-dyk > summary::-webkit-details-marker { display: none; }
.mc-content details.mc-dyk .mc-label { margin: 0 0 0.25rem; display: block; }
.mc-content .mc-dyk__q { display: block; font-weight: 700; font-size: 1.04rem; line-height: 1.7; color: var(--mc-navy); }
.mc-content .mc-dyk__a { padding: 0 1.2rem 1.15rem; padding-inline-start: calc(1.2rem + 28px + 0.75rem); }
.mc-content .mc-hero-box {
    background: linear-gradient(160deg, var(--mc-ivory) 0%, #fff 75%);
    border: 1px solid var(--mc-line-gold);
    border-radius: var(--mc-r-lg);
    padding: 1.4rem 1.6rem;
    margin: 1.8rem 0;
}
.mc-content .mc-hero-box h3 { margin-top: 0; }
.mc-content .mc-note {
    background: var(--mc-ivory-2);
    border: 1px solid var(--mc-line);
    border-inline-start: 3px solid var(--mc-gold);
    border-radius: var(--mc-r);
    padding: 1.2rem 1.4rem;
    margin: 1.6rem 0;
}
.mc-content .mc-note h3 { margin-top: 0; font-size: 1.08rem; }
.mc-content .mc-person {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    column-gap: 1.3rem;
    align-items: start;
    margin: 1.8rem 0;
}
.mc-content .mc-person > :not(.mc-person__img) { grid-column: 2; }
.mc-content .mc-person h3 { margin-top: 0.2rem; }
.mc-content .mc-person__img { grid-column: 1; grid-row: 1 / span 6; }
.mc-content .mc-person__img img {
    display: block;
    width: 96px;
    height: 96px;
    object-fit: cover;
    border-radius: 50%;
    box-shadow: 0 0 0 3px #fff, 0 0 0 4px var(--mc-gold);
    margin: 0;
    filter: grayscale(1) contrast(1.04);   /* editorial black-and-white: portraits from different sources match */
}

/* fit: who it suits / who should look elsewhere; pros / cons */
.mc-content .mc-fit,
.mc-content .mc-pc {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    margin: 1.4rem 0 1.6rem;
}
.mc-content .mc-fit__col,
.mc-content .mc-pc__col {
    border-radius: var(--mc-r-lg);
    padding: 1.3rem 1.4rem;
    border: 1px solid var(--mc-line);
    background: #fff;
}
.mc-content .mc-fit__col--yes,
.mc-content .mc-pc__col--pro { border-top: 3px solid var(--mc-gold); }
.mc-content .mc-fit__col--alt,
.mc-content .mc-pc__col--con { background: var(--mc-ivory-2); border-top: 3px solid var(--mc-navy); }
.mc-content .mc-fit__col h3,
.mc-content .mc-pc__col h3 { margin: 0 0 0.8rem; font-size: 1.05rem; }
.mc-content .mc-fit__col .mc-list li,
.mc-content .mc-pc__col .mc-list li { font-size: 0.96rem; }

/* G. Lists ---------------------------------------------------------------- */
.mc-content .mc-list li {
    position: relative;
    padding-inline-start: 1.9rem;
    margin-bottom: 0.8rem;
    line-height: 1.9;
}
.mc-content .mc-list li:last-child { margin-bottom: 0; }
.mc-content .mc-list li::before { content: ""; position: absolute; inset-inline-start: 0.2rem; }
.mc-content .mc-list--dot li { padding-inline-start: 1.3rem; }
.mc-content .mc-list--dot li::before {
    top: 0.78em; width: 6px; height: 6px;
    border-radius: 0 50% 50% 50%; transform: rotate(45deg); background: var(--mc-gold);
}
.mc-content .mc-list--check li::before {
    top: 0.42em; inset-inline-start: 0.45rem; width: 7px; height: 13px;
    border: solid var(--mc-gold-deep); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg);
}
.mc-content .mc-list--alt li::before {
    top: 0.62em; inset-inline-start: 0.35rem; width: 9px; height: 9px;
    border: solid var(--mc-navy); border-width: 0 0 2px 2px; transform: rotate(45deg);
}
.mc-content .mc-list--pro li::before,
.mc-content .mc-list--con li::before {
    top: 0.5em; width: 1.05rem; height: 1.05rem; border-radius: 50%;
    background:
        linear-gradient(var(--mc-c), var(--mc-c)) center / 9px 1.5px no-repeat,
        linear-gradient(var(--mc-c), var(--mc-c)) center / 1.5px 9px no-repeat;
    border: 1px solid var(--mc-c);
}
.mc-content .mc-list--pro li::before { --mc-c: var(--mc-gold-deep); }
/* "before you buy" notes: a calm ring with a point (a note to keep in mind), never a minus sign */
.mc-content .mc-list--con li::before {
    --mc-c: var(--mc-navy-2);
    background: radial-gradient(circle, var(--mc-c) 0 2px, transparent 2.6px);
}

.mc-content .mc-steps { counter-reset: mcstep; }
.mc-content .mc-steps li {
    counter-increment: mcstep;
    position: relative;
    padding-inline-start: 3rem;
    padding-bottom: 1.2rem;
    line-height: 1.9;
}
.mc-content .mc-steps li::before {
    content: counter(mcstep, persian);
    position: absolute; inset-inline-start: 0; top: 0.1rem;
    width: 2rem; height: 2rem; border-radius: 50%;
    background: var(--mc-navy); color: #fff; font-weight: 700; font-size: 0.95rem;
    display: flex; align-items: center; justify-content: center; line-height: 1;
}
.mc-content .mc-steps li::after {
    content: ""; position: absolute; inset-inline-start: calc(1rem - 1px); top: 2.35rem; bottom: 0.2rem;
    width: 2px; background: var(--mc-line-gold);
}
.mc-content .mc-steps li:last-child { padding-bottom: 0; }
.mc-content .mc-steps li:last-child::after { display: none; }

.mc-content .mc-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13.5rem, 1fr));
    gap: 0.9rem;
    margin: 1.2rem 0 1.4rem;
}
.mc-content .mc-grid li {
    background: #fff; border: 1px solid var(--mc-line); border-radius: var(--mc-r);
    padding: 0.95rem 1.1rem; line-height: 1.85; font-size: 0.96rem;
}
/* only the item's own label goes on its line (1.8): a bold term inside the text stays inline */
.mc-content .mc-grid li > strong:first-child,
.mc-content .mc-grid li > .mc-face__img + strong { display: block; margin-bottom: 0.15rem; }
.mc-content .mc-grid .mc-colon { display: none; }
.mc-content .mc-grid li.is-key { background: var(--mc-ivory-2); border-color: var(--mc-line-gold); border-top: 3px solid var(--mc-gold); }

/* campaign faces (1.6): one card per face, the face's own sentence under the name; optional round portrait */
.mc-content .mc-faces { grid-template-columns: repeat(auto-fit, minmax(12.5rem, 1fr)); }
.mc-content .mc-faces li {
    background: var(--mc-ivory-2); border-color: var(--mc-line-gold); border-top: 3px solid var(--mc-gold);
    padding: 1.05rem 1.15rem 1.15rem;
}
.mc-content .mc-faces li > strong:first-child,
.mc-content .mc-faces li > .mc-face__img + strong { color: var(--mc-navy); font-size: 1.02rem; margin-bottom: 0.35rem; }
.mc-content .mc-face__img { display: block; margin-bottom: 0.7rem; }
.mc-content .mc-face__img img {
    display: block; width: 4.25rem; height: 4.25rem; border-radius: 50%; object-fit: cover;
    border: 2px solid #fff; box-shadow: 0 0 0 1px var(--mc-line-gold);
}

/* notes pyramid: the scent's path on the skin, from the first spray to the drydown */
.mc-content .mc-pyramid {
    position: relative;
    margin: 1.6rem 0 1.8rem;
    padding: 0;
}
.mc-content .mc-pyramid::before {        /* the time line joining the three tiers */
    content: "";
    position: absolute;
    inset-inline-start: 11px;
    top: 14px;
    bottom: 14px;
    width: 2px;
    background: linear-gradient(to bottom, #E3CC95, var(--mc-gold-deep));
}
.mc-content .mc-tier {
    position: relative;
    padding-inline-start: 2.6rem;
    margin: 0 0 1.25rem;
}
.mc-content .mc-tier:last-child { margin-bottom: 0; }
.mc-content .mc-tier::before {           /* a drop that grows heavier from top to base */
    content: "";
    position: absolute;
    inset-inline-start: 3px;
    top: 0.45rem;
    width: 18px;
    height: 18px;
    border-radius: 0 50% 50% 50%;
    transform: rotate(45deg);
    background: #fff;
    border: 2px solid var(--mc-gold);
}
.mc-content .mc-tier:nth-child(2)::before { background: #E9D6A8; }
.mc-content .mc-tier:nth-child(3)::before { background: var(--mc-gold-deep); border-color: var(--mc-gold-deep); }
.mc-content .mc-tier__k { display: block; font-size: 0.92rem; color: var(--mc-gold-text); margin-bottom: 0.4rem; }
.mc-content .mc-tier__k .mc-colon { display: none; }
.mc-content .mc-tier__v { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.mc-content .mc-chip {
    display: inline-block;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--mc-navy);
    background: var(--mc-ivory);
    border-radius: 999px;
    padding: 0.28rem 0.9rem;
    line-height: 1.7;
}
/* the notes users voted for most: gold edge and a gold point (shape as well as colour) */
.mc-content .mc-chip.is-key { background: #fff; box-shadow: inset 0 0 0 1px var(--mc-gold); font-weight: 700; }
.mc-content .mc-chip.is-key::before,
.mc-content p.mc-legend::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--mc-gold-deep);
    margin-inline-end: 0.4rem;
    vertical-align: 0.15em;
}
.mc-content p.mc-legend { font-size: 0.8rem; color: var(--mc-muted); margin: 0.2rem 0 1.4rem; }

/* collection timeline: years of the line, this perfume highlighted */
.mc-content .mc-timeline {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    position: relative;
    margin: 1.6rem 0 1.8rem;
    gap: 0.6rem;
}
.mc-content .mc-timeline::before {
    content: "";
    position: absolute;
    inset-inline: 0;
    top: 2.25rem;
    height: 1px;
    background: var(--mc-line-gold);
}
.mc-content .mc-timeline li {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    padding-inline-end: 0.4rem;
}
.mc-content .mc-timeline li::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    top: calc(2.25rem - 5px);
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--mc-gold);
}
.mc-content .mc-tl__year { font-weight: 700; color: var(--mc-gold-text); font-size: 0.95rem; line-height: 1.6; }
.mc-content .mc-tl__name { font-size: 0.93rem; line-height: 1.7; color: var(--mc-text); padding-top: 0.2rem; }
.mc-content .mc-tl__note { display: block; font-size: 0.82rem; font-weight: 400; line-height: 1.6; color: var(--mc-muted); margin-top: 0.15rem; }
.mc-content .mc-timeline li.is-current::before { background: var(--mc-navy); border-color: var(--mc-navy); box-shadow: 0 0 0 4px var(--mc-ivory); }
.mc-content .mc-timeline li.is-current .mc-tl__name { color: var(--mc-navy); font-weight: 700; }

/* H. Tables and comparison cards ----------------------------------------- */
/* "reminds me of" votes: gold = users who agree the scents are alike */
.mc-content .mc-agree {
    display: inline-block;
    vertical-align: middle;
    width: 3.6rem;
    height: 6px;
    margin-inline-end: 0.45rem;
    border-radius: 999px;
    background: var(--mc-line);
    overflow: hidden;
}
.mc-content .mc-agree__fill { display: block; height: 100%; background: var(--mc-gold-deep); border-radius: 999px; font-size: 0; color: transparent; line-height: 0; }
.mc-content .mc-table-wrap {
    margin: 1.2rem 0 1.4rem;
    border: 1px solid var(--mc-line);
    border-radius: var(--mc-r);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.mc-content .mc-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.94rem;
    line-height: 1.75;
    margin: 0;
    background: #fff;
}
.mc-content .mc-table th,
.mc-content .mc-table td {
    padding: 0.8rem 1rem;
    text-align: right;
    vertical-align: top;
    border: 0;
    border-bottom: 1px solid var(--mc-line);
}
.mc-content .mc-table thead th {
    background: var(--mc-ivory);
    color: var(--mc-navy);
    font-weight: 700;
    border-bottom: 2px solid var(--mc-gold);
    white-space: nowrap;
}
.mc-content .mc-table tbody tr:last-child td { border-bottom: 0; }
.mc-content .mc-table tbody td:first-child { color: var(--mc-navy); font-weight: 700; }
.mc-content .mc-table .is-hl { background: rgba(197, 166, 106, 0.1); }
.mc-content .mc-table thead th.is-hl { background: #F1E5CB; }

.mc-content .mc-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 25rem), 1fr));
    gap: 1rem;
    margin: 1.2rem 0 1.4rem;
}
.mc-content .mc-card {
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr);
    column-gap: 1rem;
    align-items: start;
    background: #fff;
    border: 1px solid var(--mc-line);
    border-radius: var(--mc-r-lg);
    padding: 1rem;
    transition: border-color 0.2s ease;
}
.mc-content .mc-card:hover { border-color: var(--mc-line-gold); }
.mc-content .mc-card__media,
.mc-content .mc-card__mono {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 120px;
    height: 120px;
    border-radius: var(--mc-r);
    background: var(--mc-ivory);
    overflow: hidden;
    text-decoration: none;
}
.mc-content .mc-card__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;           /* the whole bottle, cap included */
    mix-blend-mode: multiply;      /* white product backgrounds melt into the ivory tile */
    margin: 0;
    box-shadow: none;
}
.mc-content .mc-card__mono {
    background: var(--mc-navy);
    color: var(--mc-gold);
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    direction: ltr;
}
.mc-content .mc-card__body > p { margin: 0 0 0.45rem; font-size: 0.92rem; line-height: 1.8; }
.mc-content .mc-card__body > p:last-child { margin-bottom: 0; }
.mc-content p.mc-card__name { font-size: 1.04rem; font-weight: 700; color: var(--mc-navy); line-height: 1.6; }
.mc-content p.mc-card__name a { color: var(--mc-navy); text-decoration-color: var(--mc-gold-soft); }
.mc-content p.mc-card__name a:hover { color: var(--mc-gold-text); }
.mc-content p.mc-card__tag {
    display: inline-block;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--mc-gold-text);
    background: var(--mc-ivory);
    border-radius: 999px;
    padding: 0.08rem 0.7rem;
    margin-bottom: 0.6rem;
}
.mc-content .mc-card__k {
    display: block;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--mc-muted);
    line-height: 1.5;
}
.mc-content p.mc-card__pick {
    margin-top: 0.7rem;
    padding-top: 0.6rem;
    border-top: 1px solid var(--mc-line);
    color: var(--mc-navy);
}
.mc-content p.mc-card__pick .mc-card__k { color: var(--mc-gold-text); }
/* cards text spans both columns when there is no thumbnail */
.mc-content .mc-card > .mc-card__body:only-child { grid-column: 1 / -1; }

/* I. Verdict band --------------------------------------------------------- */
.mc-content .mc-verdict {
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.5fr);
    gap: 2rem;
    background: var(--mc-navy);
    background-image: radial-gradient(120% 140% at 100% 0%, #2A3D63 0%, var(--mc-navy) 60%);
    color: #E6E1D6;
    border-radius: var(--mc-r-lg);
    padding: 2rem 2.2rem;
    margin: 2.6rem 0;
}
.mc-content .mc-verdict .mc-label { color: #E3CC95; }
.mc-content p.mc-verdict__score {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    margin: 0.2rem 0 0.8rem;
}
.mc-content .mc-verdict__num {
    font-size: 3.4rem;
    font-weight: 800;
    line-height: 1;
    color: #fff;
}
.mc-content .mc-verdict__of { font-size: 1rem; font-weight: 600; color: #E3CC95; }
.mc-content p.mc-verdict__line { color: #F1ECE2; font-size: 1rem; line-height: 1.9; }
.mc-content .mc-verdict__list { margin: 0; display: grid; gap: 1rem; }
.mc-content .mc-verdict__list li {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 0.8rem;
    row-gap: 0.3rem;
    align-items: baseline;
}
.mc-content .mc-verdict__name { font-weight: 700; color: #fff; font-size: 0.95rem; }
.mc-content .mc-verdict__name bdi { font-size: 0.78rem; font-weight: 500; color: #B9C1D1; margin-inline-start: 0.25rem; }
.mc-content .mc-verdict__val { font-weight: 800; color: #E3CC95; font-size: 1.05rem; }
.mc-content .mc-verdict .mc-bar__track { background: rgba(255, 255, 255, 0.12); height: 7px; }
.mc-content .mc-verdict .mc-bar__fill { box-shadow: none; }
.mc-content .mc-verdict__why { grid-column: 1 / -1; font-size: 0.86rem; line-height: 1.75; color: #C9CFDB; }

/* blog cards (Appendix: Related_Articles): further reading from the Marcella blog, quiet and small */
.mc-content .mc-read { margin: 2.2rem 0; }
.mc-content .mc-read > p.mc-wtitle { color: var(--mc-gold-text); font-size: 0.9rem; margin-bottom: 0.7rem; }
.mc-content ul.mc-read__list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
    gap: 0.8rem;
    margin: 0;
}
.mc-content .mc-read__item { margin: 0; }
.mc-content a.mc-read__link {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    height: 100%;
    padding: 0.65rem;
    border: 1px solid var(--mc-line);
    border-radius: var(--mc-r);
    background: var(--mc-ivory-2);
    color: var(--mc-navy);
    text-decoration: none;
    transition: border-color 0.2s ease;
}
.mc-content a.mc-read__link:hover { border-color: var(--mc-gold); color: var(--mc-navy); }
.mc-content a.mc-read__link:not(:has(.mc-read__media)) { border-inline-start: 3px solid var(--mc-gold); padding-inline-start: 0.9rem; }
.mc-content .mc-read__media {
    flex: 0 0 auto;
    display: block;
    width: 96px;
    height: 72px;
    border-radius: var(--mc-r-sm);
    overflow: hidden;
    background: var(--mc-strip);
}
.mc-content .mc-read__media img { display: block; width: 100%; height: 100%; object-fit: cover; margin: 0; border-radius: 0; }
.mc-content .mc-read__title { font-weight: 700; font-size: 0.95rem; line-height: 1.75; }

/* J. FAQ ------------------------------------------------------------------ */
.mc-content .mc-qa-list { margin-top: 1rem; }
.mc-content .mc-qa {
    border: 1px solid var(--mc-line);
    border-radius: var(--mc-r);
    background: #fff;
    padding: 0 1.1rem;
    margin: 0 0 0.6rem;
    transition: border-color 0.2s ease;
}
.mc-content .mc-qa[open] { border-color: var(--mc-line-gold); }
.mc-content .mc-qa > summary,
.mc-content details.mc-dyk > summary {
    list-style: none;
    cursor: pointer;
    position: relative;
}
.mc-content .mc-qa > summary {
    display: block;
    padding: 0.95rem 0;
    padding-inline-start: calc(28px + 0.85rem);
    min-height: 48px;
}
.mc-content .mc-qa > summary::-webkit-details-marker { display: none; }
/* plus/minus on the right, at the start of the line, as Persian readers expect */
.mc-content .mc-qa > summary::before,
.mc-content details.mc-dyk > summary::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    top: 50%;
    width: 28px;
    height: 28px;
    margin-top: -14px;
    border: 1px solid var(--mc-gold-soft);
    border-radius: 50%;
    background:
        linear-gradient(var(--mc-gold-text), var(--mc-gold-text)) center / 11px 1.5px no-repeat,
        linear-gradient(var(--mc-gold-text), var(--mc-gold-text)) center / 1.5px 11px no-repeat;
}
.mc-content details.mc-dyk > summary::before { inset-inline-start: 1.2rem; }
.mc-content .mc-qa[open] > summary::before,
.mc-content details.mc-dyk[open] > summary::before {
    background: linear-gradient(var(--mc-gold-text), var(--mc-gold-text)) center / 11px 1.5px no-repeat;
}
.mc-content .mc-qa__q {
    display: block;
    font-size: 1.02rem;
    line-height: 1.7;
    font-weight: 700;
    color: var(--mc-navy);
    text-wrap: balance;
}
.mc-content .mc-qa > summary:hover .mc-qa__q { color: var(--mc-gold-text); }
.mc-content .mc-qa__a { padding: 0 0 1.1rem; padding-inline-start: calc(28px + 0.85rem); }

/* K. Images --------------------------------------------------------------- */
.mc-content .mc-figure {
    margin: 2.2rem auto;
    padding: 0;
    max-width: 36rem;
    text-align: center;
}
.mc-content .mc-figure img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 85vh;
    object-fit: contain;
    margin: 0 auto;
    border-radius: var(--mc-r-lg);
    box-shadow: none;
}
.mc-content .mc-figure--wide { max-width: none; }
/* a portrait-shaped photo (4:5 campaign or mood shot): narrower, so it stays within one screen */
.mc-content .mc-figure--tall { max-width: 26rem; }
.mc-content .mc-figure--small { max-width: 22rem; }
/* a bottle on white (mc_images --role bottle): no frame, and the white melts into ivory sections */
.mc-content .mc-figure--product img { border-radius: 0; mix-blend-mode: multiply; }

/* perfumers: one row of round portraits; a monogram stands in for a missing photo so the row stays even */
.mc-content .mc-people {
    --mc-pp: 112px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    gap: 1.5rem 1.6rem;
    max-width: 44rem;
    margin: 2.2rem auto 2.4rem;
}
.mc-content .mc-people--1 { --mc-pp: 136px; }
.mc-content .mc-people--4,
.mc-content .mc-people--5 { --mc-pp: 92px; gap: 1.4rem 1.2rem; }
.mc-content .mc-people--5 { max-width: calc(3 * (92px + 3.4rem) + 2 * 1.2rem + 1px); }   /* rows of three */
.mc-content .mc-people__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    width: calc(var(--mc-pp) + 3.4rem);
    margin: 0;
    text-align: center;
}
.mc-content .mc-people__img,
.mc-content .mc-people__mono {
    display: block;
    width: var(--mc-pp);
    height: var(--mc-pp);
    border-radius: 50%;
    overflow: hidden;
    box-shadow: 0 0 0 3px #fff, 0 0 0 4px var(--mc-gold);
}
.mc-content .mc-people__img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    margin: 0;
    border-radius: 50%;
    filter: grayscale(1) contrast(1.04);
}
.mc-content .mc-people__mono {
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at 30% 25%, var(--mc-navy-2) 0%, var(--mc-navy) 70%);
    color: var(--mc-gold);
    font-size: calc(var(--mc-pp) * 0.3);
    font-weight: 600;
    letter-spacing: 0.06em;
    line-height: 1;
    direction: ltr;
}
.mc-content .mc-people__name { font-size: 0.93rem; font-weight: 700; line-height: 1.6; color: var(--mc-navy); }
.mc-content .mc-people__latin {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.76rem;
    font-weight: 500;
    color: var(--mc-muted);
    letter-spacing: 0.02em;
}
.mc-content .mc-figrow {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: 1rem;
    margin: 2.2rem auto;
}
.mc-content .mc-figrow > .mc-figure { margin: 0; max-width: none; }

/* L. Sections and tones --------------------------------------------------- */
.mc-content .mc-sec {
    margin: 3.6rem 0;
    scroll-margin-top: 110px;
}
.mc-content .mc-sec--tint,
.mc-content .mc-sec--note,
.mc-content .mc-sec--card,
.mc-content .mc-sec--ink {
    border-radius: var(--mc-r-lg);
    padding: 2.1rem 2.3rem;
}
.mc-content .mc-sec--tint { background: var(--mc-ivory); }
.mc-content .mc-sec--note { background: var(--mc-ivory-2); border: 1px solid var(--mc-line-gold); }
.mc-content .mc-sec--card { background: #fff; border: 1px solid var(--mc-line); }
.mc-content .mc-sec--ink { background: var(--mc-navy); color: #E6E1D6; }
.mc-content .mc-sec--ink h2,
.mc-content .mc-sec--ink h3,
.mc-content .mc-sec--ink strong { color: #fff; }
.mc-content .mc-sec--ink p,
.mc-content .mc-sec--ink li { color: #E6E1D6; }
.mc-content .mc-sec--ink a { color: #E3CC95; }
/* a box inside a toned section is flattened: no box-in-box */
.mc-content .mc-sec--tint .mc-aside,
.mc-content .mc-sec--note .mc-aside,
.mc-content .mc-sec--tint .mc-result { background: #fff; }

@media only screen and (max-width: 849px) {
    .mc-content .mc-sec { scroll-margin-top: 132px; }
}
@media only screen and (min-width: 783px) {
    .admin-bar .mc-content .mc-sec { scroll-margin-top: 142px; }
}

/* M. Wide screens --------------------------------------------------------- */
/* The description panel is ~900px wide; full-width text gives lines of ~110 Persian characters.
   From 1200px the text keeps a ~44rem reading column and the jump links sit beside it, sticky. */
@media only screen and (min-width: 75em) {
    .mc-content {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 12rem;
        column-gap: 2.2rem;
        align-items: start;
    }
    .mc-content > * { grid-column: 1; min-width: 0; }
    .mc-content > .mc-jump {
        grid-column: 2;
        grid-row: 1 / span 200;
        position: sticky;
        top: 7.5rem;
        display: block;
        margin: 0.6rem 0 0;
        padding: 1rem 0.8rem;
        max-height: calc(100vh - 9rem);
        overflow-y: auto;
        border: 0;
        border-inline-start: 1px solid var(--mc-line-gold);
        border-radius: 0;
        background: transparent;
    }
    .mc-content > .mc-jump .mc-jump__label { display: block; margin: 0 0 0.6rem; padding-inline: 0.6rem; }
    .mc-content > .mc-jump a {
        display: block;
        white-space: normal;
        border: 0;
        background: transparent;
        border-radius: var(--mc-r-sm);
        padding: 0.4rem 0.6rem;
        margin: 0 0 0.1rem;
    }
    .mc-content > .mc-jump a:hover { background: var(--mc-ivory); }
    .admin-bar .mc-content > .mc-jump { top: calc(7.5rem + 32px); }
    .mc-end { margin-inline-end: 14.2rem; }     /* the end boxes line up with the reading column */
}

/* N. End boxes ----------------------------------------------------------- */
/* Rebuilt marsella_* snippets print these classes. They are not scoped to .mc-content: the same
   boxes appear at the end of older descriptions, and this file loads on every page. */
.mc-endbox {
    direction: rtl;
    text-align: right;
    background: #fff;
    border: 1px solid var(--mc-line);
    border-radius: var(--mc-r-lg);
    margin: 1.2rem 0;
    padding: 1.6rem 1.8rem;
    color: var(--mc-text);
    font-size: 1rem;
    line-height: 1.9;
}
.mc-endbox .mc-endbox__title {
    color: var(--mc-navy);
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.6;
    text-align: right;
    margin: 0 0 0.6rem;
}
.mc-endbox .mc-endbox__text {
    color: var(--mc-text);
    font-size: 0.97rem;
    line-height: 1.9;
    text-align: right;
    margin: 0 0 1rem;
}
.mc-endbox .mc-endbox__actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 0; padding: 0; }
.mc-endbox .mc-endbox__btn {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    background: #fff;
    color: var(--mc-navy);
    border: 1px solid var(--mc-line-gold);
    border-radius: 999px;
    padding: 0.45rem 1rem;
    font-size: 0.92rem;
    font-weight: 600;
    line-height: 1.6;
    text-decoration: none;
    transition: border-color 0.15s ease, color 0.15s ease;
}
.mc-endbox .mc-endbox__btn:hover,
.mc-endbox .mc-endbox__btn:focus-visible { border-color: var(--mc-gold); color: var(--mc-gold-text); }
.mc-endbox .mc-endbox__btn:focus-visible { outline: 2px solid var(--mc-gold); outline-offset: 2px; }
.mc-endbox .mc-endbox__icon { width: 18px; height: 18px; flex: none; fill: var(--mc-gold-deep); }
.mc-endbox .mc-endbox__num { direction: ltr; unicode-bidi: isolate; }
/* the price box: live price, then the store's terms as a two-column check list */
.mc-endbox .mc-endbox__price { color: var(--mc-navy); font-size: 1.02rem; font-weight: 600; text-align: right; margin: 0 0 0.8rem; }
.mc-endbox .mc-endbox__price .amount { color: var(--mc-gold-text); font-weight: 700; }
.mc-endbox .mc-endbox__price del { color: var(--mc-muted); font-weight: 400; margin-inline-end: 0.4rem; }
.mc-endbox .mc-endbox__price ins { text-decoration: none; }
.mc-endbox .mc-endbox__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.45rem 1.2rem;
}
.mc-endbox .mc-endbox__list li {
    position: relative;
    list-style: none;
    margin: 0;
    padding-inline-start: 1.6rem;
    font-size: 0.95rem;
    line-height: 1.8;
    color: var(--mc-text);
    text-align: right;
}
.mc-endbox .mc-endbox__list li::before {
    content: "";
    position: absolute;
    top: 0.38em;
    inset-inline-start: 0.4rem;
    width: 6px;
    height: 12px;
    border: solid var(--mc-gold-deep);
    border-width: 0 2.5px 2.5px 0;
    transform: rotate(45deg);
}
p.mc-endbox__note { color: var(--mc-gold-text); font-size: 0.9rem; }

/* Legacy: the old snippets printed inline-styled boxes (grey background, heavy titles). These rules
   touch only those inline-styled boxes, so the rebuilt .mc-endbox boxes are styled by the rules above
   alone; they can go once every rebuilt snippet is installed. */
.mc-end { direction: rtl; text-align: right; margin: 3rem 0 0; }
.mc-end div[style*="max-width: 700px"] {
    background: #fff !important;
    border: 1px solid var(--mc-line) !important;
    border-radius: var(--mc-r-lg) !important;
    box-shadow: none !important;
    max-width: none !important;
    margin: 1.2rem 0 !important;
    padding: 1.6rem 1.8rem !important;
    color: var(--mc-text) !important;
    text-align: right !important;
}
.mc-end div[style*="max-width: 700px"] h2,
.mc-end div[style*="max-width: 700px"] h3 {
    color: var(--mc-navy) !important;
    font-size: 1.25rem !important;
    font-weight: 700 !important;
    text-align: right !important;
    line-height: 1.6 !important;
    margin: 0 0 0.6rem !important;
}
.mc-end div[style*="max-width: 700px"] p {
    font-size: 0.97rem !important;
    line-height: 1.9 !important;
    text-align: right !important;
    color: var(--mc-text) !important;
}
.mc-end div[style*="display: flex"] { justify-content: flex-start !important; gap: 0.6rem !important; }
.mc-end div[style*="display: flex"] > p { margin: 0 !important; }
.mc-end div[style*="display: flex"] a {
    display: inline-flex !important;
    align-items: center;
    gap: 0.4rem;
    color: var(--mc-navy) !important;
    border: 1px solid var(--mc-line-gold) !important;
    border-radius: 999px !important;
    padding: 0.45rem 1rem !important;
    font-size: 0.92rem !important;
    font-weight: 600 !important;
    text-decoration: none !important;
}
.mc-end div[style*="display: flex"] a:hover { border-color: var(--mc-gold) !important; color: var(--mc-gold-text) !important; }
.mc-end div[style*="max-width: 700px"] svg { fill: var(--mc-gold-deep) !important; margin: 0 !important; }

/* O. Short description (beside the gallery) ----------------------------- */
.mc-short {
    direction: rtl;
    text-align: right;
    color: var(--mc-text);
    margin: 0.4rem 0 1.2rem;
}
.mc-short p.mc-short__intro {
    font-size: 0.97rem;
    line-height: 1.95;
    color: var(--mc-text);
    margin: 0 0 1rem;
    padding-inline-start: 0.9rem;
    border-inline-start: 2px solid var(--mc-gold);
    text-align: right;
}
.mc-short ul.mc-short__specs {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--mc-line);
}
.mc-short .mc-short__specs li {
    display: grid;
    grid-template-columns: 7.2rem minmax(0, 1fr);
    column-gap: 0.8rem;
    align-items: baseline;
    list-style: none;
    margin: 0;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--mc-line);
    font-size: 0.92rem;
    line-height: 1.75;
}
.mc-short .mc-short__k { color: var(--mc-muted); font-weight: 500; }
.mc-short .mc-short__k .mc-colon { display: none; }
.mc-short .mc-short__v { color: var(--mc-navy); font-weight: 700; }
.mc-short .mc-short__perf {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
    margin: 1rem 0 0;
}
.mc-short .mc-gauge {
    display: grid;
    grid-template-columns: 7.2rem minmax(0, 1fr);
    column-gap: 0.8rem;
    row-gap: 0.25rem;
    align-items: baseline;
}
.mc-short .mc-gauge__k { color: var(--mc-muted); font-size: 0.92rem; }
.mc-short .mc-gauge__v { grid-column: 2; grid-row: 1; color: var(--mc-navy); font-weight: 700; font-size: 0.92rem; }
.mc-short .mc-gauge__track {
    grid-column: 2;
    display: block;
    height: 9px;
    background: var(--mc-strip);
    border-radius: 999px 2px 2px 999px;
    clip-path: polygon(0 50%, 9px 0, 100% 0, 100% 100%, 9px 100%);
    overflow: hidden;
}
.mc-short .mc-gauge__fill {
    display: block;
    height: 100%;
    background: var(--mc-dip);
    box-shadow: 0 1px 6px rgba(156, 122, 60, 0.35);
    border-radius: 999px 0 0 999px;
    font-size: 0;
    color: transparent;
    line-height: 0;
}
.mc-short p.mc-short__trust {
    position: relative;
    margin: 1.1rem 0 0;
    padding: 0.7rem 1rem;
    padding-inline-start: 2.6rem;
    background: var(--mc-ivory);
    border-radius: var(--mc-r);
    font-size: 0.9rem;
    line-height: 1.8;
    color: var(--mc-navy);
}
.mc-short p.mc-short__trust::before {     /* a small shield drawn in CSS: no emoji */
    content: "";
    position: absolute;
    inset-inline-start: 0.95rem;
    top: 50%;
    width: 1rem;
    height: 1.15rem;
    margin-top: -0.6rem;
    background: var(--mc-gold-deep);
    clip-path: polygon(50% 0, 100% 16%, 100% 52%, 50% 100%, 0 52%, 0 16%);
}
.mc-short p.mc-short__trust strong { color: var(--mc-gold-text); font-weight: 700; }
.mc-short bdi { unicode-bidi: isolate; }

/* P. Phones and reduced motion -------------------------------------------- */
@media only screen and (max-width: 48em) {
    .mc-content { font-size: 1rem; line-height: 1.9; }
    .mc-content h2 { font-size: 1.32rem; }
    .mc-content h3 { font-size: 1.1rem; }
    .mc-content .mc-hero h2.mc-title { font-size: 1.5rem; }
    .mc-content .mc-hook p { font-size: 1.08em; }
    .mc-content p.mc-lead { font-size: 1.04em; }
    .mc-content .mc-sec { margin: 2.6rem 0; }
    .mc-content .mc-sec--tint,
    .mc-content .mc-sec--note,
    .mc-content .mc-sec--card,
    .mc-content .mc-sec--ink { padding: 1.4rem 1.1rem; }
    .mc-content .mc-dossier { grid-template-columns: 1fr; }
    .mc-content .mc-dossier > * { padding: 1.3rem 1.15rem; }
    .mc-content .mc-dossier > * + * { border-inline-start: 0; border-top: 1px solid var(--mc-line-gold); }
    .mc-content .mc-fit,
    .mc-content .mc-pc,
    .mc-content .mc-perf { grid-template-columns: 1fr; }
    .mc-content .mc-widget { padding: 1.2rem 1.1rem; }
    .mc-content .mc-verdict { grid-template-columns: 1fr; gap: 1.2rem; padding: 1.5rem 1.2rem; }
    .mc-content .mc-verdict__num { font-size: 2.8rem; }
    .mc-content .mc-jump { padding: 0.6rem 0.7rem; }
    .mc-content .mc-jump a { font-size: 0.85rem; padding: 0.3rem 0.75rem; }
    .mc-content .mc-card { grid-template-columns: 96px minmax(0, 1fr); padding: 0.85rem; column-gap: 0.85rem; }
    .mc-content .mc-card__media,
    .mc-content .mc-card__mono { width: 96px; height: 96px; }
    .mc-content .mc-cards { grid-template-columns: 1fr; }
    .mc-content p.mc-scene { padding: 1.4rem 1.1rem 1.2rem; font-size: 1.06rem; line-height: 2.05; }
    /* a small figure (the bottle) keeps a little air on a phone instead of filling the screen */
    .mc-content .mc-figure--small { max-width: min(22rem, 62%); }
    .mc-content .mc-people { --mc-pp: 92px; gap: 1.3rem 0.9rem; }
    .mc-content .mc-people--1 { --mc-pp: 116px; }
    .mc-content .mc-people--3 { --mc-pp: 84px; }
    .mc-content .mc-people--3 .mc-people__item { width: calc(var(--mc-pp) + 1.6rem); }
    .mc-content .mc-people--4,
    .mc-content .mc-people--5 { --mc-pp: 84px; max-width: none; }
    .mc-content .mc-people--4 .mc-people__item,
    .mc-content .mc-people--5 .mc-people__item { width: 42%; }     /* two by two on a phone */
    /* 1.7: on a phone the perfumer's portrait sits above the heading, so the biography reads at full width */
    .mc-content .mc-person { display: block; }
    .mc-content .mc-person__img { display: block; margin: 0 0 0.9rem; padding: 4px; }
    .mc-content .mc-person__img img { width: 72px; height: 72px; }
    .mc-content .mc-qa { padding: 0 0.9rem; }
    .mc-content details.mc-dyk > summary { padding-inline-start: calc(1rem + 28px + 0.65rem); }
    .mc-content details.mc-dyk > summary::before { inset-inline-start: 1rem; }
    .mc-content .mc-dyk__a { padding: 0 1rem 1rem; }
    /* timeline turns vertical */
    .mc-content .mc-timeline { grid-auto-flow: row; gap: 0.2rem; padding-inline-start: 1.4rem; }
    .mc-content .mc-timeline::before { inset-inline: auto; inset-inline-start: 5px; top: 0.6rem; bottom: 0.6rem; width: 1px; height: auto; }
    .mc-content .mc-timeline li { flex-direction: row; gap: 0.8rem; padding: 0.3rem 0; }
    .mc-content .mc-timeline li::before { inset-inline-start: -1.4rem; top: 0.95rem; }
    .mc-content .mc-tl__year { flex: 0 0 3rem; }
    .mc-content .mc-tl__name { padding-top: 0; }
    /* tables become one labelled card per row */
    .mc-content .mc-table-wrap { border: 0; overflow: visible; }
    .mc-content .mc-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
    .mc-content .mc-table,
    .mc-content .mc-table tbody,
    .mc-content .mc-table tr,
    .mc-content .mc-table td { display: block; width: 100%; }
    .mc-content .mc-table tr {
        border: 1px solid var(--mc-line);
        border-radius: var(--mc-r);
        margin: 0 0 0.8rem;
        padding: 0.4rem 1rem;
        background: #fff;
    }
    .mc-content .mc-table tr:has(.is-hl) { border-color: var(--mc-gold); background: var(--mc-ivory-2); }
    .mc-content .mc-table td,
    .mc-content .mc-table tbody tr:last-child td { border-bottom: 1px solid var(--mc-line); padding: 0.55rem 0; }
    .mc-content .mc-table td:last-child { border-bottom: 0; }
    .mc-content .mc-table td::before {
        content: attr(data-label);
        display: block;
        font-size: 0.8rem;
        font-weight: 700;
        color: var(--mc-muted);
    }
    .mc-content .mc-table tbody td:first-child { font-size: 1.02rem; }
    .mc-content .mc-table tbody td:first-child::before { display: none; }
    .mc-content .mc-table .is-hl { background: transparent; }
    .mc-end div[style*="max-width: 700px"] { padding: 1.3rem 1.15rem !important; }
    .mc-endbox { padding: 1.3rem 1.15rem; }
    .mc-endbox .mc-endbox__list { grid-template-columns: 1fr; }
}
@media only screen and (max-width: 36em) {
    .mc-content .mc-figrow { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; }
    .mc-short .mc-short__specs li,
    .mc-short .mc-gauge { grid-template-columns: 6.2rem minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
    .mc-content *, .mc-content *::before, .mc-content *::after { transition: none !important; }
}