/* Phase one: fidelity layer matching Principal.HTML and blog post.html. */
:root { --gvs-navy:#1b2a4a; --gvs-green:#1e5e54; --gvs-coral:#c96f5e; --gvs-coral-dark:#9f4f42; --gvs-text:#526173; --gvs-muted:#8291a1; --gvs-line:#dce6ee; --gvs-peach:#fff0eb; --gvs-mint:#e8f0e6; --gvs-blue:#dfeaf5; }
body { background:#f7fafc; color:var(--gvs-navy); }
.home-shell { width:100%; margin:0 auto; }
.site-header { position:relative; padding:1.25rem 1.5rem; border-color:var(--gvs-line); }
.site-header .container { width:100%; max-width:none; }
.site-header--article .container { max-width:80rem; }
.header-inner { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:1rem; }
.brand-mark { width:3rem; height:3rem; background:var(--gvs-navy); font-size:1.45rem; font-weight:700; }
.brand { min-width:0; }.brand-copy { min-width:0; }.brand-name { overflow:hidden; font-size:1.25rem; letter-spacing:.18em; text-overflow:ellipsis; white-space:nowrap; }
.brand-tagline { font-size:.75rem; color:var(--gvs-green); }
.header-meta { display:none; align-items:center; gap:.75rem; color:var(--gvs-text); font-size:.875rem; }
.header-meta span:first-child { border-radius:999px; background:var(--gvs-peach); padding:.375rem .75rem; color:var(--gvs-coral-dark); font-weight:600; }
.menu-toggle { display:inline-flex; min-width:3rem; min-height:3rem; align-items:center; justify-content:center; border-color:var(--gvs-line); border-radius:.6rem; font-size:0; }
.menu-toggle::after { content:'☰'; font-size:1.1rem; }
.primary-menu { position:absolute; z-index:30; top:calc(100% - .25rem); right:1.5rem; display:none; min-width:13rem; padding:1rem; border:1px solid var(--gvs-line); border-radius:.9rem; background:#fff; box-shadow:0 16px 34px rgba(27,42,74,.16); }
.primary-menu.is-open { display:block; }.primary-menu ul { display:grid; gap:.8rem; }.primary-menu a { display:block; font-size:.875rem; }
.hero { padding:4rem 1.5rem; background:linear-gradient(135deg,var(--gvs-blue),#fff7f3,var(--gvs-mint)); }
.header-search { grid-column:1 / -1; grid-row:2; width:100%; min-width:0; }.menu-toggle { grid-column:2; grid-row:1; }.post-search-form { display:flex; width:100%; min-width:0; gap:.25rem; align-items:stretch; border:1px solid var(--gvs-line); border-radius:.75rem; background:#f7fafc; padding:.25rem; }.post-search-form:focus-within { border-color:rgba(201,111,94,.7); box-shadow:0 0 0 3px rgba(201,111,94,.16); }.post-search-form__input { min-width:0; flex:1; min-height:2.5rem; border:0; border-radius:.5rem; background:transparent; padding:.6rem .75rem; color:var(--gvs-navy); }.post-search-form__input::placeholder { color:var(--gvs-muted); }.post-search-form__input:focus-visible { outline:0; }.post-search-form__submit { flex:0 0 auto; min-height:2.5rem; border:1px solid var(--gvs-coral); border-radius:.5rem; background:var(--gvs-coral); padding:.55rem .9rem; color:#fff; font-weight:800; cursor:pointer; }.post-search-form__submit:hover { border-color:var(--gvs-coral-dark); background:var(--gvs-coral-dark); transform:translateY(-1px); }
.hero-grid { max-width:72rem; grid-template-columns:1fr; gap:3rem; }.hero-copy { text-align:left; }.eyebrow { justify-content:flex-start; margin-bottom:1.25rem; color:#b85f50; font-size:.75rem; letter-spacing:.2em; }.hero-verse { max-width:36rem; font-size:1.5rem; line-height:1.62; }.hero-verse p,.hero-verse br { margin:0; }.hero-reference { margin-top:2rem; text-align:right; font-size:.875rem; letter-spacing:.05em; }
.cross-card { width:100%; max-width:24rem; padding:2rem; border-radius:1rem; }.cross-art { width:80%; height:80%; }.cross-art span { font-size:3.75rem; }.cross-art::before { width:2rem; }.cross-art::after { top:2rem; height:2rem; }
.section { padding:4rem 1.5rem; }.section-heading { max-width:42rem; margin-bottom:3rem; }.section-heading .eyebrow { justify-content:center; margin-bottom:.5rem; color:var(--gvs-green); font-size:2rem; letter-spacing:0; }.section-heading h2 { font-size:1.875rem; font-weight:400; }.section-heading p { margin-top:1rem; font-size:.875rem; line-height:1.6; }
.posts-list { gap:1.5rem; }.post-card { display:block; border-color:var(--gvs-line); border-radius:1rem; box-shadow:0 1px 3px rgba(27,42,74,.08); }.post-card.post-card--no-media { grid-template-columns:1fr; }.post-card:hover { transform:none; box-shadow:0 3px 10px rgba(27,42,74,.1); }.post-card__media { position:relative; display:block; height:13rem; overflow:hidden; background:var(--gvs-peach); }.post-card__image { width:100%; height:100%; object-fit:cover; }.play-overlay { position:absolute; inset:0; display:grid; place-items:center; background:rgba(27,42,74,.3); color:#fff; font-size:1.1rem; }.play-overlay::before { position:absolute; z-index:0; width:3rem; height:3rem; border-radius:50%; background:rgba(27,42,74,.82); content:''; }.play-overlay { position:absolute; z-index:1; }.play-overlay::after { position:absolute; z-index:2; margin-left:.12rem; content:'▶'; font-size:.95rem; }.post-card:nth-child(3n+2) .post-card__media { background:var(--gvs-blue); }.post-card:nth-child(3n) .post-card__media { background:var(--gvs-mint); }.post-card:nth-child(3n) .play-overlay { display:none; }
.post-card__body { min-height:13rem; padding:1.5rem; }.post-card__category { border-radius:.55rem; padding:.25rem .6rem; background:var(--gvs-peach); color:var(--gvs-coral-dark); font-size:.75rem; letter-spacing:0; text-transform:none; }.post-card:nth-child(3n+2) .post-card__category { background:var(--gvs-blue); color:var(--gvs-navy); }.post-card:nth-child(3n) .post-card__category { background:var(--gvs-mint); color:var(--gvs-green); }.post-card h3 { margin:.75rem 0 .5rem; font-size:1.125rem; }.post-card__excerpt { line-height:1.5; }.post-card__meta { align-items:center; margin-top:1.25rem; padding-top:1rem; font-size:.75rem; }.card-heart { color:var(--gvs-coral-dark); font-size:1.2rem; }.section-action { margin-top:2.5rem; }.button { min-height:3rem; border-radius:.55rem; padding:.7rem 1rem; }
.section-soft { background:linear-gradient(135deg,var(--gvs-mint),var(--gvs-blue)); }.about-grid { grid-template-columns:1fr; gap:3rem; }.about-photo { width:16rem; height:16rem; aspect-ratio:auto; border-radius:1rem; }.about-title-row { display:flex; align-items:center; gap:.75rem; margin-bottom:1.5rem; }.about-title-row h2 { margin:0; font-size:1.875rem; }.about-title-row span { color:var(--gvs-green); font-size:2rem; }.about-content p { margin:0 0 1rem; font-size:.875rem; line-height:1.75; }.quote-section { padding:5rem 1.5rem; }.quote-section::before { display:block; margin-bottom:1.5rem; color:var(--gvs-green); content:'♧'; font-size:2.5rem; }.quote-section blockquote { max-width:48rem; font-size:1.5rem; line-height:1.35; }.quote-section cite { margin-top:1.5rem; font-size:1.125rem; }
.site-footer { padding:3rem 1.5rem 2rem; background:#1c2a49; }.site-footer .container { width:100%; max-width:none; }.footer-grid { grid-template-columns:1fr; gap:2rem; padding-bottom:2rem; }.footer-title { font-size:1.25rem; }.footer-subtitle { display:block; margin-top:.25rem; }.footer-center { padding:0; }.footer-center p { margin:.25rem 0; }.footer-right { text-align:center; }.footer-bottom { width:100%; max-width:none; }
.article-nav { padding:1rem 1.5rem; background:#f7fafc; }.article-nav .content-container { display:flex; align-items:center; justify-content:space-between; gap:1rem; max-width:56rem; }.article-nav > .content-container > a { display:inline-flex; align-items:center; gap:.5rem; }.breadcrumbs { display:none; align-items:center; gap:.5rem; overflow:hidden; color:var(--gvs-muted); font-size:.75rem; white-space:nowrap; }.breadcrumbs strong { overflow:hidden; color:var(--gvs-navy); text-overflow:ellipsis; }.article-shell { padding:2.5rem 1.5rem 3.5rem; background:#fff; }.article-header { margin-bottom:2rem; }.article-category { gap:.5rem; margin-bottom:1.25rem; padding:.5rem 1rem; background:var(--gvs-mint); color:var(--gvs-green); font-size:.75rem; letter-spacing:.16em; }.article-header h1 { margin:.8rem 0 1.25rem; font-size:2.25rem; line-height:1.2; }.article-summary { margin-bottom:1.75rem; font-size:1rem; line-height:1.75; }.article-meta { gap:.75rem; padding:1rem 0; font-size:.75rem; }.author-avatar { display:grid; width:2.25rem; height:2.25rem; place-items:center; border-radius:50%; background:var(--gvs-green); color:#fff; font-weight:800; }.meta-separator { color:var(--gvs-line); }
.featured-image { height:auto; aspect-ratio:auto; margin:2.5rem 0; overflow:hidden; border-radius:1rem; background:var(--gvs-navy); }.featured-image .featured-image__image { display:block; width:100%; height:auto; max-height:none; object-fit:contain; }.article-content { color:var(--gvs-text); font-family:"Playfair Display",Georgia,serif; font-size:1rem; line-height:2; }.article-content p:first-child::first-letter { float:left; margin-right:.75rem; color:var(--gvs-coral); font-family:Inter,sans-serif; font-size:4rem; font-weight:800; line-height:.9; }.article-content h2,.article-content h3 { margin-top:2.5rem; font-size:1.5rem; }.article-content blockquote { margin:2.25rem 0; border-left:4px solid var(--gvs-coral); border-radius:0 1rem 1rem 0; padding:1.5rem; font-size:1.25rem; line-height:1.6; }.article-content ul { border-radius:1rem; background:var(--gvs-mint); padding:1.5rem 1.5rem 1.5rem 3rem; font-family:Inter,sans-serif; font-size:.875rem; line-height:1.75; }.engagement { display:flex; flex-direction:column; gap:1.5rem; align-items:center; justify-content:space-between; margin:3rem 0; border-block:1px solid var(--gvs-line); padding:1.5rem 0; }.engagement__metrics,.share-links { display:flex; align-items:center; gap:.75rem; color:var(--gvs-text); font-size:.875rem; }.like-button { display:grid; width:2.75rem; height:2.75rem; place-items:center; border-radius:50%; background:var(--gvs-peach); color:var(--gvs-coral); font-size:1.5rem; }.share-links > span { margin-right:.25rem; color:var(--gvs-muted); font-size:.7rem; font-weight:800; letter-spacing:.15em; text-transform:uppercase; }.share-links a,.share-links button { display:grid; width:2rem; height:2rem; place-items:center; border:0; border-radius:50%; background:var(--gvs-mint); color:var(--gvs-green); font-weight:800; cursor:pointer; }.share-links a:nth-of-type(2) { background:var(--gvs-blue); color:var(--gvs-navy); }.share-links .copy-link { background:#f7fafc; color:var(--gvs-text); }.article-footer { margin-top:0; }.comments-area { margin-top:3rem; }.comments-title { display:flex; align-items:center; gap:.5rem; font-size:1.75rem; }.comment-form { border-radius:1rem; background:#fff; box-shadow:0 1px 3px rgba(27,42,74,.08); }.comment-form input:not([type=submit]),.comment-form textarea { background:#f7fafc; }.comment-form input[type=submit] { width:max-content; }
.related-posts { padding:3.5rem 1.5rem; border-top:1px solid var(--gvs-line); }.related-heading { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:2rem; }.related-heading h2 { margin:0; font-size:1.5rem; }.related-heading a { color:var(--gvs-green); font-size:.875rem; font-weight:800; }.related-grid { gap:1.5rem; }.related-card { transition:transform .2s ease,box-shadow .2s ease; }.related-card:hover { transform:translateY(-.25rem); box-shadow:0 10px 18px rgba(27,42,74,.12); }.related-card__media { position:relative; height:11rem; background:var(--gvs-peach); }.related-card__media img { width:100%; height:100%; object-fit:cover; }.related-card__media span { position:absolute; top:1rem; left:1rem; border-radius:999px; background:var(--gvs-green); padding:.25rem .75rem; color:#fff; font-size:.625rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }.related-card:nth-child(2) .related-card__media { background:var(--gvs-blue); }.related-card:nth-child(2) .related-card__media span { background:var(--gvs-coral); }.related-card__body { padding:1.25rem; }.related-card h3 { margin:.5rem 0; font-size:1rem; }.related-card__footer { display:flex; align-items:center; justify-content:space-between; border-top:1px solid #edf2f5; padding:1rem 1.25rem; color:var(--gvs-muted); font-size:.75rem; }.related-card__footer b { color:var(--gvs-coral); font-size:1.25rem; }
@media (min-width:640px) { .breadcrumbs { display:flex; }.engagement { flex-direction:row; }.article-header h1 { font-size:3rem; }.article-content { font-size:1.125rem; }.related-grid { grid-template-columns:repeat(2,1fr); } }
@media (min-width:768px) { .site-header { padding-inline:3rem; }.header-inner { position:relative; display:flex; flex-wrap:nowrap; }.header-search { order:initial; flex:1 1 24rem; width:auto; max-width:32rem; margin-inline:auto; }.menu-toggle { grid-column:auto; grid-row:auto; }.site-header--home .header-search { position:absolute; left:calc(50% + (min(72rem,100%) + 3rem)/4 - 12rem); width:24rem; max-width:none; margin:0; }.header-meta { display:flex; }.hero,.section { padding-inline:3rem; }.hero { padding-block:4rem; }.hero-grid { grid-template-columns:1fr 1fr; gap:3rem; }.hero-verse { font-size:2.25rem; line-height:1.45; }.cross-card { justify-self:end; }.post-card { display:grid; grid-template-columns:33.333% 1fr; }.post-card__media { height:auto; min-height:13rem; }.post-card__body { min-height:0; }.about-grid { grid-template-columns:1fr 1fr; gap:3rem; }.about-photo { width:18rem; height:18rem; }.quote-section { padding-block:5rem; }.quote-section blockquote { font-size:2.25rem; }.site-footer { padding-inline:3rem; }.footer-grid { grid-template-columns:1fr 1fr 1fr; }.footer-center { padding-inline:1rem; }.footer-right { text-align:right; }.article-nav,.article-shell,.related-posts { padding-inline:3rem; }.article-shell { padding-block:3.5rem; }.article-header h1 { font-size:3.75rem; } }
@media (min-width:1024px) { .site-header--home .header-search { left:calc(50% + (min(72rem,calc(100% - 6rem)) + 3rem)/4 - 12rem); }.hero,.section { padding-inline:6rem; }.hero-grid,.about-grid { gap:3rem; }.article-nav,.article-shell,.related-posts { padding-inline:6rem; } }