/* Sigmaximus — Extended Styles */

/* Hero Section */
.hero{padding:clamp(3rem,8vw,5rem) var(--gap) clamp(1.5rem,3vw,2rem);text-align:center;max-width:var(--w-wide);margin:0 auto}
.hero h1{margin-bottom:1rem}
.hero .hero-lead{font-size:var(--s-lg);color:var(--c-muted);max-width:600px;margin:0 auto}
.hero-cta{display:inline-block;padding:.75rem 2rem;background:var(--c-accent);color:var(--c-bg);
font-size:var(--s-sm);font-weight:600;letter-spacing:.05em;text-transform:uppercase;
border:2px solid var(--c-accent);transition:background .2s,color .2s}
.hero-cta:hover{background:transparent;color:var(--c-accent)}

/* Spectrum Section */
.spectrum{padding:clamp(2rem,5vw,3rem) var(--gap) clamp(3rem,6vw,5rem);
max-width:var(--w-wide);margin:0 auto}
.spectrum-inner{max-width:720px;margin:0 auto}
.spectrum-title{text-align:center;margin-bottom:.5rem}
.spectrum-sub{text-align:center;font-size:var(--s-base);color:var(--c-muted);margin-bottom:clamp(2rem,4vw,3rem)}

/* Spectrum Staircase */
.spectrum-track{position:relative;margin-bottom:clamp(2rem,4vw,3rem)}
.stairs{display:flex;align-items:flex-end;gap:3px;height:clamp(80px,12vw,120px)}
.stair{flex:1;background:var(--c-border);border-radius:2px 2px 0 0;position:relative;
transition:background .2s}
.stair-0{height:20%}
.stair-1{height:40%}
.stair-2{height:60%}
.stair-3{height:80%}
.stair-4{height:100%}
.stair-0{background:var(--c-accent)}
.stair-fill{display:block;width:100%;height:100%;background:var(--c-accent);border-radius:2px 2px 0 0;
animation:pulse-soft 2.5s ease-in-out infinite}
@keyframes pulse-soft{0%,100%{opacity:1}50%{opacity:.6}}
.stair-4{background:#6B21A8}
.stair-labels{display:flex;gap:3px;margin-top:.5rem}
.stair-label{flex:1;text-align:center;font-size:var(--s-xs);color:var(--c-muted);
line-height:1.3;letter-spacing:.01em}
.stair-label strong{color:var(--c-accent);display:block;font-size:var(--s-xs);letter-spacing:.02em}
.stair-labels .stair-label:first-child strong{color:var(--c-accent)}
.stair-labels .stair-label:last-child strong{color:#6B21A8}

/* Spectrum Levels */
.spectrum-levels{display:flex;flex-direction:column;gap:0;
border-top:1px solid var(--c-border)}
.level{padding:1.5rem 0;border-bottom:1px solid var(--c-border)}
.level-header{display:flex;align-items:baseline;gap:.75rem;margin-bottom:.75rem;flex-wrap:wrap}
.level-num{font-family:var(--f-heading);font-size:var(--s-2xl);font-weight:700;
line-height:1;letter-spacing:-0.03em;color:var(--c-accent);min-width:1.5rem}
.level-name{font-family:var(--f-heading);font-size:var(--s-lg);font-weight:700;letter-spacing:-0.01em}
.level-phase{font-size:var(--s-xs);font-weight:600;text-transform:uppercase;letter-spacing:.05em;
color:var(--c-muted);border:1px solid var(--c-border);padding:.1rem .5rem;border-radius:var(--radius)}
.level p{color:var(--c-muted);font-size:var(--s-sm);line-height:1.6;margin-bottom:.35rem;
padding-left:2.25rem}
.level p:last-child{margin-bottom:0}
.level-max .level-num,.level-max .level-name{color:var(--c-accent)}
.level-max{background:var(--c-surface);padding:1.5rem;margin:0 -1.5rem;border-radius:var(--radius);
border-bottom:none}

/* Spectrum CTA */
.spectrum-cta{text-align:center;padding-top:clamp(1.5rem,3vw,2.5rem)}
.spectrum-cta p{font-size:var(--s-base);color:var(--c-muted);margin-bottom:1.5rem;max-width:520px;margin-left:auto;margin-right:auto}

/* Content Container */
.container{max-width:var(--w-content);margin:0 auto;padding:0 var(--gap)}
.container-wide{max-width:var(--w-wide);margin:0 auto;padding:0 var(--gap)}
.container-max{max-width:var(--w-max);margin:0 auto;padding:0 var(--gap)}

/* Section Spacing */
.section{padding:clamp(2rem,5vw,4rem) 0}

/* Article Grid */
.article-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:var(--gap)}
.article-card{border-bottom:1px solid var(--c-border);padding-bottom:1.5rem}
.article-card h3{margin-bottom:.5rem}
.article-card h3 a{transition:opacity .2s}
.article-card h3 a:hover{opacity:.6}
.article-card .meta{font-size:var(--s-xs);color:var(--c-muted);text-transform:uppercase;letter-spacing:.03em;margin-bottom:.5rem}
.article-card p{font-size:var(--s-sm);color:var(--c-muted);line-height:1.6}

/* Category Badge */
.badge{display:inline-block;font-size:var(--s-xs);font-weight:600;text-transform:uppercase;
letter-spacing:.05em;color:var(--c-muted);border:1px solid var(--c-border);padding:.15rem .6rem;border-radius:var(--radius)}

/* Single Article */
.article-header{padding:clamp(2rem,5vw,4rem) var(--gap);text-align:center;max-width:var(--w-wide);margin:0 auto}
.article-header .meta{margin-bottom:1rem}
.article-header h1{margin-bottom:1rem}
.article-header .description{font-size:var(--s-lg);color:var(--c-muted);max-width:640px;margin:0 auto}

.article-body{max-width:var(--w-content);margin:0 auto;padding:2rem var(--gap) 4rem}
.article-body h2{margin:2.5rem 0 1rem}
.article-body h3{margin:2rem 0 .75rem}
.article-body p{margin-bottom:1.25rem}
.article-body ul,.article-body ol{margin:0 0 1.25rem 1.5rem}
.article-body li{margin-bottom:.5rem}
.article-body a{color:var(--c-accent);text-decoration:underline;transition:opacity .2s}
.article-body a:hover{opacity:.6}
.article-body blockquote{border-left:3px solid var(--c-accent);margin:2rem 0;padding:.75rem 1.25rem;
font-style:italic;color:var(--c-muted)}
.article-body strong{font-weight:700}

/* Disclaimer */
.disclaimer{background:var(--c-surface);padding:1rem 1.25rem;font-size:var(--s-sm);
color:var(--c-muted);border-left:3px solid var(--c-border);margin-bottom:2rem;border-radius:var(--radius)}

/* Page Content */
.page-content{max-width:var(--w-content);margin:0 auto;padding:clamp(2rem,5vw,4rem) var(--gap)}
.page-content h1{margin-bottom:1.5rem}
.page-content h2{margin:2rem 0 1rem}
.page-content p{margin-bottom:1.25rem}
.page-content ul,.page-content ol{margin:0 0 1.25rem 1.5rem}
.page-content li{margin-bottom:.5rem}

/* Hub / Section Page */
.hub-header{padding:clamp(2rem,5vw,4rem) var(--gap);max-width:var(--w-wide);margin:0 auto}
.hub-header h1{margin-bottom:.75rem}
.hub-header p{font-size:var(--s-lg);color:var(--c-muted);max-width:600px}

.hub-articles{max-width:var(--w-wide);margin:0 auto;padding:0 var(--gap) 4rem}

/* Featured Section on Home */
.featured{padding:clamp(2rem,5vw,3rem) 0}
.featured h2{margin-bottom:1.5rem}
.category-nav{display:flex;gap:1rem;flex-wrap:wrap;margin-bottom:2rem}
.category-nav a{padding:.5rem 1rem;border:1px solid var(--c-border);font-size:var(--s-sm);
font-weight:500;text-transform:uppercase;letter-spacing:.03em;transition:all .2s}
.category-nav a:hover{background:var(--c-accent);color:var(--c-bg);border-color:var(--c-accent)}

/* Breadcrumb */
.breadcrumb{font-size:var(--s-xs);color:var(--c-muted);text-transform:uppercase;letter-spacing:.03em;margin-bottom:1rem}
.breadcrumb a:hover{color:var(--c-accent)}
.breadcrumb span{margin:0 .35rem}

/* Skip Link */
.skip-link{position:absolute;left:-9999px;top:0;padding:.5rem 1rem;background:var(--c-accent);
color:var(--c-bg);z-index:1000;font-size:var(--s-sm)}
.skip-link:focus{left:0}

/* Focus styles */
a:focus-visible,button:focus-visible{outline:2px solid var(--c-accent);outline-offset:2px}

@media(max-width:768px){
.article-grid{grid-template-columns:1fr}
.level p{padding-left:0}
.level-header{gap:.5rem}
.level-num{min-width:auto;font-size:var(--s-xl)}
.level-max{margin:0 -.5rem;padding:1.25rem .5rem}
.spectrum-track{padding:0}
}

/* Start Here Page */
.start-here{max-width:var(--w-content);margin:0 auto;padding:0 var(--gap)}
.start-here-header{padding:clamp(2rem,5vw,4rem) 0;text-align:center}
.start-here-header h1{margin-bottom:1rem}
.start-here-header .description{font-size:var(--s-lg);color:var(--c-muted);max-width:640px;margin:0 auto}
.start-here-body{padding:0 0 4rem}
.start-here-body h2{margin:2.5rem 0 1rem}
.start-here-body h3{margin:1.5rem 0 .75rem;font-size:var(--s-lg);color:var(--c-muted);font-weight:400}
.start-here-body p{margin-bottom:1.25rem}
.start-here-body ul,.start-here-body ol{margin:0 0 1.25rem 1.5rem}
.start-here-body li{margin-bottom:.5rem}
.start-here-body hr{border:none;border-top:1px solid var(--c-border);margin:2.5rem 0}

/* Results CTA Buttons */
.results-cta{display:flex;flex-wrap:wrap;gap:.75rem;margin:1.5rem 0}
.cta-btn{display:inline-block;padding:.6rem 1.25rem;border:1px solid var(--c-border);
font-size:var(--s-sm);font-weight:500;letter-spacing:.03em;transition:all .2s}
.cta-btn:hover{background:var(--c-accent);color:var(--c-bg);border-color:var(--c-accent)}

/* Level Blocks */
.phase-block{padding:1.5rem 0}
.phase-block h2{color:var(--c-accent)}

/* Category Links */
.category-links ul{list-style:none;margin:0;padding:0}
.category-links li{margin-bottom:.75rem;padding-bottom:.75rem;border-bottom:1px solid var(--c-border)}
.category-links li:last-child{border-bottom:none}
.category-links a{font-weight:600;border-bottom:1px solid transparent;transition:border-color .2s}
.category-links a:hover{border-bottom-color:var(--c-accent)}

/* Level Navigation on Articles */
.phase-nav{max-width:var(--w-content);margin:0 auto;padding:2rem var(--gap) 3rem;
border-top:1px solid var(--c-border)}
.phase-nav-label{margin-bottom:1rem;font-size:var(--s-sm);text-transform:uppercase;letter-spacing:.03em}
.phase-badge{display:inline-block;background:var(--c-accent);color:var(--c-bg);
padding:.15rem .6rem;font-size:var(--s-xs);font-weight:600;letter-spacing:.05em;
margin-right:.5rem;border-radius:var(--radius)}
.phase-nav-label a{border-bottom:1px solid transparent;transition:border-color .2s}
.phase-nav-label a:hover{border-bottom-color:var(--c-accent)}
.phase-nav-links{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.phase-nav-prev,.phase-nav-next{font-size:var(--s-sm);color:var(--c-muted);transition:color .2s;max-width:48%}
.phase-nav-prev:hover,.phase-nav-next:hover{color:var(--c-accent)}
.phase-nav-next{text-align:right;margin-left:auto}

/* Article body tables */
.article-body table{width:100%;border-collapse:collapse;margin:1.25rem 0;font-size:var(--s-sm)}
.article-body th{text-align:left;font-weight:600;border-bottom:2px solid var(--c-accent);padding:.5rem .75rem}
.article-body td{border-bottom:1px solid var(--c-border);padding:.5rem .75rem}
.article-body tr:last-child td{border-bottom:none}

/* Page content tables (for level pages) */
.page-content table{width:100%;border-collapse:collapse;margin:1.25rem 0;font-size:var(--s-sm)}
.page-content th{text-align:left;font-weight:600;border-bottom:2px solid var(--c-accent);padding:.5rem .75rem}
.page-content td{border-bottom:1px solid var(--c-border);padding:.5rem .75rem}
.page-content tr:last-child td{border-bottom:none}

@media(max-width:768px){
.results-cta{flex-direction:column}
.cta-btn{text-align:center}
.phase-nav-links{flex-direction:column}
.phase-nav-prev,.phase-nav-next{max-width:100%;text-align:left}
}

/* Book Promo — Homepage */
.book-promo{padding:clamp(3rem,6vw,5rem) var(--gap);background:var(--c-surface);border-top:1px solid var(--c-border);border-bottom:1px solid var(--c-border)}
.book-promo-inner{max-width:var(--w-wide);margin:0 auto;display:flex;align-items:center;gap:clamp(2rem,5vw,4rem)}
.book-promo-cover{flex:0 0 auto}
.book-promo-cover img{width:clamp(200px,20vw,320px);height:auto;box-shadow:0 8px 30px rgba(0,0,0,.15)}
.book-promo-content{flex:1}
.book-promo-content h2{margin-bottom:.75rem}
.book-promo-tagline{font-size:var(--s-lg);color:var(--c-muted);margin-bottom:1rem;font-style:italic}
.book-promo-desc{font-size:var(--s-base);color:var(--c-muted);margin-bottom:1.5rem;max-width:540px;line-height:1.7}
.book-cta{display:inline-block;padding:.75rem 2rem;background:var(--c-accent);color:var(--c-bg);
font-size:var(--s-sm);font-weight:600;letter-spacing:.05em;text-transform:uppercase;
border:2px solid var(--c-accent);transition:background .2s,color .2s}
.book-cta:hover{background:transparent;color:var(--c-accent)}

/* Book Promo — In-Article */
.article-book-promo{margin:2.5rem 0;padding:2rem;background:var(--c-surface);border-left:3px solid var(--c-accent);display:flex;align-items:center;gap:1.5rem}
.article-book-promo img{width:120px;height:auto;flex:0 0 auto;box-shadow:0 4px 15px rgba(0,0,0,.1)}
.article-book-promo-content{flex:1}
.article-book-promo-content h3{font-size:var(--s-lg);margin-bottom:.5rem}
.article-book-promo-content p{font-size:var(--s-sm);color:var(--c-muted);margin-bottom:1rem;line-height:1.6}
.article-book-promo-content .book-cta{padding:.5rem 1.5rem;font-size:var(--s-xs)}

@media(max-width:768px){
.book-promo-inner{flex-direction:column;text-align:center}
.book-promo-desc{margin-left:auto;margin-right:auto}
.article-book-promo{flex-direction:column;text-align:center}
.article-book-promo img{width:100px}
}
