/* ==========================================================================
   miguelcollins.net — shared stylesheet
   Built on the Ember Studio design system (warm terracotta + stone neutrals,
   Playfair Display / Source Sans 3). All theme values are CSS variables in
   :root below — swap these to retheme the whole site.
   ========================================================================== */

:root {
  /* ---- Brand color ---- */
  --color-primary:        #C2410C;   /* terracotta — links, CTAs, active, focus */
  --color-primary-hover:  #9A3412;   /* burnt sienna — primary hover */
  --color-accent:         #F59E0B;   /* amber — highlights, badges */

  /* ---- Warm neutrals (stone) ---- */
  --color-bg:             #FAFAF9;   /* page background (hint of cream) */
  --color-surface:        #F5F5F4;   /* cards, panels */
  --color-surface-raised: #E7E5E4;   /* hover / raised */
  --color-ink:            #1C1917;   /* headings, primary text (warm near-black) */
  --color-ink-soft:       #57534E;   /* body, descriptions */
  --color-muted:          #78716C;   /* captions, timestamps */
  --color-border:         #D6D3D1;   /* borders, dividers */
  --stone-400:            #A8A29E;
  --stone-700:            #44403C;
  --stone-800:            #292524;
  --stone-900:            #1C1917;   /* dark sections / footer */

  /* ---- Status + tints ---- */
  --color-success:        #16A34A;
  --tint-primary:         #FFEDD5;   /* terracotta tint — active nav, icon chips */
  --tint-success:         #DCFCE7;   --ink-success: #166534;
  --tint-warning:         #FEF3C7;   --ink-warning: #92400E;

  /* ---- Type ---- */
  --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body:    'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:    'Fira Code', 'SF Mono', 'Roboto Mono', monospace;

  /* ---- Radius (tiered, never mixed) ---- */
  --radius-sm:   8px;    /* buttons, inputs */
  --radius-lg:   12px;   /* cards, panels */
  --radius-full: 9999px; /* pills, chips, avatars */

  /* ---- Elevation (warm, ink-tinted) ---- */
  --shadow-card-hover: 0 4px 16px rgba(28,25,23,.06);
  --shadow-button:     0 4px 12px rgba(194,65,12,.25);
  --shadow-modal:      0 24px 48px rgba(28,25,23,.12);

  /* ---- Layout ---- */
  --container: 1200px;
  --gutter: 24px;
  --focus-ring: 0 0 0 3px rgba(194,65,12,.12);
  --transition: 150ms ease;
}

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { color: inherit; }
::selection { background: var(--tint-primary); }
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: none;
  border-radius: var(--radius-sm);
  box-shadow: var(--focus-ring);
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ---- Layout helpers ---- */
.container { max-width: var(--container); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.container--narrow { max-width: 1000px; }
.container--reading { max-width: 820px; }
.section { padding-top: clamp(48px, 7vw, 88px); padding-bottom: clamp(48px, 7vw, 88px); }
.section--tight { padding-top: clamp(32px, 4vw, 48px); padding-bottom: clamp(32px, 4vw, 48px); }
.surface { background: var(--color-surface); border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); }
.dark { background: var(--stone-900); color: #FAFAF9; }

/* ---- Typography ---- */
.overline {
  display: inline-flex; align-items: center; gap: 8px;
  margin: 0 0 16px; font-size: 11px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-primary);
}
.display { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.02em; line-height: 1.04; margin: 0; text-wrap: balance; }
.h1 { font-size: clamp(38px, 5.8vw, 62px); }
.h2 { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; font-size: clamp(26px, 3.8vw, 44px); margin: 0; }
.h3 { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.01em; font-size: 22px; margin: 0; }
.lead { font-size: clamp(17px, 2vw, 20px); line-height: 1.6; color: var(--color-ink-soft); }
.prose { font-size: 18px; line-height: 1.7; color: var(--color-ink-soft); }
.prose strong { color: var(--color-ink); font-weight: 600; }
.text-primary { color: var(--color-primary); }
.mono { font-family: var(--font-mono); }

/* ---- Buttons (anchors or <button>) ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--font-body); font-weight: 600; font-size: 16px;
  padding: 13px 24px; border-radius: var(--radius-sm);
  text-decoration: none; border: 1px solid transparent; cursor: pointer;
  white-space: nowrap; transition: background var(--transition), box-shadow var(--transition), color var(--transition);
}
.btn--primary { background: var(--color-primary); color: #fff; }
.btn--primary:hover { background: var(--color-primary-hover); box-shadow: var(--shadow-button); color: #fff; }
.btn--secondary { background: transparent; color: var(--color-ink); border-color: var(--color-border); }
.btn--secondary:hover { background: var(--color-surface-raised); color: var(--color-ink); }
.btn--accent { background: var(--color-accent); color: var(--stone-900); }
.btn--accent:hover { box-shadow: 0 4px 16px rgba(245,158,11,.3); color: var(--stone-900); }
.btn--block { width: 100%; }
.btn svg { flex: 0 0 auto; }

/* ---- Cards ---- */
.card {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); padding: 28px;
}
.card--flat-bg { background: var(--color-bg); }
.card--interactive { transition: box-shadow var(--transition), transform var(--transition); }
.card--interactive:hover { box-shadow: var(--shadow-card-hover); transform: translateY(-2px); }
.card--stripe-primary { border-left: 4px solid var(--color-primary); }
.card--top-primary { border-top: 4px solid var(--color-primary); }
.card--top-accent  { border-top: 4px solid var(--color-accent); }
.card--top-muted   { border-top: 4px solid var(--stone-400); }

/* ---- Grid ---- */
.grid { display: grid; gap: 24px; }
.grid--auto { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.grid--auto-sm { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.split { display: flex; flex-wrap: wrap; gap: clamp(32px, 5vw, 64px); align-items: center; }
.split > .split__text { flex: 1 1 400px; min-width: 280px; }
.split > .split__media { flex: 1 1 340px; min-width: 260px; max-width: 440px; }
.split--reverse { flex-wrap: wrap-reverse; }

/* ---- Chips / badges / icon tiles ---- */
.chip { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; padding: 7px 14px; border-radius: var(--radius-full); background: var(--color-bg); border: 1px solid var(--color-border); color: var(--color-ink); }
.badge { display: inline-flex; align-items: center; font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; padding: 5px 11px; border-radius: var(--radius-full); }
.badge--live { background: var(--tint-success); color: var(--ink-success); }
.badge--soon { background: var(--tint-warning); color: var(--ink-warning); }
.badge--primary { background: var(--tint-primary); color: var(--color-primary); }
.icon-tile { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: var(--radius-lg); background: var(--tint-primary); color: var(--color-primary); }
.icon-circle { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--radius-full); background: var(--tint-primary); color: var(--color-primary); }

/* ---- Media frame ---- */
.frame { border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--color-border); box-shadow: var(--shadow-modal); }
.frame img { width: 100%; height: 100%; object-fit: cover; }
.ratio-4-3 { aspect-ratio: 4 / 3; }
.ratio-3-4 { aspect-ratio: 3 / 4; }

/* ==========================================================================
   Site navigation
   ========================================================================== */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(250,250,249,0.85);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--color-border);
}
.nav__inner { max-width: var(--container); margin: 0 auto; padding: 14px var(--gutter); display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.nav__logo { display: flex; align-items: baseline; gap: 10px; text-decoration: none; }
.nav__logo b { font-family: var(--font-display); font-weight: 700; font-size: 22px; letter-spacing: -0.02em; color: var(--color-ink); white-space: nowrap; }
.nav__logo span { font-family: var(--font-mono); font-size: 12px; color: var(--color-primary); }
.nav__links { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.nav__links a { display: block; text-decoration: none; font-size: 15px; font-weight: 600; padding: 8px 14px; border-radius: var(--radius-full); color: var(--color-ink-soft); transition: background var(--transition), color var(--transition); }
.nav__links a:hover { color: var(--color-ink); background: var(--color-surface-raised); }
.nav__links a[aria-current="page"] { color: var(--color-primary); background: var(--tint-primary); }

/* ==========================================================================
   Hero / stats / pillars
   ========================================================================== */
.hero-badge { position: absolute; left: -14px; bottom: -18px; background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 14px 18px; box-shadow: 0 8px 24px rgba(28,25,23,.10); display: flex; align-items: center; gap: 12px; }
.hero-badge b { font-family: var(--font-display); font-weight: 700; font-size: 34px; line-height: 1; color: var(--color-primary); }
.hero-badge span { font-size: 13px; line-height: 1.3; color: var(--color-ink-soft); }

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 32px; }
.stat__value { font-family: var(--font-display); font-weight: 700; font-size: clamp(34px, 4vw, 48px); line-height: 1; color: var(--color-accent); margin-bottom: 10px; }
.stat__label { font-size: 15px; line-height: 1.5; color: rgba(255,255,255,.72); max-width: 26ch; }

.feature-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.feature-list li { display: flex; align-items: center; gap: 12px; font-size: 15px; color: var(--color-ink); }
.feature-list svg { flex: 0 0 auto; }

.howto { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 20px; }
.howto li { display: flex; gap: 16px; }
.howto__num { flex: 0 0 auto; width: 32px; font-family: var(--font-display); font-weight: 700; font-size: 20px; color: var(--color-primary); }
.howto h3 { font-size: 17px; font-weight: 600; margin: 0 0 4px; }
.howto p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--color-ink-soft); }

/* ==========================================================================
   Résumé timeline
   ========================================================================== */
.timeline { position: relative; padding-left: 40px; }
.timeline::before { content: ""; position: absolute; left: 11px; top: 6px; bottom: 6px; width: 2px; background: var(--color-border); }
.timeline__item { position: relative; }
.timeline__item + .timeline__item { margin-top: 44px; }
.timeline__dot { position: absolute; left: -40px; top: 2px; width: 24px; height: 24px; border-radius: var(--radius-full); border: 4px solid var(--color-bg); box-shadow: 0 0 0 1px var(--color-border); }
.timeline__dot--primary { background: var(--color-primary); }
.timeline__dot--accent  { background: var(--color-accent); }
.role-head { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: baseline; margin-bottom: 6px; }
.role-meta { font-size: 13px; font-weight: 600; padding: 4px 12px; border-radius: var(--radius-full); }
.bullets { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.bullets li { display: flex; gap: 12px; font-size: 15px; line-height: 1.6; color: var(--color-ink); }
.bullets .dot { flex: 0 0 auto; width: 6px; height: 6px; border-radius: var(--radius-full); background: var(--color-primary); margin-top: 9px; }
.bullets .dot--accent { background: var(--color-accent); }

.competencies { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 12px; }
.competency { display: flex; align-items: center; gap: 12px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 14px 16px; font-size: 15px; font-weight: 600; }
.competency svg { flex: 0 0 auto; }

/* ==========================================================================
   Blog
   ========================================================================== */
.post { display: flex; flex-direction: column; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; transition: box-shadow var(--transition), transform var(--transition); }
.post:hover { box-shadow: var(--shadow-card-hover); transform: translateY(-2px); }
.post__band { height: 132px; display: flex; align-items: flex-end; padding: 18px; }
.post__band--primary { background: var(--tint-primary); }
.post__band--amber { background: var(--tint-warning); }
.post__band--muted { background: var(--color-surface-raised); }
.post__body { padding: 24px; display: flex; flex-direction: column; flex: 1 1 auto; }
.post__title { font-family: var(--font-display); font-weight: 700; font-size: 21px; line-height: 1.25; letter-spacing: -0.01em; margin: 0 0 12px; }
.post__excerpt { font-size: 15px; line-height: 1.6; color: var(--color-ink-soft); margin: 0 0 20px; flex: 1 1 auto; }
.post__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 16px; border-top: 1px solid var(--color-border); }
.post__meta { font-size: 13px; color: var(--color-ink-soft); }
.post__read { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: var(--color-primary); text-decoration: none; }
.post__read:hover { color: var(--color-primary-hover); }

/* ==========================================================================
   Contact form + FAQ
   ========================================================================== */
.field { display: flex; flex-direction: column; }
.field label { font-size: 14px; font-weight: 600; color: var(--color-ink); margin-bottom: 7px; }
.field .req { color: var(--color-primary); }
.input, .textarea, .select {
  width: 100%; font-family: var(--font-body); font-size: 16px; color: var(--color-ink);
  background: var(--color-bg); border: 1px solid var(--color-border);
  border-radius: var(--radius-sm); padding: 12px 14px; transition: border-color var(--transition), box-shadow var(--transition);
}
.textarea { line-height: 1.5; resize: vertical; }
.select { appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%2357534E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; }
.input:focus, .textarea:focus, .select:focus { border-color: var(--color-primary); box-shadow: var(--focus-ring); outline: none; }
.form-grid { display: flex; flex-direction: column; gap: 20px; }
.form-note { margin: 0; font-size: 13px; color: var(--color-ink-soft); text-align: center; }

.contact-method { display: flex; align-items: center; gap: 16px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 20px; text-decoration: none; transition: box-shadow var(--transition), transform var(--transition); }
a.contact-method:hover { box-shadow: var(--shadow-card-hover); transform: translateY(-2px); }
.contact-method .label { display: block; font-size: 13px; color: var(--color-ink-soft); }
.contact-method .value { display: block; font-size: 16px; font-weight: 600; color: var(--color-ink); }

.social { display: flex; gap: 12px; }
.social a { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: var(--radius-full); background: var(--color-bg); border: 1px solid var(--color-border); color: var(--color-ink-soft); transition: background var(--transition), color var(--transition), border-color var(--transition); }
.social a:hover { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }

.faq { display: flex; flex-direction: column; gap: 14px; }
.faq details { background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 4px 20px; }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; cursor: pointer; list-style: none; padding: 18px 0; font-weight: 600; font-size: 17px; color: var(--color-ink); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .chev { flex: 0 0 auto; transition: transform var(--transition); color: var(--color-primary); }
.faq details[open] summary .chev { transform: rotate(180deg); }
.faq details p { margin: 0; padding: 0 0 20px; font-size: 16px; line-height: 1.65; color: var(--color-ink-soft); }

.form-success { text-align: center; padding: 20px 8px; }
.form-success .check { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: var(--radius-full); background: var(--tint-success); color: var(--ink-success); margin-bottom: 20px; }
.form-success h2 { font-family: var(--font-display); font-weight: 700; font-size: 26px; letter-spacing: -0.01em; margin: 0 0 12px; }
.form-success p { font-size: 16px; line-height: 1.6; color: var(--color-ink-soft); margin: 0 auto 24px; max-width: 38ch; }

/* ==========================================================================
   Footer
   ========================================================================== */
.footer { background: var(--stone-900); color: var(--color-border); font-family: var(--font-body); }
.footer__top { max-width: var(--container); margin: 0 auto; padding: 64px var(--gutter) 32px; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 40px; }
.footer__brand { display: flex; align-items: baseline; gap: 8px; margin-bottom: 14px; }
.footer__brand b { font-family: var(--font-display); font-weight: 700; font-size: 24px; letter-spacing: -0.02em; color: #FAFAF9; }
.footer__brand span { font-family: var(--font-mono); font-size: 12px; color: var(--color-accent); }
.footer p.blurb { margin: 0; font-size: 15px; line-height: 1.6; color: var(--stone-400); max-width: 320px; }
.footer h4 { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-muted); margin: 0 0 16px; font-weight: 600; }
.footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.footer ul a, .footer .muted { color: var(--color-border); text-decoration: none; font-size: 15px; transition: color var(--transition); }
.footer ul a:hover { color: var(--color-accent); }
.footer .muted { color: var(--stone-400); }
.footer__social { display: flex; gap: 12px; margin-top: 20px; }
.footer__social a { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--radius-full); background: var(--stone-800); color: var(--color-border); transition: background var(--transition), color var(--transition); }
.footer__social a:hover { background: var(--color-primary); color: #fff; }
.footer__bar { border-top: 1px solid var(--stone-800); }
.footer__bar div { max-width: var(--container); margin: 0 auto; padding: 20px var(--gutter); display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; align-items: center; }
.footer__bar p { margin: 0; font-size: 13px; color: var(--color-muted); }

/* ---- Utilities ---- */
.center { text-align: center; }
.mx-auto { margin-left: auto; margin-right: auto; }
.mb-0 { margin-bottom: 0; }
.gap-14 { display: flex; flex-wrap: wrap; gap: 14px; }
.gap-14.center { justify-content: center; }
.stack-16 { display: flex; flex-direction: column; gap: 16px; }
.maxw-52 { max-width: 52ch; } .maxw-56 { max-width: 56ch; } .maxw-60 { max-width: 60ch; }
.relative { position: relative; }

/* ==========================================================================
   the_content() bodies (single posts, generic pages)
   ========================================================================== */
.mc-content > * { margin-top: 0; }
.mc-content > * + * { margin-top: 1.2em; }
.mc-content h2 { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.01em; font-size: clamp(24px, 3vw, 32px); color: var(--color-ink); margin-top: 1.6em; }
.mc-content h3 { font-family: var(--font-display); font-weight: 700; font-size: 22px; color: var(--color-ink); margin-top: 1.4em; }
.mc-content a { color: var(--color-primary); text-decoration: underline; text-underline-offset: 2px; }
.mc-content a:hover { color: var(--color-primary-hover); }
.mc-content ul, .mc-content ol { padding-left: 1.25em; }
.mc-content li + li { margin-top: 0.4em; }
.mc-content img { border-radius: var(--radius-lg); border: 1px solid var(--color-border); }
.mc-content blockquote { margin: 1.4em 0; padding: 4px 0 4px 20px; border-left: 4px solid var(--color-primary); color: var(--color-ink); font-style: italic; }
.mc-content code { font-family: var(--font-mono); font-size: 0.9em; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 2px 6px; }
.mc-content pre { background: var(--stone-900); color: #FAFAF9; border-radius: var(--radius-lg); padding: 20px; overflow: auto; }
.mc-content pre code { background: none; border: none; color: inherit; padding: 0; }

/* Pagination on the blog index */
.pagination { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 48px; }
.pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; padding: 8px 12px; border-radius: var(--radius-sm); border: 1px solid var(--color-border); background: var(--color-bg); color: var(--color-ink); text-decoration: none; font-weight: 600; font-size: 15px; }
.pagination .page-numbers.current { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
.pagination a.page-numbers:hover { background: var(--color-surface-raised); }

/* Blog card band: featured-image preview behind the category badge */
.post__band--image { position: relative; overflow: hidden; }
.post__band--image .post__band__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
/* Scrim so the badge stays legible over bright/busy photos */
.post__band--image::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, rgba(28,25,23,.42), rgba(28,25,23,0) 65%); }
.post__band--image .badge { position: relative; z-index: 2; }

/* ACF rich-text (wysiwyg) output — inherit the wrapper's .lead/.prose type,
   just normalize paragraph spacing so it matches the hand-authored markup */
.mc-rte p { margin: 0 0 1.1em; }
.mc-rte > :last-child { margin-bottom: 0; }