/* =========================================================================
   Case — Sean Frohman
   Warm tan editorial. Serif display, sans body.
   Palette: bg #EFE8D8 · ink #1A1A1A · primary #2563EB · cursor #E5392B
   ========================================================================= */

.case--seanfrohman { background: #EFE8D8; color: #1A1A1A; }
.case--seanfrohman a { color: #2563EB; }

.sf-eyebrow {
	font-family: 'Manrope', sans-serif;
	font-size: .76rem; font-weight: 600; letter-spacing: .18em;
	text-transform: uppercase; color: #6B6256; margin: 0 0 1em;
}

.sf-section { padding: clamp(70px, 9vw, 120px) 0; border-top: 1px solid rgba(0,0,0,.08); }
.sf-section:first-of-type { border-top: 0; }

.sf-cols {
	display: grid; grid-template-columns: 240px 1fr; gap: 60px; align-items: start;
}
@media (max-width: 880px) { .sf-cols { grid-template-columns: 1fr; gap: 16px; } }
.sf-aside {
	position: sticky; top: 100px;
}
@media (max-width: 880px) { .sf-aside { position: static; } }
.sf-aside h3 {
	font-family: 'Fraunces', serif;
	font-weight: 500;
	font-size: 1.7rem; line-height: 1.1;
	margin: 0; color: #1A1A1A;
}

/* ---------- Hero ---------- */
.sf-hero {
	padding: clamp(70px, 12vw, 150px) 0 clamp(60px, 9vw, 100px);
	background:
		radial-gradient(60% 50% at 20% 0%, rgba(229,57,43,.05), transparent 60%),
		#EFE8D8;
}
.sf-hero__inner {
	display: grid; grid-template-columns: 1.4fr 1fr; gap: 60px; align-items: center;
}
@media (max-width: 880px) { .sf-hero__inner { grid-template-columns: 1fr; } }
.sf-title {
	font-family: 'Fraunces', serif;
	font-weight: 400;
	font-size: clamp(2.6rem, 6.4vw, 5rem);
	line-height: 1.05; letter-spacing: -.02em;
	margin: .2em 0 .5em;
	color: #1A1A1A;
}
.sf-title em {
	font-style: italic;
	font-weight: 500;
	color: #2563EB;
	position: relative;
}
.sf-title em::after {
	content: ''; position: absolute; left: 0; bottom: -.05em; height: 3px; width: 100%;
	background: #E5392B;
	transform: scaleX(0); transform-origin: 0 50%;
	animation: sf-underline 1.4s .6s cubic-bezier(.7,.0,.2,1) forwards;
}
@keyframes sf-underline { to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) { .sf-title em::after { transform: scaleX(1); animation: none; } }

.sf-lede {
	font-family: 'Manrope', sans-serif;
	font-size: clamp(1.05rem, 1.5vw, 1.2rem); line-height: 1.55;
	color: #3A352E; max-width: 56ch; margin: 0;
}

/* ---------- Portrait (CSS portrait illustration with shines) ---------- */
.sf-hero__portrait { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.sf-portrait {
	position: relative;
	width: clamp(220px, 26vw, 320px);
	aspect-ratio: 4/5;
	background:
		linear-gradient(180deg, #DCC9A8 0%, #C7A06D 100%);
	border-radius: 200px 200px 24px 24px;
	overflow: hidden;
	box-shadow:
		inset 0 -30px 60px rgba(0,0,0,.18),
		0 30px 60px -30px rgba(0,0,0,.25);
}
.sf-portrait__head {
	position: absolute; top: 14%; left: 50%; transform: translateX(-50%);
	width: 60%; aspect-ratio: 1; border-radius: 50%;
	background: radial-gradient(circle at 35% 30%, #E8C9A0, #B68652);
	box-shadow: inset -10px -20px 30px rgba(0,0,0,.15);
}
.sf-portrait__glasses {
	position: absolute; top: 30%; left: 50%; transform: translateX(-50%);
	width: 44%; height: 10%;
	border: 3px solid #1A1A1A; border-radius: 18px 18px 14px 14px;
	background:
		linear-gradient(110deg, rgba(255,255,255,.6) 0%, rgba(255,255,255,0) 30%, rgba(255,255,255,0) 60%, rgba(255,255,255,.4) 90%);
	background-size: 200% 100%;
	animation: sf-shine 4.5s cubic-bezier(.2,.7,.2,1) infinite;
}
.sf-portrait__glasses::before,
.sf-portrait__glasses::after {
	content: ''; position: absolute; top: 5%; width: 42%; height: 90%;
	border-radius: 50% 50% 35% 35%;
	background: rgba(20,20,20,.85);
	box-shadow: inset 0 0 12px rgba(255,255,255,.18);
}
.sf-portrait__glasses::before { left: 4%; }
.sf-portrait__glasses::after  { right: 4%; }
.sf-portrait__shine {
	position: absolute; bottom: 18%; left: 35%; width: 6%; aspect-ratio: 1;
	border-radius: 50%; background: #1A1A1A;
	box-shadow:
		0 0 0 4px rgba(0,0,0,.0),
		0 0 24px 4px rgba(255,255,255,.0);
	animation: sf-watch 5s ease-in-out infinite;
}
@keyframes sf-shine {
	0%   { background-position: -120% 0; }
	60%  { background-position: 220% 0; }
	100% { background-position: 220% 0; }
}
@keyframes sf-watch {
	0%, 70%, 100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); }
	78%           { box-shadow: 0 0 0 6px rgba(255,255,255,.7), 0 0 20px 4px rgba(255,255,255,.5); }
}
@media (prefers-reduced-motion: reduce) {
	.sf-portrait__glasses,
	.sf-portrait__shine { animation: none; }
}

.sf-portrait__caption {
	display: flex; flex-direction: column; align-items: center; gap: 2px;
	font-family: 'Fraunces', serif;
}
.sf-portrait__caption span:first-child { font-size: 1.4rem; font-weight: 500; }
.sf-portrait__caption span:last-child  {
	font-family: 'Manrope', sans-serif; font-size: .82rem; letter-spacing: .12em;
	text-transform: uppercase; color: #6B6256;
}

/* ---------- Feature list ---------- */
.sf-section--feature { background: #F4EFE2; }
.sf-feature-list { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 40px; }
@media (max-width: 760px) { .sf-feature-list { grid-template-columns: 1fr; } }
.sf-feature {
	border-top: 1px solid rgba(0,0,0,.15);
	padding-top: 18px;
}
.sf-feature h4 {
	font-family: 'Fraunces', serif;
	font-weight: 500; font-size: 1.3rem;
	margin: 0 0 8px; letter-spacing: -.005em;
}
.sf-feature p { margin: 0; color: #3A352E; line-height: 1.55; font-size: .98rem; }

/* ---------- Quote ---------- */
.sf-section--quote {
	background: #1A1A1A;
	color: #EFE8D8;
	border-top: 0;
	text-align: center;
}
.sf-quote {
	max-width: 800px; margin: 0 auto;
	font-family: 'Fraunces', serif;
	font-style: italic;
	font-weight: 400;
	font-size: clamp(1.6rem, 4vw, 2.8rem);
	line-height: 1.25;
}
.sf-quote p { margin: 0 0 20px; }
.sf-quote cite {
	display: block;
	font-family: 'Manrope', sans-serif;
	font-style: normal;
	font-size: .9rem; letter-spacing: .15em; text-transform: uppercase;
	color: #C7BBA0;
}

/* ---------- Palette ---------- */
.sf-palette {
	display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
}
@media (max-width: 760px) { .sf-palette { grid-template-columns: repeat(2, 1fr); } }
.sf-swatch {
	background: var(--c); color: var(--fg, #1A1A1A);
	border-radius: 14px; padding: 24px;
	display: flex; flex-direction: column; justify-content: space-between;
	aspect-ratio: 1.3; min-height: 130px;
	border: 1px solid rgba(0,0,0,.08);
	transition: transform .35s var(--ac-ease-out);
}
.sf-swatch:hover { transform: translateY(-4px); }
.sf-swatch span {
	font-family: 'Fraunces', serif; font-size: 1.1rem; font-weight: 500;
}
.sf-swatch code {
	font-family: var(--ac-mono); font-size: .82rem; letter-spacing: .04em;
}

.sf-type-card {
	grid-column: 1 / -1;
	background: #FFFEFA;
	border-radius: 14px;
	padding: 32px;
	border: 1px solid rgba(0,0,0,.06);
	display: grid; grid-template-columns: auto 1fr; gap: 40px; align-items: center;
}
@media (max-width: 600px) { .sf-type-card { grid-template-columns: 1fr; gap: 16px; } }
.sf-type-display {
	font-family: 'Fraunces', serif;
	font-size: clamp(3rem, 6vw, 4.6rem);
	line-height: 1;
	font-weight: 500;
	color: #1A1A1A;
}
.sf-type-body {
	font-family: 'Manrope', sans-serif;
	color: #3A352E; line-height: 1.55;
}