/* ==================================================================
   Newsletter popup ("The Brief")
   Three layout variants — modal (centered), bar (bottom), corner (corner card).
   Driven by data-style on .brief-pop. Ported from the prototype, hooked
   to the theme's design tokens (--ink, --paper, --accent-*, etc.).
   ================================================================== */

/* Backdrop */
.brief-pop-backdrop{
	position: fixed; inset: 0; z-index: 9000;
	background: rgba(15,15,14,.42);
	backdrop-filter: blur(6px) saturate(1.05);
	-webkit-backdrop-filter: blur(6px) saturate(1.05);
	opacity: 0; pointer-events: none;
	transition: opacity .35s var(--ease-out);
}
.brief-pop-backdrop.open{ opacity: 1; pointer-events: auto; }

/* Container */
.brief-pop{
	position: fixed; z-index: 9001; inset: 0;
	display: grid; place-items: center;
	padding: 24px;
	pointer-events: none;
}
.brief-pop[hidden]{ display: none; }

/* Card */
.brief-pop-card{
	position: relative;
	width: min(960px, 100%);
	background: var(--ink); color: var(--paper);
	border-radius: var(--r-xl);
	box-shadow: 0 24px 64px rgba(15,15,14,.32), 0 6px 16px rgba(15,15,14,.18);
	overflow: hidden;
	display: grid; grid-template-columns: minmax(0, 1fr);
	pointer-events: auto;
	transform: translateY(28px) scale(.985);
	opacity: 0;
	transition: transform .55s var(--ease-out), opacity .4s var(--ease-out);
	isolation: isolate;
}
.brief-pop.open .brief-pop-card{ transform: translateY(0) scale(1); opacity: 1; }
@media (min-width: 880px){
	.brief-pop-card{ grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
}

/* Decorative wash */
.brief-pop-card::before{
	content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
	background:
		radial-gradient(60% 60% at 0% 100%, rgba(201,83,46,.36), transparent 62%),
		radial-gradient(50% 60% at 100% 0%, rgba(31,58,46,.45), transparent 60%),
		radial-gradient(20% 20% at 78% 86%, rgba(165,127,44,.18), transparent 70%);
}
.brief-pop-card > *{ position: relative; z-index: 1; }

/* LEFT — editorial body */
.brief-pop-body{
	padding: 40px 32px 32px;
	display: flex; flex-direction: column; gap: 18px;
	border-bottom: 1px solid rgba(247,245,238,.10);
	min-width: 0;
}
@media (min-width: 880px){
	.brief-pop-body{ padding: 56px 48px; border-bottom: 0; border-right: 1px solid rgba(247,245,238,.10); }
}

.brief-pop-eye{
	font-family: var(--mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
	color: rgba(247,245,238,.72);
	display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.brief-pop-eye .dot{ width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.brief-pop-eye .sep{ color: rgba(247,245,238,.32); }
.brief-pop-eye .iss{ color: rgba(247,245,238,.5); }

.brief-pop h2{
	font-family: var(--sans); font-weight: 500;
	font-size: clamp(28px, 3.4vw, 42px); line-height: 1.04; letter-spacing: -.02em;
	margin: 6px 0; max-width: 18ch; color: var(--paper); text-wrap: balance;
}
.brief-pop h2 .it{ font-family: var(--serif); font-style: italic; font-weight: 400; color: #F4E5DA; }

.brief-pop-lede{
	color: rgba(247,245,238,.78); font-size: 16px; line-height: 1.5; max-width: 42ch; margin: 0;
}

/* TOC peek */
.brief-pop-toc{
	margin-top: 8px;
	padding: 18px;
	border: 1px solid rgba(247,245,238,.14);
	border-radius: var(--r-md);
	background: rgba(247,245,238,.04);
	display: flex; flex-direction: column; gap: 10px;
}
.brief-pop-toc .toc-head{
	display: flex; justify-content: space-between; gap: 12px;
	font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase;
	color: rgba(247,245,238,.55);
	padding-bottom: 6px; border-bottom: 1px solid rgba(247,245,238,.10);
	align-items: baseline;
}
.brief-pop-toc .toc-head strong{ color: var(--paper); font-weight: 500; }
.brief-pop-toc ol{
	list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px;
	counter-reset: toc;
}
.brief-pop-toc li{
	display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: baseline;
	font-size: 14.5px; line-height: 1.35; color: rgba(247,245,238,.92);
}
.brief-pop-toc li::before{
	counter-increment: toc; content: "0" counter(toc);
	font-family: var(--mono); font-size: 11px; letter-spacing: .12em; color: rgba(247,245,238,.4);
}
.brief-pop-toc li .read-time{
	font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: rgba(247,245,238,.42);
}
.brief-pop-toc li .it{ font-family: var(--serif); font-style: italic; font-weight: 400; color: #F4E5DA; }

/* RIGHT — form rail */
.brief-pop-form-wrap{
	padding: 32px 32px 28px;
	display: flex; flex-direction: column; gap: 18px;
	justify-content: center;
	min-width: 0;
}
@media (min-width: 880px){
	.brief-pop-form-wrap{ padding: 56px 48px; }
}

.brief-pop-form-head{ display: flex; flex-direction: column; gap: 8px; }
.brief-pop-form-head .micro{
	font-family: var(--mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
	color: rgba(247,245,238,.55);
}
.brief-pop-form-head .micro .ok{ color: #95BF47; margin-right: 4px; }
.brief-pop-form-head h3{
	font-family: var(--sans); font-weight: 500; font-size: 22px; line-height: 1.2; letter-spacing: -.01em;
	margin: 0; color: var(--paper);
}
.brief-pop-form-head p{ font-size: 14px; color: rgba(247,245,238,.66); margin: 0; line-height: 1.45; }

.brief-pop-form{ display: flex; flex-direction: column; gap: 12px; }
.bp-field{
	display: flex; align-items: center; gap: 8px;
	background: rgba(247,245,238,.08);
	border: 1px solid rgba(247,245,238,.18);
	border-radius: var(--r-pill);
	padding: 6px 6px 6px 18px;
	transition: border-color .2s var(--ease-out), background .2s var(--ease-out);
}
.bp-field:focus-within{ border-color: rgba(247,245,238,.45); background: rgba(247,245,238,.12); }
.bp-field input{
	flex: 1; min-width: 0; background: transparent; border: 0; outline: 0;
	font-family: var(--sans); font-size: 15px; color: var(--paper); padding: 10px 0;
}
.bp-field input::placeholder{ color: rgba(247,245,238,.42); }
.bp-field button{
	padding: 12px 20px; border-radius: var(--r-pill);
	background: var(--accent-2, #B14624); color: var(--paper); font-weight: 500; font-size: 14px; letter-spacing: -.005em;
	transition: background .2s var(--ease-out), transform .2s var(--ease-out);
	display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
	border: 0; cursor: pointer; font-family: var(--sans);
}
.bp-field button:hover{ background: var(--accent-3, #A03A1E); transform: translateY(-1px); }
.bp-field button:disabled{ opacity: .6; cursor: wait; transform: none; }
.bp-field .arrow{ display: inline-block; transition: transform .25s var(--ease-out); }
.bp-field button:hover .arrow{ transform: translateX(3px); }

.bp-roles{ display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.bp-role{
	display: inline-flex; align-items: center; gap: 6px;
	padding: 6px 12px;
	border-radius: var(--r-pill);
	border: 1px solid rgba(247,245,238,.18);
	background: rgba(247,245,238,.04);
	color: rgba(247,245,238,.78);
	font-size: 12.5px; font-family: var(--sans); cursor: pointer;
	transition: all .18s var(--ease-out);
	user-select: none;
	position: relative;
}
.bp-role:hover{ border-color: rgba(247,245,238,.4); color: var(--paper); }
.bp-role input{ position: absolute; opacity: 0; pointer-events: none; }
.bp-role.checked{ background: var(--accent-soft); border-color: var(--accent-soft); color: var(--ink); }
.bp-role-label-head{
	font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase;
	color: rgba(247,245,238,.55); margin-bottom: 6px;
}

.bp-foot{
	display: flex; flex-wrap: wrap; gap: 14px 18px; align-items: center;
	font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
	color: rgba(247,245,238,.6);
}
.bp-foot .sep{ color: rgba(247,245,238,.22); }
.bp-foot .ok{ color: #95BF47; margin-right: 4px; }
.bp-foot a{ text-decoration: underline; text-decoration-color: rgba(247,245,238,.22); text-underline-offset: 3px; color: inherit; }
.bp-foot a:hover{ text-decoration-color: var(--paper); }

.bp-error{
	font-size: 13px; color: #ffb39b; line-height: 1.4;
	display: none;
}
.bp-error.show{ display: block; }

/* Close button */
.brief-pop-close{
	position: absolute; top: 14px; right: 14px; z-index: 5;
	width: 38px; height: 38px; border-radius: 50%;
	background: rgba(247,245,238,.08); color: var(--paper);
	display: inline-flex; align-items: center; justify-content: center;
	transition: background .2s var(--ease-out), transform .2s var(--ease-out);
	border: 1px solid rgba(247,245,238,.14);
	cursor: pointer; padding: 0;
}
.brief-pop-close:hover{ background: rgba(247,245,238,.16); transform: rotate(90deg); }
.brief-pop-close svg{ width: 16px; height: 16px; }

/* SUCCESS state */
.brief-pop-card.is-success .brief-pop-form,
.brief-pop-card.is-success .brief-pop-form-head,
.brief-pop-card.is-success .brief-pop-body{ display: none; }
.brief-pop-success{ display: none; }
.brief-pop-card.is-success .brief-pop-success{
	display: flex; flex-direction: column; gap: 18px;
	padding: 16px 0;
}
.brief-pop-success .stamp{
	width: 56px; height: 56px; border-radius: 50%;
	background: rgba(149,191,71,.12); border: 1px solid rgba(149,191,71,.4);
	display: inline-flex; align-items: center; justify-content: center;
	color: #B8DC78; flex-shrink: 0;
}
.brief-pop-success h3{
	font-family: var(--sans); font-weight: 500;
	font-size: clamp(24px, 2.6vw, 32px); line-height: 1.05; letter-spacing: -.02em;
	margin: 0; color: var(--paper); text-wrap: balance; max-width: 18ch;
}
.brief-pop-success h3 .it{ font-family: var(--serif); font-style: italic; font-weight: 400; color: #F4E5DA; }
.brief-pop-success p{ color: rgba(247,245,238,.78); font-size: 15px; line-height: 1.5; max-width: 46ch; margin: 0; }
.brief-pop-success p strong{ color: var(--paper); font-weight: 500; }

/* Bottom-bar variant */
.brief-pop[data-style="bar"]{
	inset: auto 0 0 0; padding: 0; display: block; pointer-events: none;
}
.brief-pop[data-style="bar"] .brief-pop-card{
	width: 100%;
	border-radius: var(--r-xl) var(--r-xl) 0 0;
	grid-template-columns: minmax(0, 1fr);
	transform: translateY(110%);
}
.brief-pop[data-style="bar"].open .brief-pop-card{ transform: translateY(0); }
@media (min-width: 880px){
	.brief-pop[data-style="bar"] .brief-pop-card{ grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
	.brief-pop[data-style="bar"] .brief-pop-body{ padding: 28px 40px 28px 48px; gap: 10px; border-right: 1px solid rgba(247,245,238,.10); border-bottom: 0; }
	.brief-pop[data-style="bar"] .brief-pop-form-wrap{ padding: 24px 48px 24px 32px; }
}
.brief-pop[data-style="bar"] .brief-pop-toc{ display: none; }
.brief-pop[data-style="bar"] h2{ font-size: clamp(20px, 2.2vw, 28px); max-width: 30ch; margin: 2px 0; }
.brief-pop[data-style="bar"] .brief-pop-lede{ font-size: 14.5px; }
.brief-pop[data-style="bar"] .brief-pop-form-head h3,
.brief-pop[data-style="bar"] .brief-pop-form-head .micro{ display: none; }

/* Corner-card variant */
.brief-pop[data-style="corner"]{
	inset: auto 24px 24px auto;
	padding: 0; display: block; pointer-events: none;
	width: min(440px, calc(100% - 48px));
	place-items: stretch;
}
.brief-pop[data-style="corner"] .brief-pop-card{
	width: 100%; grid-template-columns: minmax(0, 1fr);
	transform: translateY(40px) scale(.97);
	border-radius: var(--r-xl);
}
.brief-pop[data-style="corner"].open .brief-pop-card{ transform: translateY(0) scale(1); }
.brief-pop[data-style="corner"] .brief-pop-body{ padding: 32px 28px 18px; gap: 12px; border-right: 0; border-bottom: 0; }
.brief-pop[data-style="corner"] .brief-pop-form-wrap{ padding: 0 28px 28px; }
.brief-pop[data-style="corner"] .brief-pop-toc{ display: none; }
.brief-pop[data-style="corner"] h2{ font-size: 24px; margin: 2px 0; max-width: 20ch; }
.brief-pop[data-style="corner"] .brief-pop-lede{ font-size: 14px; max-width: 38ch; }
.brief-pop[data-style="corner"] .brief-pop-form-head h3,
.brief-pop[data-style="corner"] .brief-pop-form-head .micro{ display: none; }
.brief-pop[data-style="corner"] .brief-pop-card.is-success .brief-pop-success{ padding: 12px 0; }
.brief-pop[data-style="corner"] .brief-pop-success h3{ font-size: 22px; }

body[data-pop-style="corner"] .brief-pop-backdrop{ display: none; }

/* Body lock when modal/bar is open */
body.popup-lock{ overflow: hidden; }
body[data-pop-style="corner"].popup-lock{ overflow: auto; }