/* Public editorial theme adapted from /design/theme.css. Admin pages keep their own assets. */
@import url("https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=DM+Sans:wght@400;500;600;700&family=Fraunces:opsz,wght@9..144,600;9..144,700&display=swap");
:root { --ink:#142b3a; --muted:#68777a; --paper:#f6f4ef; --white:#fffdf9; --line:#d9e0df; --coral:#e96f51; --sage:#dce8e5; --blue:#dce8ed; --serif:'Fraunces',Georgia,serif; --sans:'DM Sans',Arial,sans-serif; --mono:'DM Mono',monospace; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; }
.shell { width:min(1120px,calc(100% - 48px)); margin:auto; }
.site-header { min-height:78px; } .header-inner { min-height:78px; display:flex; align-items:center; justify-content:space-between; gap:30px; }
.brand { display:flex; align-items:center; gap:10px; font-weight:700; font-size:20px; letter-spacing:-.04em; } .brand-mark { display:grid; place-items:center; width:31px; height:31px; border-radius:50%; background:var(--coral); color:#fff; font:500 15px var(--mono); letter-spacing:-.15em; }
.main-nav { display:flex; gap:28px; font-size:14px; } .search-button { border:1px solid var(--line); border-radius:30px; padding:8px 13px; color:var(--muted); font-size:13px; }
.site-footer { padding:40px 0; } .footer-inner { display:flex; justify-content:space-between; align-items:center; gap:24px; } .footer-links { display:flex; gap:20px; align-items:center; font-size:13px; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:var(--sans); line-height:1.65; }
#page-wrapper,#features-wrapper,.homePlaylists,.complete-width-content,.banner-wrapper,.page-wrapper { background:transparent; }
#header-wrapper { position:sticky; top:0; z-index:5; background:rgba(246,244,239,.92); border-bottom:1px solid var(--line); box-shadow:none; backdrop-filter:blur(12px); }
#header { display:flex; align-items:center; justify-content:space-between; min-height:78px; }
#logo a { display:block; } #logo img { filter:saturate(.8); }
#nav { position:static; font-size:14px; } #nav a { color:var(--muted); font-family:var(--sans); font-weight:600; text-decoration:none; padding:0; } #nav a:hover,#nav .current a { color:var(--ink); } #nav ul li.current a { background:transparent; } #nav ul li a.active { color:var(--coral) !important; border-bottom:2px solid var(--coral) !important; } #nav ul li a.active:hover { color:var(--coral) !important; } #nav > ul { display:flex; gap:28px; align-items:center; margin:0; padding:0; list-style:none; } #nav > ul > li { float:none; display:block; line-height:normal; padding:0; }
h1,h2,h3,h4,h5,h6 { color:var(--ink); font-family:var(--serif); letter-spacing:-.04em; }
#banner h1,#content h1,.page-title { font-size:clamp(2.75rem,7vw,4.75rem); line-height:1.02; }
#banner,.box,.blogs_post,.pageContent { background:var(--white); border:1px solid var(--line); border-radius:4px; box-shadow:0 10px 30px rgba(20,43,58,.06); }
#banner { padding:3.5em; } #banner p,#content p,.blogs_post p { color:var(--muted); }
.homePlaylists,.complete-width-content,#features-wrapper,#content,#sidebar { padding-top:4rem; padding-bottom:4rem; }
.homefeature,.about,.blogs_post,.pageContent,.box { overflow:hidden; } .homefeature img,.blogs_post img { display:block; max-width:100%; }
.blogs_post .inner { padding:2rem; } .blogs_post h2,.homefeature h2 { font-size:clamp(1.5rem,3vw,2rem); line-height:1.1; }
.entry-meta,.entry-meta a { color:var(--muted); font-family:var(--mono); font-size:.75rem; }
.intro { display:grid; grid-template-columns:1.25fr .75fr; align-items:center; gap:80px; padding:30px 0 90px; } .intro h1 { font-size:clamp(46px,6vw,76px); line-height:1.02; margin:0 0 25px; } .intro h1 em { color:var(--coral); font-style:normal; } .lede { max-width:510px; font-size:19px; color:var(--muted); } .text-link { display:inline-flex; gap:10px; align-items:center; font-weight:700; border-bottom:2px solid var(--coral); padding-bottom:4px; } .text-link span,.quiet-link span { color:var(--coral); }
.intro-note { padding:30px; background:var(--sage); transform:rotate(1deg); } .note-label,.section-heading .eyebrow { margin-bottom:8px; } .note-pin { color:var(--coral); } .section-heading { display:flex; justify-content:space-between; align-items:end; margin-bottom:25px; } .section-heading h2,.tips-inner h2,.about-inner h2 { font-size:clamp(30px,4vw,48px); margin:0; }
.series-grid,.post-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; } .series-card { position:relative; min-height:210px; padding:28px; background:var(--white); border:1px solid var(--line); border-radius:4px; box-shadow:0 10px 30px rgba(20,43,58,.06); } .series-card.green { background:var(--sage); } .series-card.blue { background:var(--blue); } .series-card h3 { font-size:25px; line-height:1.15; margin-top:35px; } .series-count,.tip-number { color:var(--coral); font:500 11px var(--mono); text-transform:uppercase; letter-spacing:.1em; } .series-arrow { position:absolute; right:25px; bottom:22px; color:var(--coral); font-size:24px; }
.playlist-card { display:block; padding:0; overflow:hidden; } .playlist-card img { width:100%; height:auto; aspect-ratio:440 / 248; object-fit:cover; } .playlist-card .inner { padding:24px 28px 30px; } .playlist-card h2 { margin:0 0 12px; font-size:25px; line-height:1.15; }
.tips-band {
    background: var(--ink);
    color: var(--white);
    padding: 65px 0;
    margin-top: 16px;
} .tips-band h2,.tips-band p { color:var(--white); } .tips-inner,.about-inner { display:grid; grid-template-columns:1fr 1fr; gap:70px; align-items:center; } .tip { border-left:2px solid var(--coral); padding-left:25px; } .tip a { color:var(--white); font-weight:700; } .about-band { padding:80px 0; background:var(--blue); } .about-avatar { display:grid; place-items:center; width:100px; height:100px; overflow:hidden; border-radius:50%; background:var(--coral); color:white; font:500 24px var(--mono); } .about-avatar img { width:100%; height:100%; object-fit:cover; }
.page { padding:30px 0 120px; min-height:calc(100vh - 150px); } .page h1 { font-size:clamp(48px,7vw,76px); margin:0 0 18px; } .page-lede { max-width:570px; font-size:19px; color:var(--muted); margin-bottom:32px; } .post-list { max-width:800px; display:grid; gap:20px; } .post-card { margin-bottom:0; padding:24px 28px; background:var(--white); border:1px solid var(--line); border-radius:4px; } .post-card .inner { padding:0; } .post-card h2 { font-size:32px; line-height:1.15; margin:0 0 10px; } .post-card p { margin:0 0 14px; } .post-card .entry-byline-with-avatar { margin:0; } .card-meta { display:flex; gap:12px; align-items:center; color:var(--muted); font-size:13px; } .avatar { display:grid; place-items:center; width:30px; height:30px; border-radius:50%; background:var(--coral); color:#fff; font:11px var(--mono); }
.tip-archive .tip { margin-bottom:0; }
.form-page { padding-top:64px; } .form-page > .eyebrow { margin:0 0 10px; color:var(--coral); font:500 12px var(--mono); letter-spacing:.12em; text-transform:uppercase; } .contact-card { padding:32px 36px 36px; } .contact-card h1 { font-size:clamp(34px,5vw,48px); margin:0 0 28px; } .contact-success { display:flex; align-items:flex-start; gap:12px; margin:0 0 26px; padding:14px 16px; border:1px solid #b8d9c4; border-left:4px solid #3b8f5a; border-radius:4px; background:#eef8f1; color:#235c39; } .contact-success-icon { display:grid; flex:0 0 22px; place-items:center; width:22px; height:22px; border-radius:50%; background:#3b8f5a; color:#fff; font-size:14px; font-weight:700; line-height:1; } .contact-success strong { display:block; margin-bottom:2px; font-size:15px; } .contact-success p { margin:0; color:#356347; font-size:14px; line-height:1.5; } .contact-form .form-group { margin:0 0 18px; } .contact-form label { display:block; margin:0 0 6px; color:var(--ink); font-size:14px; font-weight:700; line-height:1.4; } .contact-form input,.contact-form textarea { display:block; width:100%; padding:10px 12px; border:1px solid var(--line); border-radius:3px; background:var(--white); color:var(--ink); font:inherit; line-height:1.5; } .contact-form input { min-height:44px; } .contact-form textarea { min-height:150px; resize:vertical; } .contact-form input:focus,.contact-form textarea:focus { outline:2px solid rgba(233,111,81,.25); border-color:var(--coral); } .contact-form .submitButton { width:auto; min-width:148px; padding:11px 20px; border:0; color:#fff; cursor:pointer; } .contact-form .error { display:block; margin-top:4px; color:#b42318; font-size:12px; line-height:1.4; }
.pad-1em { padding-top:4rem; padding-bottom:4rem; } .aboutme-title { color:var(--coral); font-family:var(--mono); font-size:.75rem; letter-spacing:.12em; text-transform:uppercase; }
a { color:var(--ink); } a:hover { color:var(--coral); }
input[type=button],input[type=submit],button,.button { background:var(--coral); border-radius:2px; font-family:var(--sans); font-size:1rem; font-weight:700; } input[type=button]:hover,input[type=submit]:hover,button:hover,.button:hover { background:#d95f43; } .youtubeBtn { background:var(--coral); }
#footer-wrapper { margin-top:0; background:var(--ink); color:var(--white); font-size:14px; } #footer-wrapper a { color:var(--white); } #footer-wrapper a:hover { color:var(--coral); }
#footer-wrapper .contact ul { display:flex; justify-content:center; gap:.5rem; margin:0 0 1rem; }
#footer-wrapper .widget.contact ul li a { width:2rem; height:2rem; line-height:2rem; border-radius:50%; background:transparent !important; opacity:1; }
#footer-wrapper .widget.contact ul li a:before { color:var(--white); font-size:1rem; } #footer-wrapper .widget.contact ul li a:hover:before { color:var(--coral); }
#footer-wrapper .contact p, #footer-wrapper #copyright { font-size:12px; } #copyright { border-top-color:rgba(255,255,255,.18); }
input,textarea,select { border:1px solid var(--line); background:var(--white); color:var(--ink); font-family:var(--sans); } pre,code { font-family:var(--mono); } pre { background:var(--ink); color:#e4edeb; border-radius:2px; }
@media screen and (max-width:980px) { .homePlaylists,.complete-width-content,#features-wrapper,#content,#sidebar { padding-top:3rem; padding-bottom:3rem; } }
@media screen and (max-width:736px) { #banner { padding:2em 1.5em; } #header { min-height:64px; } .homePlaylists,.complete-width-content,#features-wrapper,#content,#sidebar,.pad-1em { padding-top:2.5rem; padding-bottom:2.5rem; } .blogs_post .inner { padding:1.5rem; } .intro,.tips-inner,.about-inner { grid-template-columns:1fr; gap:35px; padding-top:50px; padding-bottom:55px; } .series-grid,.post-grid { grid-template-columns:1fr; } .section-heading { align-items:flex-start; flex-direction:column; gap:15px; } .page { padding-top:55px; } }
@media screen and (max-width:736px) { .shell { width:calc(100% - 32px); max-width:1120px; margin-left:auto; margin-right:auto; } #nav.main-nav { display:none; } #navPanel nav ul { display:block; margin:0; padding:0; list-style:none; } #navPanel nav li { display:block; float:none; line-height:normal; } #navPanel nav a { display:block; color:var(--ink); } .search-button { display:none; } .footer-inner,.footer-links { flex-direction:column; align-items:center; text-align:center; } #footer-wrapper { padding:32px 0; } #footer-wrapper .row, #footer-wrapper .col-12, #footer-wrapper .widget { width:100%; margin:0; } #footer-wrapper .contact ul { justify-content:center; padding:0; } #footer-wrapper #copyright { text-align:center; } }
.article-body :not(pre) > code {
    padding: 2px 4px;
    border: 1px solid lightgray;
    border-radius: 3px;
    font-weight: 400;
    font-family: Consolas, monospace;
    background: rgb(0 0 0 / 4%);
    color: #781616;
}