*{margin:0;padding:0;box-sizing:border-box}
body{font-family:Georgia,'Times New Roman',serif;line-height:1.8;color:#222;background:#f4f1eb}
.inner-ebc81a{max-width:1100px;margin:0 auto;padding:0 24px}
.panel-1cac9d{background:linear-gradient(135deg,#2c3e50,#34495e);color:#fff;padding:48px 0;text-align:center;margin-bottom:48px}
.panel-1cac9d h1{font-size:36px;letter-spacing:2px;text-transform:uppercase;margin-bottom:6px}
.panel-1cac9d p{font-size:16px;opacity:.8;font-style:italic}
.panel-1cac9d .header-005f11{color:#fff;text-decoration:none;font-size:20px;letter-spacing:1px;text-transform:uppercase}
.section-7da9c6{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:28px}
.inner-d76a5f{background:#fff;border-radius:4px;box-shadow:0 2px 12px rgba(0,0,0,.08);padding:28px;transition:box-shadow .2s}
.inner-d76a5f:hover{box-shadow:0 4px 20px rgba(0,0,0,.14)}
.inner-d76a5f h2{font-size:22px;margin-bottom:10px;line-height:1.3}
.inner-d76a5f h2 a{color:#2c3e50;text-decoration:none}
.inner-d76a5f .nav-63f01e{font-size:12px;color:#888;margin-bottom:10px;text-transform:uppercase;letter-spacing:1px}
.inner-d76a5f p{font-size:15px;color:#555;margin-bottom:14px}
.wrapper-f3c6ab{color:#e74c3c;text-decoration:none;font-weight:700;font-size:13px;text-transform:uppercase;letter-spacing:.5px}
.shell-71a6fd{max-width:780px;margin:0 auto;padding:0 24px 60px}
.shell-71a6fd h1{font-size:36px;margin-bottom:10px;line-height:1.2}
.shell-71a6fd .nav-63f01e{font-size:13px;color:#888;display:block;margin-bottom:28px;text-transform:uppercase;letter-spacing:1px}
.shell-71a6fd h2{font-size:24px;margin:36px 0 14px}
.shell-71a6fd h3{font-size:19px;margin:28px 0 10px}
.shell-71a6fd p{margin-bottom:18px;font-size:17px}
.shell-71a6fd ul,.shell-71a6fd ol{margin:0 0 18px 28px}
.shell-71a6fd a{color:#e74c3c}
.shell-71a6fd img{max-width:100%;height:auto;border-radius:4px;margin:20px 0}
.content-8e4be3{border-top:2px solid #ddd;padding:28px 0;margin-top:48px;text-align:center;font-size:13px;color:#888}
.content-8e4be3 a{color:#888}
.section-f5e60a{border-top:1px solid #ccc;border-bottom:1px solid #ccc;padding:14px 0;margin-bottom:28px;font-size:14px;color:#888;font-style:italic;text-align:center}
.page-724a5b{background:#f9f3e3;padding:16px 20px;margin-top:28px;font-size:13px;color:#7a6230;border-radius:4px}
.footer-b50a72{font-size:11px;color:#888;margin:-22px 0 28px;text-transform:uppercase;letter-spacing:1.5px}
.sidebar-c61912{margin:0 0 28px}
.content-0238ab{width:100%;height:auto;border-radius:4px}
.outer-886011{border-top:2px solid #ddd;margin-top:40px;padding-top:24px}
.outer-886011 h4{font-size:16px;text-transform:uppercase;letter-spacing:1px;margin-bottom:16px;color:#888}
.mag-related-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.mag-related-item a{color:#2c3e50;text-decoration:none;font-size:15px}
.mag-related-item a:hover{color:#e74c3c}
.block-1d4503{background:#fff;border-radius:4px;box-shadow:0 2px 12px rgba(0,0,0,.08);padding:22px 28px;margin-top:28px}
.block-1d4503 p{font-size:15px;padding:4px 0;margin:0}
.block-1d4503 .nav-63f01e{margin:0 8px 0 0;display:inline}
.block-1d4503 a{color:#2c3e50;text-decoration:none}
.block-1d4503 a:hover{color:#e74c3c}
/* === Theme === */
:root{--primary:#C4174A;--accent:#F0A500;--bg:#F4F2F7;--fg:#1C1A2B;--border:#D8D4E8;--r:6px;--fb:'Outfit';--fh:'Syne'}
/* === Custom === */
/*
  Design reference: 1980s Barcelona graphic design explosion
  (La Luna de Madrid / Estudio Mariscal era — post-Franco cultural renaissance,
   irreverent poster-bold typography, unexpected color pairings)
  Sofía Navarro: Barcelona graphic designer who treats hair color like illustration —
  bold experimentation, casual voice, design-studio sensibility in the bathroom.
*/

@import url('https://fonts.googleapis.com/css2?family=Syne:wght@600;700;800&family=Outfit:wght@400;500;600&display=swap');

:root {
  --primary: #C4174A;
  --accent:  #F0A500;
  --bg:      #F8F5F0;
  --fg:      #1C1A2B;
  --border:  #DDD5C8;
  --r:       6px;
  --fb:      'Outfit';
  --fh:      'Syne';
  --card-bg: #EDE8E0;
  --muted:   #635E7A;
}

/* === BASE === */

body {
  font-family: var(--fb), system-ui, -apple-system, sans-serif;
  color: var(--fg);
  background: var(--bg);
  font-size: 1rem;
  line-height: 1.7;
  margin: 0;
  padding: 0;
}

::selection {
  background: var(--primary);
  color: #fff;
}

/* === TYPOGRAPHY === */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--fh), system-ui, sans-serif;
  color: var(--primary);
  line-height: 1.2;
  margin-top: 1.6em;
  margin-bottom: 0.5em;
}

h1 { font-size: 2.2rem; font-weight: 800; }
h2 { font-size: 1.6rem; font-weight: 700; }
h3 { font-size: 1.25rem; font-weight: 700; }
h4 { font-size: 1.05rem; font-weight: 600; }
h5 { font-size: 0.95rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.07em; }
h6 { font-size: 0.85rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.09em; color: var(--muted); }

p {
  margin: 0 0 1.2em;
}

a {
  color: var(--primary);
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-underline-offset: 3px;
  transition: color 0.15s;
}

a:hover {
  color: var(--accent);
  text-decoration-color: var(--primary);
}

blockquote {
  margin: 1.5em 0;
  padding: 0.8em 1.2em;
  border-left: 4px solid var(--primary);
  background: var(--card-bg);
  border-radius: 0 var(--r) var(--r) 0;
  font-style: italic;
  color: var(--muted);
}

blockquote p {
  margin: 0;
}

ul, ol {
  padding-left: 1.4em;
  margin: 0 0 1.2em;
}

li {
  margin-bottom: 0.35em;
}

ul li::marker {
  color: var(--accent);
}

ol li::marker {
  color: var(--primary);
  font-weight: 600;
}

hr {
  border: none;
  border-top: 2px solid var(--border);
  margin: 2em 0;
}

img {
  max-width: 100%;
  height: auto;
}

/* === HEADER === */

.panel-1cac9d {
  background: var(--primary);
  color: #fff;
  padding: 1.8em 1.4em 1.6em;
}

.panel-1cac9d h1 {
  font-family: var(--fh), system-ui, sans-serif;
  font-size: 2.4rem;
  font-weight: 800;
  color: #fff;
  margin: 0 0 0.25em;
  letter-spacing: -0.01em;
}

.panel-1cac9d p {
  color: rgba(255, 255, 255, 0.8);
  font-size: 1rem;
  margin: 0;
}

.panel-1cac9d a {
  color: #fff;
  text-decoration: none;
}

.panel-1cac9d a:hover {
  color: var(--accent);
}

/* === NAV === */

nav {
  background: var(--fg);
  padding: 0.5em 1.4em;
}

nav a {
  color: rgba(255, 255, 255, 0.75);
  text-decoration: none;
  font-size: 0.88rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0.4em 0.6em;
  display: inline-block;
  transition: color 0.15s;
}

nav a:hover {
  color: var(--accent);
}

/* === CARDS === */

.card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 1.1em 1.3em;
  transition: box-shadow 0.2s, border-color 0.2s;
}

.card:hover {
  border-color: var(--primary);
  box-shadow: 0 3px 14px rgba(196, 23, 74, 0.12);
}

.card h2 {
  font-family: var(--fh), system-ui, sans-serif;
  font-size: 1.15rem;
  font-weight: 700;
  margin-top: 0;
  margin-bottom: 0.4em;
}

.card h2 a {
  color: var(--fg);
  text-decoration: none;
}

.card h2 a:hover {
  color: var(--primary);
  text-decoration: underline;
  text-decoration-color: var(--accent);
}

.card p {
  font-size: 0.92rem;
  color: var(--muted);
  margin-bottom: 0.7em;
}

.read-more {
  color: var(--primary);
  font-weight: 600;
  font-size: 0.87rem;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-bottom: 2px solid var(--accent);
  padding-bottom: 1px;
}

.read-more:hover {
  color: var(--accent);
  border-bottom-color: var(--primary);
}

/* === ARTICLE CONTENT === */

.article-content h1 {
  font-family: var(--fh), system-ui, sans-serif;
  font-weight: 800;
  border-bottom: 3px solid var(--primary);
  padding-bottom: 0.3em;
}

.article-content h2 {
  font-family: var(--fh), system-ui, sans-serif;
  font-weight: 700;
  border-left: 4px solid var(--accent);
  padding-left: 0.6em;
}

.article-content h3 {
  font-family: var(--fh), system-ui, sans-serif;
  font-weight: 700;
  color: var(--fg);
}

.article-content a {
  color: var(--primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.article-content a:hover {
  color: var(--accent);
}

.article-content img {
  border-radius: var(--r);
  max-width: 100%;
  height: auto;
  display: block;
  margin: 1.4em 0;
}

.article-content blockquote {
  border-left-color: var(--accent);
  background: var(--card-bg);
}

.article-content ul li::marker {
  color: var(--accent);
}

.article-content ol li::marker {
  color: var(--primary);
  font-weight: 600;
}

/* === FOOTER === */

footer {
  background: var(--fg);
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.82rem;
  padding: 1.2em;
  margin-top: 3em;
  text-align: center;
  border-top: 3px solid var(--primary);
}

footer a {
  color: rgba(255, 255, 255, 0.8);
  text-decoration: underline;
  text-underline-offset: 2px;
}

footer a:hover {
  color: var(--accent);
}

/* === R2 fixes (2026-06-20T07:40:19.677913+00:00) === */

/* Fix 1: H2 section breaks need more breathing room above */
main.shell-71a6fd article h2 {
  margin-top: 2.4em;
  margin-bottom: 0.5em;
}

/* Fix 2: Increase line-height for long-form readability */
main.shell-71a6fd article p {
  line-height: 1.78;
}

/* Fix 3: In-text links inherit body color to read as natural recommendations, not ads */
main.shell-71a6fd article a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Fix 4: Hide the generic legal disclaimer block (financial/legal advisor copy is off-topic for a hair dye blog) */
section.page-724a5b {
  display: none;
}

/* Fix 5: Subtle separator between homepage article cards */
.section-7da9c6 .inner-d76a5f {
  border-bottom: 1px solid #e8e0d8;
  padding-bottom: 1.4em;
  margin-bottom: 1.4em;
}

/* === R3 fixes (2026-06-20T08:30:19.571010+00:00) === */

/* Fix 1: Course/affiliate links stand out in warm amber so readers spot them as recommendations */
main.shell-71a6fd article a[href*='/link/'] {
  color: var(--accent);
  font-weight: 500;
}

/* Fix 2: YMYL hair disclaimer reads as Sofía's aside, not a jarring legal block */
section.page-724a5b {
  font-size: 0.85rem;
  color: var(--muted);
  border-left: 3px solid var(--border);
  padding: 0.55em 1em;
  margin-top: 2.5em;
  background: transparent;
}

/* Fix 3: Related-articles zone gets a visual break from the content above it */
.outer-886011 {
  border-top: 2px solid var(--border);
  padding-top: 1.5em;
  margin-top: 2em;
}

/* Fix 4: Publication date shrinks to metadata weight so H1 dominates the article opening */
main.shell-71a6fd time.nav-63f01e {
  color: var(--muted);
  font-size: 0.85rem;
  display: block;
  margin-bottom: 0.75em;
}

/* Fix 5: Subtle dividers between author-page sections (bio / articles / disclosure) */
main.shell-71a6fd article > section:not(.page-724a5b) {
  border-top: 1px solid var(--border);
  padding-top: 1.5em;
  margin-top: 2em;
}

/* === R4 fixes (2026-06-20T09:10:22.550755+00:00) === */

/* Fix 1: Warm cream background replaces cold lavender — matches 'kitchen-counter' voice */
/* (applied in-place to :root above) */

/* Fix 2: H3 sub-section spacing — proportional to H2 so the eye finds sub-breaks quickly */
main.shell-71a6fd article h3 {
  margin-top: 2em;
  margin-bottom: 0.4em;
}

/* Fix 3: Non-affiliate in-text links → muted so they read as 'clickable' without competing with amber affiliate links */
main.shell-71a6fd article a:not([href*='/link/']) {
  color: var(--muted);
}

/* Fix 4: Related-articles links — quiet invitation, hover reveals primary */
.outer-886011 .mag-related-item a {
  color: var(--fg);
  text-decoration: none;
  font-size: 0.9rem;
  display: block;
  padding: 0.2em 0;
}

.outer-886011 .mag-related-item a:hover {
  color: var(--primary);
}

/* Fix 5: Modified-date block matches publication-date metadata weight */
.footer-b50a72 {
  font-size: 0.8rem;
  color: var(--muted);
  display: block;
  margin-bottom: 0.5em;
}