/*
Theme Name: AP Adventure Questboard (1-to-1)
Version: 6.0.0
*/
/*
 * Version: 6.0.0
Theme Name: AP Adventure Theme — Start Here Full (v4)
Theme URI: https://adampounders.com/
Author: Adam Pounders + ChatGPT
Description: Adventure-styled WordPress theme with hero, parchment sections, quest cards, CTA band, single-quest polish, patterns, and Start Here page.
\g<1>5.5.0
Text Domain: ap-adventure
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
*/
@import url('assets/css/components.css');


:root{
  --ap-cyber-blue:#0A3D62;
  --ap-neon-teal:#00C9A7;
  --ap-neon-teal-dark:#008b79;
  --ap-rpg-gold:#C49A3D;
  --ap-steel:#0b1420;
  --ap-parchment:#F5F1E6;
  --ap-ink:#0E0E0E;
  --ap-muted:#6b7280;
  --ap-glow:0 0 18px rgba(0,201,167,.45);
  --ap-card-shadow:0 6px 22px rgba(10,61,98,.15);
  --container:1180px;
  --h1:clamp(2.2rem, 5vw, 3.4rem);
  --h2:clamp(1.6rem, 3.2vw, 2.2rem);
  --h3:clamp(1.2rem, 2vw, 1.4rem);
  --lead:clamp(1.04rem, 1.4vw, 1.2rem);
}
html,body{height:100%}
body{margin:0;font-family:Inter, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;color:var(--ap-ink);line-height:1.7;background:#fff;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
h1,h2,h3{font-family:Cinzel, Georgia, "Times New Roman", serif;color:var(--ap-cyber-blue);line-height:1.2;margin:0 0 .6rem}
h1{font-size:var(--h1)}h2{font-size:var(--h2)}h3{font-size:var(--h3)}
p{margin:.25rem 0 1rem}a{color:var(--ap-cyber-blue);text-decoration:none}a:hover{color:var(--ap-neon-teal)}img{max-width:100%;height:auto}
.container{max-width:var(--container);margin:0 auto;padding:0 20px}
.section{padding:40px 0}.section--pad-lg{padding:56px 0}.section--alt{background:#f7f8fb}
.pill{background:var(--ap-parchment);border:1px solid #e8e2cf;border-radius:14px;box-shadow:0 10px 26px rgba(10,61,98,.10)}
.site-header{position:sticky;top:0;z-index:50;backdrop-filter:saturate(120%) blur(8px);background:rgba(255,255,255,.9);border-bottom:1px solid #eff2f6}
.nav{display:flex;align-items:center;justify-content:space-between;height:64px}
.brand{display:flex;align-items:baseline;gap:.6rem;text-decoration:none}
.brand__title{font-family:Cinzel, Georgia, serif;font-weight:700;letter-spacing:.02em;color:var(--ap-cyber-blue)}
.brand__tag{font-size:.9rem;color:var(--ap-muted)}
.nav-links{display:flex;gap:18px;align-items:center}.nav-links a{font-weight:600;text-decoration:none}
.nav-cta{display:inline-block;padding:.55rem .9rem;border-radius:12px;font-family:Exo, Orbitron, sans-serif;font-weight:700;background:#133648;color:#d7f7f2;box-shadow:0 4px 14px rgba(0,0,0,.2)}
.nav-cta:hover{background:#0e2935;color:#eafffb}
.hero{padding:96px 0 64px;color:#EAFBFA;position:relative;overflow:hidden;background:radial-gradient(1200px 600px at 20% -10%, rgba(0,201,167,.18), transparent 60%),linear-gradient(180deg, #0c2436 0%, #0d1a26 70%)}
.hero::after{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px);background-size:22px 22px;pointer-events:none}
.hero .kicker{color:var(--ap-rpg-gold);text-transform:uppercase;letter-spacing:.14em;font-weight:700;margin-bottom:12px}.hero .title{color:#EAFBFA}.hero .sub{font-size:var(--h3);color:#bfeee6;margin:6px 0 22px}
.btn-row{display:flex;flex-wrap:wrap;gap:10px}
.btn{display:inline-block;padding:.85rem 1.2rem;border-radius:16px;font-family:Exo, Orbitron, sans-serif;font-weight:700;border:2px solid transparent;transition:.15s ease;text-decoration:none}
.btn-primary{background:var(--ap-neon-teal);color:#062E2A;box-shadow:var(--ap-glow)}.btn-primary:hover{transform:translateY(-1px);box-shadow:0 0 24px rgba(0,201,167,.6);color:#052824}
.btn-ghost{background:transparent;color:#EAFBFA;border-color:#7bded1}.btn-ghost:hover{background:rgba(255,255,255,.08)}
.btn-gold{background:var(--ap-rpg-gold);color:#2b1c00;box-shadow:0 4px 14px rgba(196,154,61,.3)}.btn-gold:hover{transform:translateY(-1px)}
.card{background:#fff;border:1px solid #eaeef2;border-radius:14px;box-shadow:var(--ap-card-shadow);padding:18px 18px 16px;position:relative}
.parchment-wrap{background:var(--ap-parchment);border:1px solid #e8e2cf;border-radius:14px;box-shadow:0 10px 26px rgba(10,61,98,.10);padding:18px 18px 6px}
.cards{display:grid;gap:16px;grid-template-columns:repeat(12,1fr)}.card--span4{grid-column:span 4}
@media (max-width:1024px){.card--span4{grid-column:span 6}}
@media (max-width:640px){.card--span4{grid-column:span 12}}
.cta-band{background:#f7f8fb;padding:24px 0}.cta-band .pill{padding:16px}
.cta-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.cta-card{background:radial-gradient(800px 400px at 20% -10%, rgba(0,201,167,.12), transparent 60%), #0f2735;border:1px solid #183b4b;color:#d7f1ee;border-radius:12px;padding:16px;box-shadow:0 8px 20px rgba(0,0,0,.16)}
.cta-card h3{color:#eaf7f5}.cta-card .btn-gold{margin-top:8px}.cta-card .btn-primary{margin-top:8px}
@media (max-width:860px){.cta-grid{grid-template-columns:1fr}}
.breadcrumb{opacity:.85;font-size:.9rem;margin-bottom:10px}.breadcrumb a{color:#0a566d;text-decoration:none}.breadcrumb a:hover{color:var(--ap-neon-teal)}
.site-footer{background:#0b1420;color:#d8e2ea;padding:48px 0 28px}.site-footer a{color:#d8e2ea}.copyright{opacity:.8;font-size:.95rem;margin-top:8px}
#reading-progress{position:fixed;top:0;left:0;height:4px;width:0;z-index:9999;background:linear-gradient(90deg, var(--ap-neon-teal), #1cddc3);box-shadow:0 0 12px rgba(0,201,167,.6)}
.quest-hero{padding:96px 0 40px;color:#EAFBFA;position:relative;overflow:hidden;background:radial-gradient(1200px 600px at 20% -10%, rgba(0,201,167,.18), transparent 60%),linear-gradient(180deg,#0c2436 0%,#0d1a26 70%)}.quest-hero::after{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px);background-size:22px 22px;pointer-events:none}
.meta-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:8px}.chip{background:#0b2736;color:#cfe7e3;border:1px solid #144255;border-radius:999px;padding:.35rem .65rem;font-size:.85rem}
.quest-article{background:var(--ap-parchment);border:1px solid #e8e2cf;border-radius:14px;box-shadow:0 10px 26px rgba(10,61,98,.10);max-width:980px;margin:-40px auto 64px;padding:24px}
.quest-figure{background:#fff;border:1px solid #e8e2cf;border-radius:12px;overflow:hidden;box-shadow:0 8px 22px rgba(10,61,98,.12);margin:0 0 18px}
.quest-article h2{font-family:Cinzel, Georgia, serif;color:var(--ap-cyber-blue);margin:1.8rem 0 .6rem}.quest-article p{line-height:1.78}
.quest-article p:first-of-type::first-letter{float:left;font-family:Cinzel, Georgia, serif;font-size:3.2rem;line-height:.9;padding:.25rem .45rem 0 0;color:var(--ap-cyber-blue)}
.post-nav{display:flex;justify-content:space-between;gap:12px;margin-top:28px}.post-nav a{display:inline-block;padding:.65rem .9rem;border:1px solid #e8e2cf;border-radius:10px;background:#fff;text-decoration:none}
.related-wrap{margin-top:28px}.related-heading{font-family:Cinzel, Georgia, serif;color:var(--ap-cyber-blue);margin:.4rem 0}
.related-grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}.related-card{background:#fff;border:1px solid #e8e2cf;border-radius:12px;padding:14px;box-shadow:0 6px 18px rgba(10,61,98,.06);text-decoration:none}
.related-card h4{margin:.2rem 0 .35rem;font-family:Cinzel, Georgia, serif;color:var(--ap-cyber-blue)}.related-card p{margin:0;color:#2d3340;font-size:.95rem}
.callout{border-radius:12px;padding:14px 16px;margin:18px 0;border:1px solid}
.callout.note{background:#f7f8fb;border-color:#e3e8ee}.callout.tip{background:#eefaf7;border-color:#bdeee3}.callout.warning{background:#fff7ea;border-color:#f2d9a6}
.wp-block-quote.is-style-pullquote{border-left:4px solid var(--ap-neon-teal);background:#eefaf7;padding:12px 16px;color:#0b2736;border-radius:10px}
.hidden{display:none!important}


/* === Welcome + Parchment spacing hotfix (2025-10-06T23:46:39 UTC) === */

/* Ensure Welcome pill matches other parchment pills */
:root{
  --ap-parchment: var(--ap-parchment, #F5F1E6);
  --ap-parchment-border: var(--ap-parchment-border, #e8e2cf);
  --ap-card-radius: var(--ap-card-radius, 14px);
  --ap-card-shadow: var(--ap-card-shadow, 0 10px 30px rgba(10,61,98,.08));
}

/* Give the Welcome section the same padding and border as other pills */
section#welcome .parchment-pill,
#welcome .container > .parchment,
#welcome .container > .pill,
#welcome .container > .card,
#welcome .container > *:first-child{
  background: var(--ap-parchment);
  border: 1px solid var(--ap-parchment-border);
  border-radius: var(--ap-card-radius);
  box-shadow: var(--ap-card-shadow);
  padding: clamp(22px, 2.4vw, 34px) clamp(26px, 3vw, 40px);
}

/* Remove faint separators between sections */
.section,
.section--alt{ border-top: none; border-bottom: none; }

/* Button hover legibility: keep text dark on teal */
.btn.btn-primary:hover,
a.btn-primary:hover,
.button.is-primary:hover{
  color: #052b27 !important;
}


/* === v5.5: Start Here nav button (neon teal) unified behaviors === */
.site-header .nav-links a.nav-cta[href$="/start-here"],
.site-header .nav-links a.nav-cta[href$="/start-here/"],
.site-header .nav-links a.btn.btn-teal{
  background: var(--ap-neon-teal) !important;
  color: #062E2A !important;
  border: 0;
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(0,0,0,.10);
  font-weight: 700;
  text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.site-header .nav-links a.nav-cta[href$="/start-here"]:hover,
.site-header .nav-links a.nav-cta[href$="/start-here/"]:hover,
.site-header .nav-links a.btn.btn-teal:hover{
  transform: translateY(-1px);
  background: var(--ap-neon-teal) !important;
  color: #062E2A !important;
  box-shadow:
    0 0 0 6px rgba(0,201,167,.22),
    0 10px 22px rgba(0,0,0,.16);
}
.site-header .nav-links a.nav-cta[href$="/start-here"]:focus-visible,
.site-header .nav-links a.nav-cta[href$="/start-here/"]:focus-visible,
.site-header .nav-links a.btn.btn-teal:focus-visible{
  outline: 3px solid var(--ap-neon-teal);
  outline-offset: 3px;
  border-radius: 14px;
}
.site-header .nav-links a.nav-cta[href$="/start-here"]:active,
.site-header .nav-links a.nav-cta[href$="/start-here/"]:active,
.site-header .nav-links a.btn.btn-teal:active{
  transform: translateY(0);
  box-shadow: 0 4px 12px rgba(0,0,0,.12);
}


/* === AP CONSOLIDATED (GLOBAL) — v5.5.2 === */

/* Tokens */
:root{
  --ap-gold-text:#2b1c00;
  --ap-parchment:#EFE2C9;
}

/* Gold buttons */
:is(a,button).btn.btn-gold,
.wp-block-button .wp-block-button__link.btn-gold,
.wp-block-button .wp-block-button__link.has-ap-rpg-gold-background-color,
.wp-block-button .wp-block-button__link.has-gold-background-color,
.wp-block-button .wp-block-button__link[style*="#C49A3D"],
.wp-block-button .wp-block-button__link[style*="rgb(196, 154, 61)"],
.wp-block-button a[href^="mailto:adam@adampounders.com"],
a[href^="mailto:adam@adampounders.com"]{
  background:var(--ap-rpg-gold)!important;
  color:var(--ap-gold-text)!important;
  border:0!important;
  border-radius:12px!important;
  padding:14px 20px;
  font-weight:700;
  text-decoration:none;
  background-image:none!important;
  box-shadow:0 6px 18px rgba(0,0,0,.10);
}
:is(a,button).btn.btn-gold:hover,
.wp-block-button .wp-block-button__link.btn-gold:hover,
.wp-block-button .wp-block-button__link.has-ap-rpg-gold-background-color:hover,
.wp-block-button .wp-block-button__link.has-gold-background-color:hover,
.wp-block-button .wp-block-button__link[style*="#C49A3D"]:hover,
.wp-block-button .wp-block-button__link[style*="rgb(196, 154, 61)"]:hover,
.wp-block-button a[href^="mailto:adam@adampounders.com"]:hover,
a[href^="mailto:adam@adampounders.com"]:hover{
  transform:translateY(-1px);
  background:var(--ap-rpg-gold)!important;
  color:var(--ap-gold-text)!important;
  box-shadow:0 0 0 6px rgba(196,154,61,.22), 0 10px 22px rgba(0,0,0,.16);
}
:is(a,button).btn.btn-gold:focus-visible,
.wp-block-button .wp-block-button__link.btn-gold:focus-visible,
.wp-block-button .wp-block-button__link.has-ap-rpg-gold-background-color:focus-visible,
.wp-block-button .wp-block-button__link.has-gold-background-color:focus-visible,
.wp-block-button .wp-block-button__link[style*="#C49A3D"]:focus-visible,
.wp-block-button .wp-block-button__link[style*="rgb(196, 154, 61)"]:focus-visible,
.wp-block-button a[href^="mailto:adam@adampounders.com"]:focus-visible,
a[href^="mailto:adam@adampounders.com"]:focus-visible{
  outline:3px solid var(--ap-rpg-gold);
  outline-offset:3px;
  border-radius:14px;
}
.wp-block-button.is-style-outline .wp-block-button__link.btn-gold,
.wp-block-button.is-style-outline .wp-block-button__link.has-ap-rpg-gold-background-color,
.wp-block-button.is-style-outline .wp-block-button__link.has-gold-background-color{
  background:transparent!important;
  color:var(--ap-rpg-gold)!important;
  border:2px solid var(--ap-rpg-gold)!important;
  box-shadow:none!important;
}
.wp-block-button.btn-gold > .wp-block-button__link,
.wp-block-button.btn.btn-gold > .wp-block-button__link{
  background:var(--ap-rpg-gold)!important;
  color:var(--ap-gold-text)!important;
  border:0!important;
  border-radius:12px!important;
  padding:14px 20px!important;
  font-weight:700!important;
  text-decoration:none!important;
  background-image:none!important;
  box-shadow:0 6px 18px rgba(0,0,0,.10)!important;
}
.wp-block-button.btn-gold > .wp-block-button__link:hover,
.wp-block-button.btn.btn-gold > .wp-block-button__link:hover{
  transform:translateY(-1px);
  background:var(--ap-rpg-gold)!important;
  color:var(--ap-gold-text)!important;
  box-shadow:0 0 0 6px rgba(196,154,61,.22), 0 10px 22px rgba(0,0,0,.16)!important;
}
.wp-block-button.btn-gold > .wp-block-button__link:focus-visible,
.wp-block-button.btn.btn-gold > .wp-block-button__link:focus-visible{
  outline:3px solid var(--ap-rpg-gold)!important;
  outline-offset:3px!important;
  border-radius:14px!important;
}
.wp-block-button.btn-gold,
.wp-block-buttons .wp-block-button.btn-gold{
  background:transparent!important;
  background-image:none!important;
  box-shadow:none!important;
  filter:none!important;
  border:0!important;
  padding:0!important;
}
.wp-block-button.btn-gold::before,
.wp-block-button.btn-gold::after{display:none!important;}

/* Header nav — Start Here */
.site-header nav .menu li > a[href*="/start-here"]{
  background:var(--ap-neon-teal)!important;
  color:#062E2A!important;
  border:0!important;
  border-radius:12px;
  box-shadow:0 6px 18px rgba(0,0,0,.10)!important;
  text-shadow:none!important;
  filter:none!important;
  font-weight:700;
  background-image:none!important;
}
.site-header nav .menu li > a[href*="/start-here"]:hover{
  transform:translateY(-1px);
  background:var(--ap-neon-teal)!important;
  color:#062E2A!important;
  box-shadow:0 10px 22px rgba(0,0,0,.16)!important;
}
.site-header nav .menu li > a[href*="/start-here"]::before,
.site-header nav .menu li > a[href*="/start-here"]::after{display:none!important;}
.site-header nav .menu li.start-here-li,
.site-header nav .menu li.start-here-li::before,
.site-header nav .menu li.start-here-li::after{
  background:transparent!important;
  background-image:none!important;
  box-shadow:none!important;
  border:0!important;
}
.site-header nav .menu li.start-here-li a > span,
.site-header nav .menu li.start-here-li a .menu-text{
  background:transparent!important;
  background-image:none!important;
  box-shadow:none!important;
}

/* Parchment containers: restore horizontal padding */
.wp-block-group.parchment{padding-inline:32px!important;}
.home .wp-block-group.alignfull.section.parchment > .wp-block-group__inner-container > .wp-block-group.container{
  padding-left:32px!important;
  padding-right:32px!important;
}
.home .wp-block-group.alignfull.section.parchment[style*="padding-top"][style*="padding-bottom"]{
  padding-left:32px!important;
  padding-right:32px!important;
}


/* AP: Heading rhythm */
:root{
  --ap-h2-mt: 2.2rem; --ap-h2-mb: 1.0rem;
  --ap-h3-mt: 1.8rem; --ap-h3-mb: 0.8rem;
  --ap-h4-mt: 1.4rem; --ap-h4-mb: 0.6rem;
  --ap-h5-mt: 1.0rem; --ap-h5-mb: 0.5rem;
}
.entry-content h2, .wp-block-post-content h2 { margin-top: var(--ap-h2-mt); margin-bottom: var(--ap-h2-mb); line-height: 1.25; }
.entry-content h3, .wp-block-post-content h3 { margin-top: var(--ap-h3-mt); margin-bottom: var(--ap-h3-mb); line-height: 1.3; }
.entry-content h4, .wp-block-post-content h4 { margin-top: var(--ap-h4-mt); margin-bottom: var(--ap-h4-mb); line-height: 1.35; }
.entry-content h5, .wp-block-post-content h5 { margin-top: var(--ap-h5-mt); margin-bottom: var(--ap-h5-mb); line-height: 1.4; }


/* === 5.6.3.6 ===
 * - Quest template: fixes article markup and restores featured image placement
 * - Adds Next/Previous navigation to single Quest posts
 * - Ensures nav buttons display on mobile (quest-mobile-fixes.css)
 */


/* === Quests Archive Grid (2025-10-13) === */
.archive.post-type-archive-quest .parchment-wrap{background:var(--ap-parchment);border:1px solid var(--ap-parchment-border);box-shadow:0 10px 26px rgba(10,61,98,.10);padding:18px 18px 10px;border-radius:14px;}
.quest-filters{display:flex;gap:10px;margin:4px 4px 12px 4px}
.quest-filter{font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;border:1px solid #e3e8ee;background:#f7f8fb;box-shadow:0 2px 6px rgba(10,61,98,.05)}
.quest-filter.is-active{background:#0a6;color:#fff;border-color:#068565}
.quest-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:6px 2px 10px}
@media (max-width:1100px){.quest-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:680px){.quest-grid{grid-template-columns:1fr}}
.quest-card{position:relative;display:block;border:1px solid #eaeef2;border-radius:14px;background:#fff;padding:14px 14px 12px;box-shadow:var(--ap-card-shadow);text-decoration:none;color:#0b2736;transition:transform .16s ease, box-shadow .16s ease}
.quest-card:hover{transform:translateY(-2px);box-shadow:0 12px 34px rgba(10,61,98,.18)}
.quest-card h3{margin:.1rem 0 .3rem;font-family:Cinzel, Georgia, serif;font-size:1.05rem;color:var(--ap-cyber-blue)}
.quest-card time{display:block;font-size:.85rem;opacity:.8;margin:.05rem 0 .45rem}
.quest-card p{font-size:.95rem;line-height:1.55;margin:.1rem 0 0;color:#2d3340}
.chip-active{position:absolute;right:10px;top:10px}
.chip-active span{display:inline-block;background:#0a6;color:#fff;border-radius:999px;padding:.28rem .5rem;font-size:.8rem;box-shadow:0 6px 16px rgba(0,128,96,.35)}
/* end Quests Archive Grid */


/* Peg removal: eliminate decorative dots on quest cards */
.quest-card::after,
.quest-card::before {
  content: none !important;
  background: none !important;
  box-shadow: none !important;
}


/* Quest Grid bullet removal */
ul.quest-grid, .quest-board-grid ul.quest-grid { list-style: none !important; padding-left: 0 !important; margin-left: 0 !important; }
ul.quest-grid > li, .quest-board-grid ul.quest-grid > li { list-style: none !important; }
ul.quest-grid > li::marker { content: "" !important; }
ul.quest-grid > li::before, ul.quest-grid > li::after { content: none !important; background: none !important; box-shadow: none !important; }

/*
 * AP Adventure — style-additions.css
 * Phase 5: Visual Refinement
 *
 * INSTRUCTIONS: Append this entire file to the bottom of style.css.
 * Do not replace any existing rules. These are additive only.
 *
 * Contains:
 * 1. Nav list fix for wp_nav_menu (Phase 3 dependency)
 * 2. About page two-column intro layout
 * 3. Timeline component (About page)
 * 4. Focus/feature card grid (About + Work With Me)
 * 5. List styles for Work With Me
 * 6. Typographic tightening (h1/h2 line-height, font weight cleanup)
 * 7. Section padding normalization
 */


/* =============================================================
   1. NAV — wp_nav_menu LIST RESET
   Required after Phase 3 nav migration. wp_nav_menu wraps links
   in <ul><li>, which the original CSS did not account for.
   ============================================================= */

.nav-links ul.nav-links__list,
.nav-links .menu {
  display: flex;
  gap: 18px;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-links ul.nav-links__list li,
.nav-links .menu li {
  margin: 0;
}

.nav-links ul.nav-links__list a,
.nav-links .menu a {
  font-weight: 600;
  text-decoration: none;
  color: var(--ap-cyber-blue);
}

.nav-links ul.nav-links__list a:hover,
.nav-links .menu a:hover {
  color: var(--ap-neon-teal);
}

/* Preserve CTA button styling for Start Here nav item */
.nav-links ul.nav-links__list a.nav-cta,
.nav-links .menu a.nav-cta {
  display: inline-block;
  padding: .55rem .9rem;
  border-radius: 12px;
  font-family: Inter, -apple-system, sans-serif;
  font-weight: 700;
  background: #133648;
  color: #d7f7f2;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .2);
}

.nav-links ul.nav-links__list a.nav-cta:hover,
.nav-links .menu a.nav-cta:hover {
  background: #0e2935;
  color: #eafffb;
}


/* =============================================================
   2. ABOUT PAGE — TWO-COLUMN INTRO
   ============================================================= */

.about-intro {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 48px;
  align-items: start;
}

.about-intro__photo {
  flex-shrink: 0;
}

.about-photo {
  width: 220px;
  height: 220px;
  object-fit: cover;
  border-radius: 50%;
  border: 4px solid var(--ap-parchment);
  box-shadow: var(--ap-card-shadow);
  display: block;
}

@media (max-width: 767px) {
  .about-intro {
    grid-template-columns: 1fr;
  }

  .about-intro__photo {
    order: -1; /* Photo above text on mobile */
  }

  .about-photo {
    width: 140px;
    height: 140px;
    margin: 0 auto;
  }
}


/* =============================================================
   3. TIMELINE COMPONENT (About page)
   ============================================================= */

.timeline {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 2rem;
  border-left: 3px solid var(--ap-neon-teal);
  padding-left: 28px;
}

.timeline__item {
  position: relative;
  padding-bottom: 2rem;
}

.timeline__item::before {
  content: '';
  position: absolute;
  left: -37px;
  top: 6px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--ap-neon-teal);
  border: 2px solid #fff;
  box-shadow: 0 0 0 2px var(--ap-neon-teal);
}

.timeline__year {
  font-size: .85rem;
  font-weight: 700;
  color: var(--ap-muted);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: 4px;
}

.timeline__content h3 {
  margin-bottom: .4rem;
  font-size: var(--h3);
}

.timeline__content p {
  margin: 0;
  color: var(--ap-muted);
}


/* =============================================================
   4. FOCUS / FEATURE CARD GRID
   Used on About and Work With Me pages.
   ============================================================= */

.focus-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
  margin-top: 1.5rem;
}

.focus-card {
  background: #fff;
  border: 1px solid #eaeef2;
  border-radius: 14px;
  box-shadow: var(--ap-card-shadow);
  padding: 20px 22px;
}

.focus-card h3 {
  margin-bottom: .5rem;
  font-size: var(--h3);
}

.focus-card p {
  margin: 0;
  color: var(--ap-muted);
  font-size: .95rem;
}


/* =============================================================
   5. LIST STYLES (Work With Me page)
   ============================================================= */

.ap-list {
  list-style: none;
  margin: 1rem 0;
  padding: 0;
}

.ap-list li {
  padding: .5rem 0 .5rem 1.5rem;
  position: relative;
  border-bottom: 1px solid #eaeef2;
  color: var(--ap-ink);
}

.ap-list li:last-child {
  border-bottom: none;
}

.ap-list li::before {
  content: '→';
  position: absolute;
  left: 0;
  color: var(--ap-neon-teal);
  font-weight: 700;
}


/* =============================================================
   6. TYPOGRAPHY — TIGHTENING
   ============================================================= */

/* Tighter line-height on large headings */
h1 { line-height: 1.12; }
h2 { line-height: 1.18; }
h3 { line-height: 1.22; }

/* Ensure Inter is used at correct weights only (400, 700)
   The Exo font family is no longer loaded after Phase 1.
   Replace Exo references on buttons with Inter 700. */
.btn,
.nav-cta {
  font-family: Inter, -apple-system, 'Segoe UI', sans-serif;
  font-weight: 700;
}


/* =============================================================
   7. SECTION PADDING — NORMALIZATION
   Resolves the conflict between style.css and components.css
   where both define .section padding-block with different values.
   This single rule wins at lower specificity but comes last in
   cascade, so it overrides without !important.
   ============================================================= */

.section          { padding-block: 64px; }
.section--alt     { padding-block: 56px; }
.section.cta-band { padding-block: 48px; }

@media (max-width: 767px) {
  .section      { padding-block: 44px; }
  .section--alt { padding-block: 40px; }
}