/* ============================================================
   OPINIÓN PTY — Direction C (Híbrida)
   Calm editorial palette + modern content blocks
   ============================================================ */

:root {
	/* Direction C tokens — from direction-c-hybrid.jsx */
	--opty-bg:          #f5f0e4;  /* warm cream */
	--opty-bg-alt:      #ebe4d1;  /* sand */
	--opty-bg-soft:     #fff9ec;  /* paper */
	--opty-ink:         #2b302e;  /* soft charcoal */
	--opty-ink-soft:    #5c6360;
	--opty-ink-mute:    #8f948d;
	--opty-rule:        #d6cdb8;
	--opty-rule-strong: #2b302e;
	--opty-accent:      #4e7a6e;  /* sage-teal */
	--opty-accent-soft: #d9e3dd;
	--opty-hot:         #b8634a;  /* terracotta */
	--opty-hot-soft:    #f2dcd2;
	--opty-yellow:      #e8c97a;  /* warm butter */
	--opty-card:        #ffffff;
	--opty-radius:      10px;
	--opty-radius-sm:   6px;

	--opty-display: "Inter Tight", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
	--opty-serif:   "Fraunces", Georgia, serif;
	--opty-body:    "Inter Tight", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
	--opty-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

	--opty-shadow-soft: 0 6px 20px rgba(0,0,0,0.08);
	--opty-shadow-card: 0 1px 0 rgba(0,0,0,0.02), 0 4px 14px rgba(43,48,46,0.05);
}

/* ─── Base ─────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body.opty {
	margin: 0;
	background: var(--opty-bg);
	color: var(--opty-ink);
	font-family: var(--opty-body);
	font-size: 16px;
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
img { max-width: 100%; height: auto; display: block; }
a  { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
button { font: inherit; }
em.opty-em { font-family: var(--opty-serif); font-style: italic; font-weight: 500; color: var(--opty-accent); }
em.opty-em--yellow { color: var(--opty-yellow); }

/* selection */
::selection { background: var(--opty-yellow); color: var(--opty-ink); }

/* ─── Layout container ─────────────────────────────────────────── */
.opty-wrap { max-width: 1280px; margin: 0 auto; padding: 0 40px; }
.opty-wrap--narrow { max-width: 880px; }

@media (max-width: 760px) {
	.opty-wrap { padding: 0 16px; }
}

/* ─── Primitives ───────────────────────────────────────────────── */
.opty-kicker {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--opty-body);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--opty-accent);
}

.opty-meta {
	font-family: var(--opty-body);
	font-size: 12px;
	color: var(--opty-ink-mute);
	letter-spacing: 0.1px;
}

.opty-dot { color: var(--opty-rule); padding: 0 2px; }

.opty-tag {
	display: inline-block;
	font-family: var(--opty-body);
	font-weight: 600;
	font-size: 11px;
	letter-spacing: 0.3px;
	padding: 5px 10px;
	border-radius: 999px;
	border: 1px solid transparent;
	text-decoration: none;
	white-space: nowrap;
	line-height: 1.2;
}
.opty-tag--sm { font-size: 10px; padding: 3px 8px; }
.opty-tag--soft    { background: var(--opty-accent-soft); color: var(--opty-accent); }
.opty-tag--hot     { background: var(--opty-hot-soft);    color: var(--opty-hot); }
.opty-tag--yellow  { background: var(--opty-yellow);      color: var(--opty-ink); }
.opty-tag--ink     { background: var(--opty-ink);         color: #fff; }
.opty-tag--outline { background: transparent;             color: var(--opty-ink); border-color: var(--opty-rule); }
a.opty-tag:hover { text-decoration: none; opacity: 0.9; }

.opty-byline { display: inline-flex; align-items: center; gap: 10px; --byline-size: 32px; }
.opty-byline__avatar {
	width: var(--byline-size); height: var(--byline-size);
	border-radius: 50%; background-size: cover; background-position: center;
	flex-shrink: 0; border: 1px solid rgba(0,0,0,0.05);
	display: block;
}
.opty-byline__text { line-height: 1.2; display: inline-flex; flex-direction: column; }
.opty-byline__name { font-family: var(--opty-body); font-size: 13px; font-weight: 600; color: var(--opty-ink); }
.opty-byline__role { font-family: var(--opty-body); font-size: 11px; color: var(--opty-ink-mute); margin-top: 1px; }

.opty-btn {
	display: inline-flex; align-items: center; gap: 6px;
	padding: 10px 18px; border-radius: 999px; border: 0;
	font-family: var(--opty-body); font-size: 13px; font-weight: 600;
	cursor: pointer; transition: filter .15s ease;
	text-decoration: none;
}
.opty-btn:hover { filter: brightness(1.05); text-decoration: none; }
.opty-btn--accent { background: var(--opty-accent); color: #fff; }
.opty-btn--ink    { background: var(--opty-ink);    color: #fff; }
.opty-btn--outline{ background: transparent;        color: var(--opty-ink); border: 1px solid var(--opty-ink); }
.opty-btn--sm     { padding: 6px 12px; font-size: 12px; }

/* ─── Section header ───────────────────────────────────────────── */
.opty-section-h {
	display: flex; align-items: baseline; justify-content: space-between;
	gap: 24px; padding-bottom: 14px; margin: 0 0 24px;
	border-bottom: 2px solid var(--opty-ink);
}
.opty-section-h__title {
	font-family: var(--opty-display);
	font-size: 28px; font-weight: 700;
	letter-spacing: -1px; margin: 8px 0 0;
	color: var(--opty-ink); line-height: 1.05;
	text-wrap: balance;
}
.opty-section-h__more {
	font-family: var(--opty-body); font-size: 13px; font-weight: 600;
	color: var(--opty-ink); border-bottom: 2px solid var(--opty-accent);
	padding-bottom: 2px;
	white-space: nowrap;
}
.opty-section-h__more:hover { text-decoration: none; }

/* ─── Header / masthead ────────────────────────────────────────── */
.opty-header { background: var(--opty-bg); border-bottom: 1px solid var(--opty-rule); }

.opty-header__strip {
	display: flex; justify-content: space-between; align-items: center;
	padding: 10px 0;
	font-family: var(--opty-body); font-size: 13px; color: var(--opty-ink-soft);
	border-bottom: 1px solid var(--opty-rule);
}
.opty-header__strip-l, .opty-header__strip-r { display: flex; align-items: center; gap: 14px; }
.opty-header__strip-l .sep { color: var(--opty-ink-mute); }
.opty-header__strip-l .new { color: var(--opty-hot); font-weight: 600; }
.opty-header__strip-r a { font-weight: 500; color: var(--opty-ink); }

.opty-mast {
	display: flex; align-items: center; justify-content: space-between;
	gap: 32px; padding: 26px 0 18px;
}
.opty-mast__brand { display: flex; align-items: center; gap: 14px; min-width: 0; }
.opty-mast__dot {
	width: 44px; height: 44px; flex-shrink: 0;
	background: var(--opty-accent); border-radius: 50%;
	display: inline-flex; align-items: center; justify-content: center;
	color: #fff; font-family: var(--opty-display);
	font-size: 22px; font-weight: 700; letter-spacing: -0.5px;
	line-height: 1;
}
.opty-mast__wordmark {
	font-family: var(--opty-display);
	font-size: 32px; font-weight: 700; letter-spacing: -1px;
	color: var(--opty-ink); line-height: 1;
}
.opty-mast__wordmark .opty-mast__dotaccent { color: var(--opty-accent); }
.opty-mast__tagline {
	font-family: var(--opty-body); font-size: 12px;
	color: var(--opty-ink-soft); margin-top: 4px;
}

.opty-mast__search {
	flex: 1; max-width: 360px; margin-left: auto;
	display: flex; align-items: center; gap: 10px;
	padding: 10px 14px;
	border: 1px solid var(--opty-rule); border-radius: 999px;
	background: var(--opty-bg-soft);
	font-family: var(--opty-body); font-size: 13px; color: var(--opty-ink-mute);
}
.opty-mast__search input {
	flex: 1; border: 0; background: transparent; outline: 0;
	font: inherit; color: var(--opty-ink);
}
.opty-mast__search input::placeholder { color: var(--opty-ink-mute); }

.opty-mast__cta { white-space: nowrap; }

/* Chip nav */
.opty-nav {
	display: flex; gap: 6px; align-items: center;
	padding: 8px 0 12px;
	border-top: 1px solid var(--opty-rule);
	overflow-x: auto;
	scrollbar-width: none;
}
.opty-nav::-webkit-scrollbar { display: none; }
.opty-chip {
	padding: 7px 14px; border-radius: 999px;
	font-family: var(--opty-body); font-size: 13px; font-weight: 500;
	color: var(--opty-ink); background: transparent;
	white-space: nowrap; border: 1px solid transparent;
	transition: background .15s, color .15s;
}
.opty-chip:hover { background: rgba(0,0,0,0.04); text-decoration: none; }
.opty-chip.is-active { background: var(--opty-ink); color: #fff; }
.opty-nav__live { margin-left: auto; font-family: var(--opty-body); font-size: 12px; color: var(--opty-ink-mute); display: inline-flex; gap: 6px; align-items: center; flex-shrink: 0; }
.opty-nav__live::before { content: '●'; color: var(--opty-hot); }
.opty-nav__menutoggle { display: none; }

@media (max-width: 760px) {
	.opty-header__strip { font-size: 11px; padding: 8px 0; }
	.opty-header__strip-l span:nth-child(n+4) { display: none; }
	.opty-mast { padding: 16px 0 12px; gap: 12px; flex-wrap: wrap; }
	.opty-mast__dot { width: 32px; height: 32px; font-size: 16px; }
	.opty-mast__wordmark { font-size: 22px; letter-spacing: -0.6px; }
	.opty-mast__tagline { display: none; }
	.opty-mast__search { display: none; }
	.opty-mast__cta { padding: 8px 14px; font-size: 12px; }
	.opty-nav { padding: 8px 0 10px; }
	.opty-nav__live { display: none; }
}

/* ─── Hero ─────────────────────────────────────────────────────── */
.opty-hero {
	display: grid; grid-template-columns: 1.15fr 1fr;
	gap: 40px; padding: 44px 0 56px;
	align-items: center;
}
.opty-hero__tags { display: flex; gap: 8px; margin-bottom: 18px; flex-wrap: wrap; }
.opty-hero__title {
	font-family: var(--opty-display);
	font-size: clamp(34px, 5vw, 56px);
	line-height: 1.02; font-weight: 700;
	letter-spacing: -2px;
	color: var(--opty-ink);
	margin: 0 0 20px; text-wrap: balance;
}
.opty-hero__title a { color: inherit; }
.opty-hero__title a:hover { text-decoration: none; color: var(--opty-accent); }
.opty-hero__dek {
	font-family: var(--opty-body);
	font-size: 19px; line-height: 1.5;
	color: var(--opty-ink-soft);
	margin: 0; text-wrap: pretty; max-width: 560px;
}
.opty-hero__foot {
	margin-top: 28px; padding-top: 18px;
	border-top: 1px solid var(--opty-rule);
	display: flex; align-items: center; justify-content: space-between;
	gap: 16px; flex-wrap: wrap;
}
.opty-hero__metas { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.opty-hero__metas .hot { color: var(--opty-hot); font-weight: 600; }
.opty-hero__visual { position: relative; }
.opty-hero__img {
	aspect-ratio: 5 / 4;
	background-size: cover; background-position: center;
	border-radius: var(--opty-radius);
	display: block;
}
.opty-hero__pill {
	position: absolute; bottom: -16px; left: 20px;
	background: #fff; padding: 10px 16px;
	border-radius: 999px;
	display: inline-flex; gap: 10px; align-items: center;
	box-shadow: var(--opty-shadow-soft);
	border: 1px solid var(--opty-rule);
}
.opty-hero__pill-ava { display: inline-flex; }
.opty-hero__pill-ava span {
	width: 22px; height: 22px; border-radius: 50%;
	background-size: cover; border: 2px solid #fff; margin-left: -8px;
}
.opty-hero__pill-ava span:first-child { margin-left: 0; }
.opty-hero__pill-text { font-family: var(--opty-body); font-size: 12px; color: var(--opty-ink-soft); }
.opty-hero__pill-text strong { color: var(--opty-ink); }

@media (max-width: 900px) {
	.opty-hero { grid-template-columns: 1fr; gap: 24px; padding: 24px 0 36px; }
	.opty-hero__title { font-size: 30px; letter-spacing: -1.2px; }
	.opty-hero__dek { font-size: 16px; }
}

/* ─── Cards ────────────────────────────────────────────────────── */

/* Stacked */
.opty-card { font-family: var(--opty-body); }
.opty-card--stacked { display: flex; flex-direction: column; gap: 14px; }
.opty-card--stacked__img {
	display: block; aspect-ratio: 4 / 3;
	border-radius: var(--opty-radius);
	background-size: cover; background-position: center;
	position: relative; overflow: hidden;
}
.opty-card--stacked__chip { position: absolute; top: 12px; left: 12px; }
.opty-card--stacked__title {
	font-family: var(--opty-display);
	font-size: 22px; line-height: 1.15; font-weight: 600;
	color: var(--opty-ink); letter-spacing: -0.6px;
	margin: 0 0 6px; text-wrap: balance;
}
.opty-card--stacked__title a { color: inherit; }
.opty-card--stacked__title a:hover { color: var(--opty-accent); text-decoration: none; }
.opty-card--stacked__dek { font-size: 14px; line-height: 1.5; color: var(--opty-ink-soft); margin: 0 0 10px; }
.opty-card--stacked__foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; }

/* Feature dark */
.opty-card--feature-dark {
	background: var(--opty-ink); color: #fff;
	padding: 28px; border-radius: var(--opty-radius);
	display: flex; flex-direction: column; gap: 14px;
	height: 100%; position: relative; overflow: hidden;
}
.opty-card--feature-dark__blob {
	position: absolute; top: -40px; right: -40px;
	width: 160px; height: 160px;
	background: var(--opty-accent); border-radius: 50%;
	opacity: 0.25; pointer-events: none;
}
.opty-card--feature-dark__top { position: relative; }
.opty-card--feature-dark__title {
	font-family: var(--opty-display);
	font-size: 28px; line-height: 1.08; font-weight: 700;
	letter-spacing: -1px; margin: 0; text-wrap: balance;
	position: relative;
}
.opty-card--feature-dark__title a { color: #fff; }
.opty-card--feature-dark__title a:hover { color: var(--opty-yellow); text-decoration: none; }
.opty-card--feature-dark__dek { font-size: 14px; line-height: 1.5; opacity: 0.8; flex: 1; position: relative; margin: 0; }
.opty-card--feature-dark__foot {
	padding-top: 14px;
	display: flex; justify-content: space-between; align-items: center;
	border-top: 1px solid rgba(255,255,255,0.15);
	position: relative;
}
.opty-card--feature-dark__author { font-size: 13px; font-weight: 600; }

/* Horizontal */
.opty-card--horizontal {
	display: grid; grid-template-columns: 1fr 140px;
	gap: 20px; align-items: start;
	padding: 20px 0;
	border-bottom: 1px solid var(--opty-rule);
}
.opty-card--horizontal:last-child { border-bottom: 0; }
.opty-card--horizontal__title {
	font-family: var(--opty-display);
	font-size: 20px; line-height: 1.2; font-weight: 600;
	color: var(--opty-ink); letter-spacing: -0.4px;
	margin: 10px 0 8px; text-wrap: balance;
}
.opty-card--horizontal__title a { color: inherit; }
.opty-card--horizontal__title a:hover { color: var(--opty-accent); text-decoration: none; }
.opty-card--horizontal__dek { font-size: 13px; line-height: 1.5; color: var(--opty-ink-soft); margin: 0 0 10px; }
.opty-card--horizontal__meta { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.opty-card--horizontal__img {
	aspect-ratio: 1 / 1; display: block;
	border-radius: var(--opty-radius-sm);
	background-size: cover; background-position: center;
}

@media (max-width: 600px) {
	.opty-card--horizontal { grid-template-columns: 1fr 100px; gap: 12px; padding: 14px 0; }
	.opty-card--horizontal__title { font-size: 16px; margin: 8px 0 6px; }
	.opty-card--horizontal__dek  { display: none; }
}

/* Text-only */
.opty-card--text__title {
	font-family: var(--opty-display);
	font-size: 17px; line-height: 1.22; font-weight: 600;
	color: var(--opty-ink); margin: 10px 0; text-wrap: balance;
}
.opty-card--text__title a { color: inherit; }
.opty-card--text__title a:hover { color: var(--opty-accent); text-decoration: none; }
.opty-card--text__meta { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

/* ─── Sponsored slot ───────────────────────────────────────────── */
.opty-sponsored {
	display: grid; grid-template-columns: 72px 1fr auto;
	gap: 20px; align-items: center;
	margin: 0 0 48px;
	padding: 20px 24px;
	background: var(--opty-hot-soft);
	border: 1px solid var(--opty-hot);
	border-radius: var(--opty-radius);
}
.opty-sponsored__logo {
	width: 72px; height: 72px;
	background: var(--opty-hot);
	border-radius: var(--opty-radius-sm);
	display: inline-flex; align-items: center; justify-content: center;
	font-family: var(--opty-display); font-size: 26px; font-weight: 700;
	color: #fff; letter-spacing: -0.5px;
}
.opty-sponsored__title {
	font-family: var(--opty-display); font-size: 20px;
	font-weight: 600; letter-spacing: -0.6px;
	color: var(--opty-ink); margin: 8px 0 4px; text-wrap: balance;
}
@media (max-width: 600px) {
	.opty-sponsored { grid-template-columns: 56px 1fr; gap: 14px; padding: 14px 16px; }
	.opty-sponsored__logo { width: 56px; height: 56px; font-size: 20px; }
	.opty-sponsored__title { font-size: 16px; }
	.opty-sponsored .opty-btn { grid-column: 1 / -1; justify-self: start; }
}

/* ─── Picks row (3-up: feature dark + 2 stacked) ───────────────── */
.opty-picks {
	display: grid; grid-template-columns: 1.2fr 1fr 1fr;
	gap: 24px; padding-bottom: 48px;
}
@media (max-width: 1000px) { .opty-picks { grid-template-columns: 1fr 1fr; } .opty-picks > :first-child { grid-column: 1 / -1; } }
@media (max-width: 600px)  { .opty-picks { grid-template-columns: 1fr; } }

/* ─── Main grid (latest list + rail) ───────────────────────────── */
.opty-main { display: grid; grid-template-columns: 1.7fr 1fr; gap: 40px; padding-bottom: 40px; }
.opty-main__filters { display: flex; gap: 6px; flex-wrap: wrap; }
.opty-main__filters .opty-chip { padding: 5px 11px; font-size: 12px; border: 1px solid var(--opty-rule); }
.opty-main__filters .opty-chip.is-active { border-color: transparent; }
.opty-main__rail { display: flex; flex-direction: column; gap: 20px; }
@media (max-width: 1000px) { .opty-main { grid-template-columns: 1fr; gap: 28px; } }

/* ─── Trending widget ──────────────────────────────────────────── */
.opty-trending {
	background: #fff; border-radius: var(--opty-radius);
	border: 1px solid var(--opty-rule);
	padding: 24px;
}
.opty-trending__head {
	display: flex; justify-content: space-between; align-items: baseline;
	padding-bottom: 14px; margin-bottom: 4px;
	border-bottom: 2px solid var(--opty-ink);
}
.opty-trending__title {
	font-family: var(--opty-display); font-size: 18px;
	font-weight: 700; color: var(--opty-ink); letter-spacing: -0.5px;
}
.opty-trending__list { list-style: none; padding: 0; margin: 0; }
.opty-trending__item {
	display: grid; grid-template-columns: 34px 1fr;
	gap: 12px; padding: 14px 0;
	border-bottom: 1px solid var(--opty-rule);
	align-items: start;
}
.opty-trending__item:last-child { border-bottom: 0; }
.opty-trending__num {
	font-family: var(--opty-serif); font-size: 28px;
	font-weight: 500; font-style: italic;
	color: var(--opty-accent); line-height: 1;
}
.opty-trending__item.is-first .opty-trending__num { color: var(--opty-hot); }
.opty-trending__link {
	font-family: var(--opty-display); font-size: 14px;
	line-height: 1.25; font-weight: 600;
	color: var(--opty-ink); display: block; margin: 0 0 4px;
	letter-spacing: -0.2px;
}
.opty-trending__link:hover { color: var(--opty-accent); text-decoration: none; }
.opty-trending__meta { color: var(--opty-ink-mute); }

/* ─── Poll widget ──────────────────────────────────────────────── */
.opty-poll {
	background: var(--opty-bg-soft);
	border-radius: var(--opty-radius);
	border: 1px solid var(--opty-rule); padding: 24px;
}
.opty-poll__q {
	font-family: var(--opty-display); font-size: 20px;
	font-weight: 700; color: var(--opty-ink);
	letter-spacing: -0.5px; margin: 12px 0 16px; text-wrap: balance;
}
.opty-poll__opt {
	position: relative; padding: 10px 12px; margin-bottom: 6px;
	background: #fff; border-radius: var(--opty-radius-sm);
	border: 1px solid var(--opty-rule);
	overflow: hidden;
	display: flex; justify-content: space-between; align-items: center;
}
.opty-poll__bar {
	position: absolute; left: 0; top: 0; bottom: 0;
	background: var(--opty-accent-soft);
}
.opty-poll__opt.is-hot .opty-poll__bar { background: var(--opty-hot-soft); }
.opty-poll__l { position: relative; font-family: var(--opty-body); font-size: 13px; font-weight: 500; color: var(--opty-ink); }
.opty-poll__v { position: relative; font-family: var(--opty-body); font-size: 13px; font-weight: 700; color: var(--opty-accent); }
.opty-poll__opt.is-hot .opty-poll__v { color: var(--opty-hot); }
.opty-poll__foot {
	margin-top: 12px;
	display: flex; justify-content: space-between; align-items: center;
}

/* ─── Ad placeholder ───────────────────────────────────────────── */
.opty-ad {
	aspect-ratio: 1 / 1;
	background: repeating-linear-gradient(45deg, var(--opty-bg-alt), var(--opty-bg-alt) 10px, var(--opty-bg-soft) 10px, var(--opty-bg-soft) 20px);
	border: 1px dashed var(--opty-rule);
	border-radius: var(--opty-radius);
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	text-align: center; padding: 20px;
}
.opty-ad__title {
	font-family: var(--opty-display); font-size: 18px;
	font-weight: 600; color: var(--opty-ink); letter-spacing: -0.4px;
	text-wrap: balance; margin: 6px 0 4px;
}

/* ─── Newsletter (dark) ────────────────────────────────────────── */
.opty-news {
	background: var(--opty-ink); color: #f7f3ec;
	padding: 56px 40px; position: relative; overflow: hidden;
	border-radius: var(--opty-radius);
	margin-bottom: 40px;
}
.opty-news__blob { position: absolute; border-radius: 50%; pointer-events: none; }
.opty-news__blob--sage  { right: -120px; top: -120px; width: 380px; height: 380px; background: var(--opty-accent); opacity: 0.35; }
.opty-news__blob--terra { left: -80px;  bottom: -80px; width: 220px; height: 220px; background: var(--opty-hot);    opacity: 0.15; }
.opty-news__inner {
	display: grid; grid-template-columns: 1.1fr 1fr;
	gap: 48px; align-items: center; position: relative;
}
.opty-news__h {
	font-family: var(--opty-display);
	font-size: clamp(28px, 4vw, 44px); line-height: 1.05;
	font-weight: 700; letter-spacing: -1.5px;
	margin: 18px 0; text-wrap: balance;
}
.opty-news__copy p { font-size: 15px; line-height: 1.55; opacity: 0.8; margin: 0; max-width: 460px; }
.opty-news__form {
	background: #fff; border-radius: var(--opty-radius);
	padding: 6px; display: flex; gap: 6px;
}
.opty-news__form input {
	flex: 1; border: 0; outline: 0; padding: 12px 14px;
	font: 15px var(--opty-body); color: var(--opty-ink); background: transparent;
}
.opty-news__form button {
	background: var(--opty-accent); color: #fff; border: 0;
	padding: 12px 20px; border-radius: var(--opty-radius-sm);
	font: 600 14px var(--opty-body); cursor: pointer;
}
.opty-news__proof {
	margin-top: 16px; display: flex; gap: 12px; align-items: center;
	font-size: 13px; color: rgba(247,243,236,0.7);
}
.opty-news__avatars { display: inline-flex; }
.opty-news__avatars span {
	width: 26px; height: 26px; border-radius: 50%;
	background-size: cover;
	border: 2px solid var(--opty-ink);
	margin-left: -8px;
}
.opty-news__avatars span:first-child { margin-left: 0; }

.opty-news--mini { padding: 20px; margin: 18px 0; }
.opty-news--mini .opty-news__title {
	font-family: var(--opty-display); font-size: 22px; font-weight: 700;
	letter-spacing: -0.8px; margin: 12px 0 10px; line-height: 1.1;
	text-wrap: balance;
}
.opty-news--mini .opty-news__form { background: #fff; padding: 4px; border-radius: var(--opty-radius-sm); }
.opty-news--mini .opty-news__form input { font-size: 13px; padding: 8px 10px; }
.opty-news--mini .opty-news__form button { padding: 8px 14px; font-size: 12px; border-radius: 4px; }

@media (max-width: 760px) {
	.opty-news { padding: 32px 22px; }
	.opty-news__inner { grid-template-columns: 1fr; gap: 24px; }
}

/* ─── Series cards ─────────────────────────────────────────────── */
.opty-series { padding: 40px 0; }
.opty-series__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.opty-series__card {
	aspect-ratio: 4 / 3; color: #fff; padding: 24px;
	border-radius: var(--opty-radius);
	display: flex; flex-direction: column; justify-content: space-between;
	position: relative; overflow: hidden;
}
.opty-series__card:hover { text-decoration: none; }
.opty-series__card--sage  { background: var(--opty-accent); }
.opty-series__card--terra { background: var(--opty-hot); }
.opty-series__card--ink   { background: var(--opty-ink); }
.opty-series__num {
	position: absolute; top: -10px; right: -10px;
	font-family: var(--opty-display); font-size: 140px;
	font-weight: 700; letter-spacing: -6px;
	line-height: 0.8; opacity: 0.12;
	pointer-events: none;
}
.opty-series__body { position: relative; }
.opty-series__body h3 {
	font-family: var(--opty-display); font-size: 30px;
	font-weight: 700; letter-spacing: -1.3px;
	margin: 0 0 6px; text-wrap: balance; line-height: 1.05;
}
.opty-series__sub { font-size: 14px; opacity: 0.9; margin-bottom: 4px; }
.opty-series__entries { font-size: 12px; opacity: 0.7; letter-spacing: 0.3px; }

@media (max-width: 900px) { .opty-series__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .opty-series__grid { grid-template-columns: 1fr; } }

/* ─── Breves grid (text-only, 4-up) ────────────────────────────── */
.opty-breves { padding: 40px 0 64px; }
.opty-breves__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }
@media (max-width: 1000px) { .opty-breves__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px)  { .opty-breves__grid { grid-template-columns: 1fr; } }

/* ─── Article page ─────────────────────────────────────────────── */
.opty-progress { height: 3px; background: var(--opty-rule); position: sticky; top: 0; z-index: 50; }
.opty-progress__bar { height: 100%; background: var(--opty-accent); width: 0; transition: width .1s linear; }

.opty-article-h { padding: 48px 0 32px; max-width: 880px; margin: 0 auto; }
.opty-article-h__tags { display: flex; gap: 8px; margin-bottom: 18px; flex-wrap: wrap; }
.opty-article-h__title {
	font-family: var(--opty-display);
	font-size: clamp(28px, 4.4vw, 48px); line-height: 1.05;
	font-weight: 700; letter-spacing: -1.6px; color: var(--opty-ink);
	margin: 0 0 18px; text-wrap: balance;
}
.opty-article-h__dek {
	font-family: var(--opty-body); font-size: 20px; line-height: 1.5;
	color: var(--opty-ink-soft); margin: 0; text-wrap: pretty; max-width: 720px;
}
.opty-article-h__byline {
	margin-top: 32px; padding: 20px 0;
	border-top: 1px solid var(--opty-rule);
	border-bottom: 1px solid var(--opty-rule);
	display: flex; justify-content: space-between; align-items: center;
	gap: 16px; flex-wrap: wrap;
}

.opty-article-img { padding: 0 0 8px; max-width: 1100px; margin: 0 auto; }
.opty-article-img__el {
	aspect-ratio: 16 / 9; border-radius: var(--opty-radius);
	background-size: cover; background-position: center; display: block;
}
.opty-article-img__caption {
	font-family: var(--opty-body); font-size: 12px; color: var(--opty-ink-mute);
	margin-top: 10px; display: block; font-style: italic;
}

.opty-body-grid {
	display: grid; grid-template-columns: 60px 1fr 220px;
	gap: 32px; padding: 40px 0; max-width: 1160px; margin: 0 auto;
}
.opty-share { position: sticky; top: 28px; align-self: start; display: flex; flex-direction: column; gap: 8px; }
.opty-share a {
	width: 44px; height: 44px;
	background: #fff; border-radius: var(--opty-radius-sm);
	border: 1px solid var(--opty-rule);
	display: flex; flex-direction: column;
	align-items: center; justify-content: center;
	font: 13px var(--opty-body); color: var(--opty-ink);
}
.opty-share a:hover { color: var(--opty-accent); border-color: var(--opty-accent); text-decoration: none; }
.opty-share .lbl { font-size: 9px; color: var(--opty-ink-mute); }

.opty-rail-r { position: sticky; top: 28px; align-self: start; display: flex; flex-direction: column; gap: 16px; }
.opty-rail-card {
	padding: 18px; background: #fff;
	border: 1px solid var(--opty-rule);
	border-radius: var(--opty-radius);
}
.opty-rail-card h4 {
	font-family: var(--opty-display); font-size: 16px;
	font-weight: 700; letter-spacing: -0.3px;
	color: var(--opty-ink); margin: 12px 0 4px;
}
.opty-rail-card .role { font-size: 12px; color: var(--opty-ink-soft); line-height: 1.5; }
.opty-rail-card .ava {
	width: 60px; height: 60px; border-radius: 30px;
	background-size: cover; background-position: center;
	margin: 12px 0 10px;
	border: 1px solid var(--opty-rule);
	display: block;
}
.opty-rail-card__follow { display: block; margin-top: 12px; padding: 8px 14px; background: var(--opty-accent); color: #fff; border-radius: 999px; text-align: center; font: 600 12px var(--opty-body); }
.opty-rail-card__follow:hover { text-decoration: none; filter: brightness(1.05); }
.opty-rail-related { padding: 10px 0; border-top: 1px solid var(--opty-rule); }
.opty-rail-related:first-of-type { border-top: 0; }
.opty-rail-related a { font: 600 14px var(--opty-display); color: var(--opty-ink); display: block; margin: 8px 0 4px; line-height: 1.25; letter-spacing: -0.2px; }
.opty-rail-related a:hover { color: var(--opty-accent); text-decoration: none; }

.opty-prose { max-width: 680px; font-family: var(--opty-body); font-size: 17px; line-height: 1.7; color: var(--opty-ink-soft); }
.opty-prose p { margin: 0 0 22px; }
.opty-prose strong { color: var(--opty-ink); }
.opty-prose .opty-mark { background: var(--opty-yellow); color: var(--opty-ink); padding: 0 4px; border-radius: 3px; font-weight: 700; }
.opty-prose h2 { font-family: var(--opty-display); font-size: 30px; font-weight: 700; letter-spacing: -1px; color: var(--opty-ink); margin: 36px 0 14px; line-height: 1.1; }
.opty-prose h3 { font-family: var(--opty-display); font-size: 22px; font-weight: 700; letter-spacing: -0.6px; color: var(--opty-ink); margin: 28px 0 10px; }
.opty-prose ul, .opty-prose ol { color: var(--opty-ink-soft); padding-left: 24px; }
.opty-prose ul li, .opty-prose ol li { margin: 0 0 8px; }
.opty-prose a { color: var(--opty-accent); border-bottom: 1px solid var(--opty-accent-soft); }
.opty-prose a:hover { background: var(--opty-accent-soft); text-decoration: none; }
.opty-prose img, .opty-prose figure { margin: 26px 0; border-radius: var(--opty-radius); overflow: hidden; }
.opty-prose blockquote {
	background: var(--opty-ink); color: #fff;
	padding: 28px 32px; border-radius: var(--opty-radius);
	margin: 32px 0; position: relative; overflow: hidden;
	font-family: var(--opty-serif); font-style: italic; font-weight: 500;
	font-size: 26px; line-height: 1.25; letter-spacing: -0.5px;
	text-wrap: balance;
}
.opty-prose blockquote::before {
	content: "“";
	position: absolute; left: -10px; top: -30px;
	font-family: var(--opty-serif); font-size: 140px;
	font-style: italic; font-weight: 500;
	color: var(--opty-accent); opacity: 0.6; line-height: 1;
	pointer-events: none;
}
.opty-prose blockquote cite { display: block; margin-top: 18px; font: 13px var(--opty-body); font-style: normal; opacity: 0.7; }

.opty-prose .opty-dropcap::first-letter,
.opty-prose__lead::first-letter {
	font-family: var(--opty-serif); font-style: italic;
	font-size: 72px; float: left; line-height: 0.85;
	padding-right: 10px; padding-top: 8px; font-weight: 500;
	color: var(--opty-accent);
}
.opty-prose__lead { font-size: 20px; font-weight: 500; color: var(--opty-ink); line-height: 1.6; margin: 0 0 22px; }

.opty-encorto {
	background: var(--opty-yellow);
	border-radius: var(--opty-radius);
	padding: 20px 24px; margin: 0 0 28px;
}
.opty-encorto ul {
	font-family: var(--opty-body); font-size: 15px;
	line-height: 1.55; color: var(--opty-ink);
	margin: 10px 0 0; padding-left: 18px;
}

.opty-signoff {
	padding: 20px 22px; background: var(--opty-bg-alt);
	border-radius: var(--opty-radius); margin: 32px 0 0;
	font: 13px var(--opty-body); color: var(--opty-ink-soft); line-height: 1.6;
}
.opty-signoff__author { font-weight: 600; color: var(--opty-ink); margin-bottom: 4px; }
.opty-signoff__src { margin-top: 8px; font-size: 12px; color: var(--opty-ink-mute); }

@media (max-width: 1000px) { .opty-body-grid { grid-template-columns: 1fr; gap: 24px; } .opty-share, .opty-rail-r { position: static; flex-direction: row; flex-wrap: wrap; } .opty-share a { flex-direction: row; gap: 4px; padding: 0 14px; } }
@media (max-width: 600px)  { .opty-prose { font-size: 16px; } .opty-prose blockquote { font-size: 20px; padding: 20px 22px; } }

/* ─── Comments shell ───────────────────────────────────────────── */
.opty-comments { padding: 20px 0 56px; max-width: 880px; margin: 0 auto; }
.opty-comments__head { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 12px; border-bottom: 2px solid var(--opty-ink); margin-bottom: 20px; }
.opty-comments__title { font-family: var(--opty-display); font-size: 24px; font-weight: 700; letter-spacing: -0.7px; margin: 0; }
.opty-comments__count { color: var(--opty-ink-mute); font-weight: 500; }
.opty-comments__compose { display: grid; grid-template-columns: 40px 1fr; gap: 12px; padding: 16px; margin-bottom: 18px; background: #fff; border-radius: var(--opty-radius); border: 1px solid var(--opty-rule); }
.opty-comments__compose .ava { width: 40px; height: 40px; border-radius: 20px; background-size: cover; }
.opty-comments__compose .field { padding: 10px 14px; border: 1px solid var(--opty-rule); border-radius: var(--opty-radius-sm); font: 14px var(--opty-body); color: var(--opty-ink-mute); }

/* ─── Footer ───────────────────────────────────────────────────── */
.opty-footer {
	background: var(--opty-bg-alt); padding: 48px 0 24px;
	border-top: 2px solid var(--opty-ink); margin-top: 40px;
}
.opty-footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 32px; }
.opty-footer__brand { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.opty-footer__brand .opty-mast__dot { width: 36px; height: 36px; font-size: 18px; }
.opty-footer__brand .opty-mast__wordmark { font-size: 26px; letter-spacing: -0.8px; }
.opty-footer__about { font: 13px var(--opty-body); line-height: 1.6; color: var(--opty-ink-soft); margin: 0; max-width: 300px; }
.opty-footer__col ul { list-style: none; padding: 0; margin: 14px 0 0; }
.opty-footer__col li a { display: block; font: 13px var(--opty-body); color: var(--opty-ink-soft); padding: 4px 0; }
.opty-footer__col li a:hover { color: var(--opty-accent); text-decoration: none; }
.opty-footer__bottom { padding-top: 18px; border-top: 1px solid var(--opty-rule); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font: 12px var(--opty-body); color: var(--opty-ink-mute); }

@media (max-width: 900px) { .opty-footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .opty-footer__grid { grid-template-columns: 1fr; } }

/* ─── Mobile bottom nav ────────────────────────────────────────── */
.opty-bottombar { display: none; }
@media (max-width: 600px) {
	.opty-bottombar {
		position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
		display: flex; justify-content: space-around;
		background: var(--opty-bg-soft);
		border-top: 1px solid var(--opty-rule);
		padding: 8px 12px;
	}
	.opty-bottombar a {
		display: flex; flex-direction: column; align-items: center; gap: 2px;
		color: var(--opty-ink-mute); font: 500 10px var(--opty-body);
	}
	.opty-bottombar a.is-active { color: var(--opty-accent); font-weight: 600; }
	.opty-bottombar .ico { font-size: 18px; }
	body.opty { padding-bottom: 64px; }
}

/* ─── Generic prose pages (page.php) ───────────────────────────── */
.opty-page { padding: 56px 0; max-width: 760px; margin: 0 auto; }
.opty-page h1 { font-family: var(--opty-display); font-size: 44px; font-weight: 700; letter-spacing: -1.4px; margin: 0 0 24px; line-height: 1.05; }

/* ─── Pagination ───────────────────────────────────────────────── */
.opty-pagination { padding: 32px 0 56px; display: flex; gap: 8px; justify-content: center; }
.opty-pagination .page-numbers { padding: 8px 14px; border-radius: 999px; border: 1px solid var(--opty-rule); font: 600 13px var(--opty-body); color: var(--opty-ink); }
.opty-pagination .page-numbers.current { background: var(--opty-ink); color: #fff; border-color: var(--opty-ink); }

/* ─── Inline data card (used inside prose if added by editor) ──── */
.opty-data-card { background: #fff; border: 1px solid var(--opty-rule); border-radius: var(--opty-radius); padding: 24px; margin: 24px 0; }
.opty-data-card__grid { margin-top: 14px; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 18px; }
.opty-data-card__cell { padding: 16px; border-radius: var(--opty-radius-sm); }
.opty-data-card__cell--warm { background: var(--opty-accent-soft); }
.opty-data-card__cell--hot  { background: var(--opty-hot-soft); }
.opty-data-card__cell--ink  { background: var(--opty-bg-alt); }
.opty-data-card__v { font-family: var(--opty-display); font-size: 28px; font-weight: 700; letter-spacing: -0.8px; margin: 6px 0 2px; }
.opty-data-card__cell--warm .opty-data-card__v { color: var(--opty-accent); }
.opty-data-card__cell--hot  .opty-data-card__v { color: var(--opty-hot); }
.opty-data-card__cell--ink  .opty-data-card__v { color: var(--opty-ink); }

/* ─── Skip link (a11y) ─────────────────────────────────────────── */
.opty-skip { position: absolute; left: -9999px; top: -9999px; }
.opty-skip:focus { left: 16px; top: 16px; background: var(--opty-ink); color: #fff; padding: 10px 14px; border-radius: 6px; z-index: 100; }