/* ===================================================================
 * Onyi Chris — custom theme over Luther (StyleShout)
 *
 * Light "wall" ground in the spirit of thebillway, near-black ink,
 * deep purple accent (Schola family), one dark band for the work.
 * Display: Unbounded (wide sans). Accent words: Instrument Serif italic.
 * Loaded after styles.css; overrides tokens first, components after.
 * ------------------------------------------------------------------- */

@import url("https://fonts.googleapis.com/css2?family=Unbounded:wght@500;600;700&family=Instrument+Serif:ital@1&display=swap");

:root {
    /* palette */
    --wall      : #ECE5D8;   /* dirty cream-brown ground */
    --wall-2    : #F5F0E7;   /* lighter panel */
    --ink       : #1D1A21;   /* blackish, slight purple bias */
    --ink-hover : #3A3541;   /* buttons lighten a step on hover */
    --ink-soft  : #463F4E;   /* body copy */
    --muted     : #5F5869;   /* labels, meta */
    --line      : rgba(29, 26, 33, .14);
    --purple    : #5A2EAF;   /* accent */
    --purple-dk : #43208A;
    --purple-lt : #BBA6F0;   /* accent on the dark band only */
    --band-text : #EDE8F3;

    /* fonts */
    --font-1 : "Public Sans", system-ui, sans-serif;
    --font-2 : "Unbounded", "Public Sans", sans-serif;
    --font-accent : "Instrument Serif", Georgia, serif;

    /* map Luther's tokens onto the palette */
    --color-1          : var(--purple);
    --color-1-dark     : var(--purple-dk);
    --color-1-darker   : var(--purple-dk);
    --color-2          : var(--purple-dk);
    --color-body       : var(--wall);
    --color-text       : var(--ink-soft);
    --color-text-dark  : var(--ink);
    --color-text-light : var(--muted);
    --color-placeholder: var(--muted);
    --color-border     : var(--line);
    --color-gray-9     : var(--wall-2);
    --color-gray-8     : var(--line);
    --color-preloader-bg : var(--wall);
    --color-loader     : var(--ink);
    --color-loader-light : rgba(29, 26, 33, .12);

    --color-btn                    : transparent;
    --color-btn-text               : var(--ink);
    --color-btn-hover              : var(--ink);
    --color-btn-hover-text         : var(--wall);
    --color-btn-primary            : var(--ink);
    --color-btn-primary-text       : var(--wall);
    --color-btn-primary-hover      : var(--ink-hover);
    --color-btn-primary-hover-text : var(--wall);
    --color-btn-stroke             : var(--ink);
    --color-btn-stroke-text        : var(--ink);
    --color-btn-stroke-hover       : var(--ink);
    --color-btn-stroke-hover-text  : var(--wall);

    color-scheme : light;
}

/* -------------------------------------------------------------------
 * base
 * ------------------------------------------------------------------- */
body { background-color : var(--wall); color : var(--ink-soft); }

h1, h2, h3, h4, h5, .h1, .h2, .h3, .h4, .h5 {
    font-weight    : 600;
    letter-spacing : -.02em;
    text-wrap      : balance;
}

em.accent {
    font-family    : var(--font-accent);
    font-style     : italic;
    font-weight    : 400;
    letter-spacing : 0;
    color          : var(--purple);
}

.text-pretitle { color : var(--ink); }
.text-pretitle.with-line { color : var(--purple); }
.text-pretitle.with-line::before { background-color : var(--purple); }

/* statement paragraphs (Luther's p.h1) read like thebillway section heads */
p.h1 {
    font-size   : clamp(2.8rem, 3.4vw, 4.4rem);
    line-height : 1.18;
    color       : var(--ink);
}

.attention-getter { color : var(--ink); }

a:focus-visible, .btn:focus-visible { outline : 2px solid var(--purple); outline-offset : 3px; }

/* -------------------------------------------------------------------
 * buttons: pills, like thebillway
 * ------------------------------------------------------------------- */
.btn {
    border-radius : 999px;
    border        : 1px solid var(--ink);
    font-weight   : 600;
    letter-spacing: .2em;
}
.btn.btn--primary { border-color : var(--ink); }
.btn.btn--primary:hover, .btn.btn--primary:focus { background-color : var(--ink-hover); border-color : var(--ink-hover); color : var(--wall); }

/* -------------------------------------------------------------------
 * preloader + header
 * ------------------------------------------------------------------- */
#preloader { background : var(--wall); }

.mobile-home-link a, .main-nav a { color : var(--ink); }
/* Luther's 10px nav labels are hard to read on the wall; desktop only, the phone menu has its own sizes */
.mobile-home-link a { font-size : 11px; font-weight : 500; }
@media screen and (min-width: 801px) {
    .main-nav a { font-size : 11px; font-weight : 500; }
}
.home-link, .mobile-home-link a { font-weight : 700; }
/* purple is for highlights only; every button is ink */
.main-nav .current a { background-color : transparent; color : var(--purple); font-weight : 600; }
.main-nav .current a:hover { color : var(--purple); }
.main-nav .nav-cta a { background-color : var(--ink); color : var(--wall); }
.main-nav .nav-cta a:hover, .main-nav .nav-cta a:focus { background-color : var(--ink-hover); color : var(--wall); }
.mobile-menu-toggle span,
.mobile-menu-toggle span::before,
.mobile-menu-toggle span::after { background-color : var(--ink); }
.mobile-menu-toggle { color : var(--ink); }

/* -------------------------------------------------------------------
 * intro
 * ------------------------------------------------------------------- */
.s-pagewrap .circles span { border-color : var(--purple); opacity : .3; }

.intro-content .text-huge-title {
    font-size   : clamp(3.6rem, 5.4vw, 7.2rem);
    font-family : var(--font-2);
    font-weight : 500;
    letter-spacing : -.03em;
    line-height : 1.08;
    color       : var(--ink);
}
.intro-content .text-huge-title em.accent { letter-spacing : -.01em; }

.intro-lede {
    max-width   : 58rem;
    margin-top  : 3.6rem;
    font-size   : var(--text-md);
    line-height : 1.6;
    color       : var(--muted);
}
.intro-lede strong { color : var(--ink); font-weight : 600; }

.intro-actions { display : flex; flex-wrap : wrap; gap : 1.2rem; margin-top : 3.2rem; }
.intro-actions .btn { margin : 0; }

/* buttons at a sane size everywhere; Luther's defaults get very tall on phones */
.btn, .btn.btn--medium {
    height         : 5.2rem;
    line-height    : 5rem;
    padding        : 0 2.8rem;
    font-size      : 1.3rem;
}
@media screen and (max-width: 600px) {
    .btn, .btn.btn--medium {
        height      : 4.6rem;
        line-height : 4.4rem;
        padding     : 0 2.2rem;
        font-size   : 1.2rem;
        letter-spacing : .15em;
    }
    .intro-actions { gap : 1rem; }
    .intro-actions .btn { flex : 1 1 auto; }
}
@media screen and (max-width: 800px) {
    .intro-social { margin-top : 3.2rem; }
}

.intro-social { font-size : 1.1rem; font-weight : 500; }
.intro-social a { color : var(--ink-soft); }
.intro-social a:hover { color : var(--purple); }
.intro-scrolldown svg path { fill : var(--ink); }

/* -------------------------------------------------------------------
 * about
 * ------------------------------------------------------------------- */
.about-info__pic { width : 100%; }
.about-info__text { position : relative; z-index : 1; margin-left : 0; padding-left : 6rem; }
@media screen and (max-width: 1000px) {
    .about-info__text { padding-left : 0; }
}
.about-info__text .btn + .btn { margin-top : 1.2rem; }
.skills-list { color : var(--ink); }
.skills-list li { font-family : var(--font-2); }
.timeline__title { color : var(--ink); font-weight : 700; }
.timeline__meta { color : var(--purple); }
.timeline__bullet { background-color : var(--purple); }

/* -------------------------------------------------------------------
 * works: the one dark band (thebillway's "Your guide" move)
 * ------------------------------------------------------------------- */
#works {
    background-color : var(--ink);
    color            : var(--band-text);
    --color-border   : rgba(237, 232, 243, .14);
}
#works .text-pretitle { color : var(--purple-lt); }
#works p.h1 { color : var(--band-text); }
#works p.h1 em.accent { color : var(--purple-lt); }
#works .folio-list__item-link { color : var(--band-text); }
#works .folio-list__item-link:hover,
#works .folio-list__item-link:focus { color : var(--purple-lt); }
#works .folio-list__item-title { color : inherit; }
#works .folio-list__item-cat { color : rgba(237, 232, 243, .62); }
#works .folio-list__item-text::before { background-color : rgba(237, 232, 243, .62); }
#works .folio-list__proj-link { color : var(--band-text); }
#works .folio-list__proj-link:hover { color : var(--purple-lt); }

.folio-list__item-title { font-family : var(--font-2); font-weight : 600; letter-spacing : -.02em; }

/* testimonials sit on the dark works band */
#works .testimonials .text-pretitle { margin-bottom : var(--vspace-1); }
#works .testimonial-slider p { color : var(--band-text); font-size : var(--text-md); line-height : 1.6; }
#works .testimonial-slider__cite strong { color : var(--band-text); font-weight : 600; }
#works .testimonial-slider__cite span { color : rgba(237, 232, 243, .62); }
#works .testimonial-slider__slide:hover .testimonial-slider__cite strong { color : var(--purple-lt); }
#works .testimonial-slider__slide:hover .testimonial-slider__cite span { color : var(--band-text); }
.testimonial-slider__initials {
    display         : flex;
    align-items     : center;
    justify-content : center;
    background      : var(--purple-lt);
    color           : var(--ink);
    font-family     : var(--font-2);
    font-weight     : 700;
    font-size       : 1.4rem;
    letter-spacing  : 0;
    filter          : none;
}
#works .testimonials .swiper-pagination-bullet { background : var(--band-text); }
#works .testimonials .swiper-pagination-bullet-active { background : var(--purple-lt); }

/* the course pop-up stacks two links */
.modal-popup .modal-popup__details { display : table; }
.modal-popup__details:has(+ .modal-popup__details) { margin-bottom : .8rem; }

/* writing sits back on the wall */
#writing .folio-list__item-link { color : var(--ink); }
#writing .folio-list__item-link:hover { color : var(--purple); }

/* modal (rendered on body by basicLightbox) */
.modal-popup { color : var(--ink-soft); }
.modal-popup h5 { font-family : var(--font-2); color : var(--ink); }
/* the project link sits under the description as a quiet text link, not floating over the image */
.modal-popup__details {
    position        : static;
    display         : inline-block;
    margin          : 0 var(--vspace-1_25) var(--vspace-1_25);
    padding         : 0;
    background      : none;
    color           : var(--purple);
    font-size       : 1.6rem;
    font-weight     : 600;
    line-height     : 1.4;
    text-decoration : underline;
    text-underline-offset : .3em;
}
.modal-popup__details:hover, .modal-popup__details:focus { background : none; color : var(--ink); }
/* a visible way out: replaces Luther's white close icon, which vanishes on the wall */
.basicLightbox::after { display : none; }
.modal-popup__back {
    position        : sticky;
    top             : 1.2rem;
    z-index         : 2;
    display         : flex;
    align-items     : center;
    justify-content : center;
    width           : 4.4rem;
    height          : 4.4rem;
    margin          : 1.2rem 0 -5.6rem 1.2rem;
    padding         : 0;
    border          : 0;
    border-radius   : 50%;
    background-color: var(--ink);
    color           : var(--wall);
    line-height     : 1;
    cursor          : pointer;
}
.modal-popup__back svg { display : block; }
.modal-popup__back:hover, .modal-popup__back:focus { background-color : var(--ink-hover); color : var(--wall); }
.modal-popup__pic { display : block; cursor : pointer; }
.modal-popup__pic img { transition : opacity .2s; }
.modal-popup__pic:hover img { opacity : .9; }

/* -------------------------------------------------------------------
 * contact + footer
 * ------------------------------------------------------------------- */
.contact-links a { color : var(--ink); }
.contact-links a:hover { color : var(--purple); }
.contact-social a:hover { color : var(--purple); }
.contact-btn.btn { background-color : var(--ink); border-color : var(--ink); color : var(--wall); }
.contact-btn.btn:hover, .contact-btn.btn:focus { background-color : var(--ink-hover); border-color : var(--ink-hover); color : var(--wall); }

.s-footer a { color : var(--ink); }
.s-footer a:hover { color : var(--purple); }
.ss-copyright span::after { color : var(--line); }
.ss-go-top a { background-color : var(--wall); border-color : var(--ink); }
.ss-go-top svg path { fill : var(--ink); }

/* -------------------------------------------------------------------
 * the rooms: thebillway's "collection", one card per side
 * ------------------------------------------------------------------- */
.rooms { padding-top : var(--vspace-3); }
.rooms__list {
    list-style            : none;
    margin                : var(--vspace-1_5) 0 0;
    padding               : 0;
    display               : grid;
    grid-template-columns : repeat(auto-fit, minmax(min(100%, 26rem), 1fr));
    gap                   : 1.6rem;
}
.rooms__item { margin : 0; padding : 0; }
.rooms__item::before { display : none; }
.rooms__link {
    height         : 100%;
    display        : flex;
    flex-direction : column;
    gap            : 1.2rem;
    padding        : 3.2rem 2.8rem;
    background     : var(--wall-2);
    border         : 1px solid var(--line);
    border-radius  : 4px;
    color          : var(--ink-soft);
    transition     : border-color .2s, transform .2s;
}
.rooms__link:hover, .rooms__link:focus { border-color : var(--purple); color : var(--ink-soft); transform : translateY(-3px); }
.rooms__num   { font-size : 1.2rem; font-weight : 600; letter-spacing : .25em; text-transform : uppercase; color : var(--purple); }
.rooms__title { font-family : var(--font-2); font-weight : 600; font-size : 2.2rem; line-height : 1.25; letter-spacing : -.02em; color : var(--ink); }
.rooms__desc  { font-size : 1.6rem; line-height : 1.6; flex-grow : 1; }
.rooms__go    { font-size : 1.4rem; font-weight : 600; color : var(--ink); }
.rooms__link:hover .rooms__go { color : var(--purple); }

/* -------------------------------------------------------------------
 * journey
 * ------------------------------------------------------------------- */
.s-journey { padding-top : var(--vspace-4); padding-bottom : var(--vspace-3); }
.journey {
    --timeline-left-padding : var(--vspace-1_25);
    --timeline-top-adjust   : 1rem;
}
.journey .timeline__bullet { width : 10px; height : 10px; left : -1px; }
.journey__intro { position : sticky; top : 12rem; align-self : flex-start; }
.journey__intro p.h1 { margin-top : 0; }
.journey__lede { font-size : var(--text-md); line-height : 1.6; color : var(--muted); max-width : 44rem; }
.journey .timeline__timeframe { margin : 0 0 .4rem; font-weight : 600; letter-spacing : .2em; text-transform : uppercase; color : var(--purple); }
.journey .timeline__title { font-family : var(--font-2); font-weight : 600; font-size : 2.4rem; letter-spacing : -.02em; margin-top : 0; }
.journey .timeline__meta { color : var(--muted); }
@media screen and (max-width: 800px) {
    .journey__intro { position : static; margin-bottom : var(--vspace-1_5); }
}

/* writing + contact fixes */
.writing-all { margin-top : var(--vspace-1); }
.contact-links a { font-size : 1.8rem; overflow-wrap : anywhere; }

/* -------------------------------------------------------------------
 * blog index
 * ------------------------------------------------------------------- */
.page-sub .circles { display : none; }
.s-blog-intro > .row { padding-top : calc(10vh + var(--header-height)); padding-bottom : var(--vspace-2); }
.blog-title {
    font-family    : var(--font-2);
    font-weight    : 700;
    font-size      : clamp(3.6rem, 5.6vw, 7.2rem);
    line-height    : 1.04;
    letter-spacing : -.035em;
    color          : var(--ink);
    max-width      : 16ch;
}
.post-tags { list-style : none; display : flex; flex-wrap : wrap; gap : .8rem; margin : var(--vspace-1) 0 0; padding : 0; }
.post-tags li {
    margin : 0; padding : .6rem 1.4rem;
    border : 1px solid var(--line); border-radius : 999px;
    font-size : 1.3rem; font-weight : 600; letter-spacing : .15em; text-transform : uppercase; color : var(--ink);
}
.post-tags li::before { display : none; }

.s-blog { padding-bottom : var(--vspace-4); }
.post-upnext { margin-top : var(--vspace-3); }
.post-list { list-style : none; margin : var(--vspace-1) 0 0; padding : 0; display : grid; gap : 1.6rem; }
.post-list__item { margin : 0; padding : 0; }
.post-list__item::before { display : none; }
.post-list__link {
    display : flex; flex-wrap : wrap; gap : 2.8rem; align-items : center;
    padding : 2rem; background : var(--wall-2); border : 1px solid var(--line); border-radius : 4px;
    color : var(--ink-soft);
}
a.post-list__link:hover, a.post-list__link:focus { border-color : var(--purple); color : var(--ink-soft); }
.post-list__pic { flex : 0 0 22rem; width : 22rem; height : auto; max-width : 100%; aspect-ratio : 3 / 2; object-fit : cover; margin : 0; border-radius : 2px; }
.post-list__pic--text {
    display : flex; align-items : flex-end; padding : 1.6rem; box-sizing : border-box;
    background : var(--ink); color : var(--band-text);
    font-family : var(--font-2); font-weight : 700; font-size : 2.4rem; letter-spacing : -.02em;
}
.post-list__body { flex : 1 1 32rem; min-width : 0; }
.post-list__by { display : flex; align-items : center; gap : .8rem; margin-bottom : 1rem; font-size : 1.4rem; font-weight : 600; color : var(--ink); }
.post-list__by img { width : 3.2rem; height : 3.2rem; margin : 0; border-radius : 50%; object-fit : cover; object-position : 50% 18%; }
.post-list__meta {font-size : 1.3rem; font-weight : 600; letter-spacing : .15em; text-transform : uppercase; color : var(--purple); }
.post-list__title { margin : .8rem 0 .8rem; font-family : var(--font-2); font-size : 2.6rem; color : var(--ink); }
.post-list__excerpt { margin : 0 0 1.2rem; font-size : 1.6rem; line-height : 1.6; max-width : 64ch; }
.post-list__go { font-size : 1.4rem; font-weight : 600; color : var(--ink); }
a.post-list__link:hover .post-list__go { color : var(--purple); }
.post-list--soon .post-list__link { background : transparent; border-style : dashed; }

/* -------------------------------------------------------------------
 * article
 * ------------------------------------------------------------------- */
.s-article > .row { max-width : 76rem; padding-top : calc(8vh + var(--header-height)); padding-bottom : var(--vspace-4); }
.article__back { display : inline-block; margin-bottom : var(--vspace-1_5); font-size : 1.5rem; font-weight : 600; color : var(--ink); }
.article__back:hover { color : var(--purple); }
.article__title {
    margin-top : 1.6rem;
    font-family : var(--font-2); font-weight : 700;
    font-size : clamp(3.2rem, 5vw, 5.6rem); line-height : 1.08; letter-spacing : -.03em; color : var(--ink);
}
.article__byline { display : flex; align-items : center; gap : 1.4rem; margin : var(--vspace-1) 0 var(--vspace-2); }
.article__byline strong { display : block; color : var(--ink); font-size : 1.6rem; }
.article__byline span { font-size : 1.4rem; color : var(--muted); }
.article__avatar { width : 5.2rem; height : 5.2rem; border-radius : 50%; object-fit : cover; object-position : 50% 20%; margin : 0; }
.article__body { font-size : 1.9rem; line-height : 1.75; color : var(--ink-soft); }
.article__body p { max-width : 64ch; }
.article__standfirst { font-size : 2.2rem; line-height : 1.5; color : var(--ink); }
.article__body blockquote { border-left : 3px solid var(--purple); margin : var(--vspace-1_5) 0; padding-left : 2.4rem; }
.article__body blockquote p { font-family : var(--font-accent); font-style : italic; font-size : 3rem; line-height : 1.3; color : var(--ink); }
.article__cover { margin : 0 0 var(--vspace-2); }
.article__cover img { display : block; width : 100%; margin : 0; border-radius : 4px; }
.article__body .article__h2 {
    margin       : var(--vspace-2) 0 var(--vspace-0_75);
    font-family  : var(--font-2);
    font-weight  : 600;
    font-size    : clamp(2.2rem, 2.6vw, 2.8rem);
    line-height  : 1.25;
    letter-spacing : -.02em;
    color        : var(--ink);
}
.article__body strong { color : var(--ink); }
.article__origin { font-size : 1.5rem; color : var(--muted); border-top : 1px solid var(--line); padding-top : 1.6rem; }
.article__next { margin-top : var(--vspace-2); padding : 3.2rem; background : var(--ink); color : var(--band-text); border-radius : 4px; }
.article__next .text-pretitle { color : var(--purple-lt); }
.article__next p { font-family : var(--font-2); font-size : 2.2rem; line-height : 1.35; color : var(--band-text); }
.article__next .btn { border-color : var(--band-text); color : var(--band-text); margin-bottom : 0; }
.article__next .btn:hover { background : var(--band-text); color : var(--ink); }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition-duration : 0s !important; animation-duration : 0s !important; }
}