/* =================================================================== Freelancing Tips — www.tips-freelancing.com Design system. Edit the tokens below and the whole site follows. TYPEFACE -------- DM Sans (open source, SIL Open Font License) is used throughout. It is the closest freely licensable match to Google Sans, which is Google's proprietary brand face and cannot legally be used here. To swap it, change --display / --body below AND the Google Fonts in the of every page. Other close free options: Outfit — more geometric, tighter Poppins — geometric, single-storey 'a', larger on the page Inter — neo-grotesque, best for dense UI Manrope — semi-geometric, slightly warmer =================================================================== */ :root{ /* colour */ --ink:#101E19; --ink-2:#2C3F37; --ink-3:#5A6E65; --paper:#FBFAF7; --surface:#FFFFFF; --sand:#F2F0E8; --sand-2:#E8E5DA; --rule:#E0DED3; --rule-2:#EEEDE6; --green:#0B6B4E; --green-2:#095440; --green-tint:#E9F2EE; --lime:#D8F25C; /* type */ --display:"DM Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif; --body:"DM Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif; --mono:"DM Mono",ui-monospace,SFMono-Regular,Menlo,monospace; /* space */ --s1:.5rem; --s2:.875rem; --s3:1.25rem; --s4:2rem; --s5:3rem; --s6:4.5rem; --band:clamp(3.25rem,6.5vw,5.5rem); /* layout */ --wrap:100%; /* full-bleed: sections span the viewport */ --wrap-read:1560px; /* article + sidebar stay readable on huge screens */ --read:66ch; --radius:14px; --radius-sm:9px; --shadow-1:0 1px 2px rgba(16,30,25,.04); --shadow-2:0 12px 32px -12px rgba(16,30,25,.16),0 2px 6px rgba(16,30,25,.05); } *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth} body{ margin:0; background:var(--paper); color:var(--ink-2); font-family:var(--body); font-size:1rem; line-height:1.68; font-optical-sizing:auto; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; overflow-wrap:break-word; } img,svg,video{max-width:100%;height:auto;display:block} a{color:inherit} ::selection{background:var(--lime);color:var(--ink)} :focus-visible{outline:3px solid var(--green);outline-offset:3px;border-radius:3px} hr{border:0;border-top:1px solid var(--rule);margin:var(--s5) 0} h1,h2,h3,h4,h5,.display{ font-family:var(--display); color:var(--ink); font-weight:600; line-height:1.1; letter-spacing:-.014em; margin:0; text-wrap:balance; } h1{font-size:clamp(2.05rem,1.3rem + 2.75vw,3.35rem);font-weight:700;letter-spacing:-.028em;line-height:1.06} h2{font-size:clamp(1.45rem,1.1rem + 1.4vw,2rem);font-weight:700;letter-spacing:-.022em} h3{font-size:clamp(1.12rem,1.02rem + .45vw,1.32rem);line-height:1.26;letter-spacing:-.014em} h4{font-size:1.02rem} p{margin:0 0 1.1em} strong{color:var(--ink);font-weight:700} .wrap{ width:100%;max-width:var(--wrap);margin-inline:auto; padding-left:max(clamp(1.15rem,3.4vw,4rem),env(safe-area-inset-left)); padding-right:max(clamp(1.15rem,3.4vw,4rem),env(safe-area-inset-right)); } .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} .eyebrow{ font-family:var(--mono);font-size:.655rem;font-weight:600;letter-spacing:.19em; text-transform:uppercase;color:var(--green);margin:0 0 .95rem } .on-dark .eyebrow{color:var(--lime)} .mark{ background:var(--lime);color:var(--ink); padding:.02em .14em;border-radius:.06em; -webkit-box-decoration-break:clone;box-decoration-break:clone } .textlink{ font-family:var(--display);font-weight:600;font-size:.925rem;text-decoration:none; color:var(--green);border-bottom:2px solid var(--lime);padding-bottom:2px;white-space:nowrap; transition:border-color .18s,color .18s } .textlink:hover{color:var(--green-2);border-bottom-color:var(--green)} .skip{ position:absolute;left:-9999px;top:0;z-index:200;background:var(--green);color:#fff; padding:.75rem 1.15rem;border-radius:0 0 var(--radius-sm) 0;font-family:var(--display); font-weight:600;text-decoration:none } .skip:focus{left:0} /* ===================== masthead ===================== */ .masthead{ position:sticky;top:0;z-index:80; background:rgba(251,250,247,.92); backdrop-filter:saturate(150%) blur(12px); -webkit-backdrop-filter:saturate(150%) blur(12px); border-bottom:1px solid var(--rule); } .masthead > .wrap{display:flex;align-items:center;gap:1.25rem;min-height:68px} .brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;flex:none} .brand-mark{ width:34px;height:34px;border-radius:9px;background:var(--green);color:var(--lime); display:grid;place-items:center;font-family:var(--display);font-weight:700;font-size:.86rem; letter-spacing:-.02em;flex:none } .brand-name{ font-family:var(--display);font-weight:700;font-size:1.02rem;color:var(--ink); letter-spacing:-.028em;line-height:1.05 } .brand-name span{ display:block;font-family:var(--mono);font-size:.55rem;font-weight:500;letter-spacing:.185em; color:var(--ink-3);text-transform:uppercase;margin-top:2px } .nav{margin-left:auto;display:flex;align-items:center;gap:.1rem} .nav a{ position:relative;text-decoration:none;font-family:var(--display);font-size:.895rem; font-weight:500;padding:.48rem .68rem;border-radius:var(--radius-sm);color:var(--ink-3); white-space:nowrap;transition:color .15s,background .15s } .nav a:hover{color:var(--ink);background:var(--sand)} .nav a[aria-current="page"]{color:var(--ink);font-weight:600} .nav a[aria-current="page"]::after{ content:"";position:absolute;left:.68rem;right:.68rem;bottom:.14rem;height:2px; background:var(--lime);border-radius:2px } .nav-cta{ background:var(--green)!important;color:#fff!important;font-weight:600!important; margin-left:.4rem;padding:.52rem .95rem!important } .nav-cta:hover{background:var(--green-2)!important} .nav-cta::after{display:none!important} /* mobile disclosure nav — no JavaScript required */ .mnav{margin-left:auto;position:relative} .mnav summary{ list-style:none;cursor:pointer;display:flex;align-items:center;gap:.55rem; font-family:var(--display);font-weight:600;font-size:.9rem;color:var(--ink); padding:.5rem .8rem;border:1px solid var(--rule);border-radius:var(--radius-sm); background:var(--surface) } .mnav summary::-webkit-details-marker{display:none} .mnav summary::after{ content:"";width:8px;height:8px;border-right:2px solid var(--ink-3); border-bottom:2px solid var(--ink-3);transform:rotate(45deg) translateY(-2px);transition:transform .2s } .mnav[open] summary::after{transform:rotate(-135deg) translateY(1px)} .mnav-panel{ position:absolute;right:0;top:calc(100% + .55rem);width:min(80vw,268px); background:var(--surface);border:1px solid var(--rule);border-radius:var(--radius); box-shadow:var(--shadow-2);padding:.45rem;display:grid;gap:1px } .mnav-panel a{ text-decoration:none;font-family:var(--display);font-size:.95rem;font-weight:500; color:var(--ink-2);padding:.62rem .75rem;border-radius:var(--radius-sm) } .mnav-panel a:hover,.mnav-panel a[aria-current="page"]{background:var(--sand);color:var(--ink)} .mnav-panel .nav-cta{margin:.35rem 0 0;text-align:center} @media(min-width:961px){.mnav{display:none}} @media(max-width:960px){.nav{display:none}} /* ===================== hero ===================== */ .hero{ background:var(--ink);color:#EDF1EE;position:relative;overflow:hidden; padding:clamp(3.25rem,7vw,5.75rem) 0 clamp(2.75rem,5.5vw,4.5rem) } .hero::after{ content:"";position:absolute;inset:auto -15% -70% 50%;height:85%; background:radial-gradient(closest-side,rgba(11,107,78,.5),transparent 72%);pointer-events:none } .hero-grid{ display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,400px);gap:clamp(2rem,5vw,5.5rem); align-items:end;position:relative;z-index:1 } .hero h1{color:#fff;max-width:15ch} .hero-lede{ font-size:clamp(1rem,.93rem + .32vw,1.13rem);color:#B4C5BC;max-width:54ch; margin-top:1.45rem;line-height:1.62 } .hero-stats{ display:grid;gap:1.05rem;border-left:1px solid rgba(255,255,255,.15);padding-left:1.65rem } .stat dt{font-family:var(--mono);font-size:.62rem;letter-spacing:.17em;text-transform:uppercase;color:#87A196} .stat dd{ margin:.12rem 0 0;font-family:var(--display);font-size:1.45rem;font-weight:600; color:var(--lime);letter-spacing:-.025em;line-height:1 } @media(max-width:860px){ .hero-grid{grid-template-columns:1fr;gap:2.25rem} .hero h1{max-width:100%} .hero-stats{ border-left:0;padding-left:0;border-top:1px solid rgba(255,255,255,.15); padding-top:1.35rem;grid-template-columns:repeat(3,1fr);gap:1rem } } @media(max-width:420px){.hero-stats{grid-template-columns:1fr 1fr}} /* ===================== bands ===================== */ .band{padding:var(--band) 0;border-bottom:1px solid var(--rule)} .band-sand{background:var(--sand)} /* listing pages: keep the list aligned with the page heading above it */ .band-read > .wrap{max-width:var(--wrap-read)} .band-head{ display:flex;align-items:flex-end;justify-content:space-between;gap:2rem; margin-bottom:clamp(1.75rem,3vw,2.5rem);flex-wrap:wrap } .band-head p{color:var(--ink-3);max-width:58ch;margin:.65rem 0 0;font-size:1.02rem} /* ============ the index (homepage signature) ============ */ .index-list{border-top:1px solid var(--rule)} .silo{border-bottom:1px solid var(--rule)} .silo-head{ display:grid;grid-template-columns:3.1rem 1fr auto;gap:.4rem 1.35rem; align-items:baseline;padding:1.5rem 0 .45rem;text-decoration:none } .silo-tab{ font-family:var(--mono);font-size:.68rem;font-weight:700;color:var(--green); border-left:3px solid var(--lime);padding-left:.55rem;line-height:1.95 } .silo-title{ font-family:var(--display);font-size:clamp(1.18rem,1.02rem + .66vw,1.54rem); font-weight:700;color:var(--ink);letter-spacing:-.022em;transition:color .18s } .silo-head:hover .silo-title,.silo-head:focus-visible .silo-title{color:var(--green)} .silo-url{font-family:var(--mono);font-size:.7rem;color:var(--ink-3);white-space:nowrap} .silo-desc{grid-column:2/-1;font-size:.965rem;color:var(--ink-3);margin:0;max-width:64ch;line-height:1.6} .spokes{list-style:none;margin:0;padding:.55rem 0 1.55rem 4.45rem;display:flex;flex-wrap:wrap;gap:.42rem} .spokes a{ display:inline-block;text-decoration:none;font-family:var(--display);font-size:.845rem; font-weight:500;padding:.34rem .72rem;border:1px solid var(--rule);border-radius:999px; background:var(--surface);color:var(--ink-3);transition:.16s } .spokes a:hover{border-color:var(--green);color:var(--green);background:var(--green-tint)} @media(max-width:720px){ .silo-head{grid-template-columns:2.5rem 1fr;gap:.35rem .8rem} .silo-url{display:none} .silo-desc{grid-column:1/-1} .spokes{padding-left:0} } /* ===================== cards ===================== */ .cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr));gap:1.2rem} .card{ background:var(--surface);border:1px solid var(--rule);border-radius:var(--radius); padding:1.5rem 1.4rem 1.3rem;display:flex;flex-direction:column;text-decoration:none; box-shadow:var(--shadow-1);transition:border-color .2s,box-shadow .2s,transform .2s } .card:hover{border-color:var(--green);box-shadow:var(--shadow-2);transform:translateY(-3px)} .card-kicker{ font-family:var(--mono);font-size:.625rem;letter-spacing:.16em;text-transform:uppercase; color:var(--green);margin-bottom:.72rem } .card h3{margin-bottom:.48rem;letter-spacing:-.016em;font-weight:700} .card p{font-size:.925rem;color:var(--ink-3);margin:0 0 1.1rem;line-height:1.6} .card-meta{ margin-top:auto;font-family:var(--mono);font-size:.665rem;color:var(--ink-3); letter-spacing:.06em;border-top:1px solid var(--rule-2);padding-top:.78rem } .card-feature{grid-column:span 2} @media(max-width:760px){.card-feature{grid-column:span 1}} /* ===================== breadcrumbs ===================== */ .crumbs{font-family:var(--mono);font-size:.705rem;color:var(--ink-3);padding:1.35rem 0 0} .crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:.35rem;margin:0;padding:0} .crumbs a{text-decoration:none;color:var(--green)} .crumbs a:hover{text-decoration:underline;text-underline-offset:2px} .crumbs li+li::before{content:"/";margin-right:.35rem;color:var(--sand-2)} .crumbs [aria-current]{color:var(--ink-3)} /* ===================== page head ===================== */ .page-head{padding:1.1rem 0 clamp(1.85rem,3.5vw,2.75rem);border-bottom:1px solid var(--rule)} .page-head > .wrap > *,.crumbs{max-width:var(--wrap-read);margin-inline:auto} .page-head h1{max-width:22ch} .page-head .lede{ font-size:clamp(1.03rem,.96rem + .4vw,1.19rem);color:var(--ink-3);max-width:60ch; margin-top:1.15rem;line-height:1.6 } .byline{ display:flex;flex-wrap:wrap;gap:.45rem 1.25rem;align-items:center;margin-top:1.6rem; font-family:var(--mono);font-size:.685rem;letter-spacing:.07em;color:var(--ink-3);text-transform:uppercase } .byline strong{color:var(--ink);font-weight:700} .byline a{color:var(--green);text-decoration:none} .byline a:hover{text-decoration:underline} /* ===================== article layout ===================== */ .article-grid{ display:grid;grid-template-columns:minmax(0,1fr) 300px; gap:clamp(2rem,4vw,4.5rem);padding:clamp(2rem,4vw,3.25rem) 0 var(--s6);align-items:start; max-width:var(--wrap-read);margin-inline:auto } .prose{max-width:var(--read);font-size:1.0625rem;line-height:1.72} .prose > *:first-child{margin-top:0} .prose h2{margin:2.55rem 0 .85rem;scroll-margin-top:92px} .prose h2::before{ content:"";display:block;width:38px;height:3px;background:var(--lime); border-radius:2px;margin-bottom:.95rem } .prose h3{margin:1.85rem 0 .55rem;scroll-margin-top:92px} .prose ul,.prose ol{padding-left:1.35rem;margin:0 0 1.2em} .prose li{margin-bottom:.52em} .prose li::marker{color:var(--green)} .prose ol li::marker{font-family:var(--mono);font-size:.85em} .prose a{ color:var(--green);text-decoration:underline;text-decoration-color:rgba(11,107,78,.32); text-decoration-thickness:1px;text-underline-offset:3px;transition:.15s } .prose a:hover{text-decoration-color:var(--green);background:rgba(216,242,92,.4)} .prose img{border-radius:var(--radius);margin:1.75rem 0} .callout{ background:var(--sand);border-left:3px solid var(--green); border-radius:0 var(--radius) var(--radius) 0;padding:1.2rem 1.35rem;margin:1.85rem 0; font-size:.985rem } .callout p:last-child{margin:0} .callout strong{font-family:var(--display)} .prose blockquote{ margin:1.85rem 0;padding:.2rem 0 .2rem 1.35rem;border-left:3px solid var(--lime); color:var(--ink-3) } .prose blockquote p:last-child{margin:0} /* tables — horizontally scrollable on small screens */ .table-scroll{ overflow-x:auto;margin:1.8rem 0;border:1px solid var(--rule);border-radius:var(--radius); background:var(--surface);-webkit-overflow-scrolling:touch } .table-scroll table{margin:0;min-width:520px} .prose table{width:100%;border-collapse:collapse;font-size:.94rem;font-variant-numeric:tabular-nums} .prose thead{background:var(--sand)} .prose th,.prose td{text-align:left;padding:.72rem .95rem;border-bottom:1px solid var(--rule-2)} .prose th{ font-family:var(--mono);font-size:.645rem;letter-spacing:.11em;text-transform:uppercase; color:var(--ink-2);font-weight:600;white-space:nowrap } .prose tbody tr:last-child td{border-bottom:0} .prose tbody tr:hover{background:var(--paper)} .prose td:first-child{font-weight:600;color:var(--ink)} /* ===================== sidebar rail ===================== */ .rail{position:sticky;top:88px;display:grid;gap:1.15rem;width:100%} .toc,.rail-box{ border:1px solid var(--rule);border-radius:var(--radius);padding:1.2rem 1.25rem; background:var(--surface);box-shadow:var(--shadow-1) } .rail-box{background:var(--sand);box-shadow:none} .toc p,.rail-box h2{ font-family:var(--mono);font-size:.625rem;letter-spacing:.17em;text-transform:uppercase; color:var(--ink-3);margin:0 0 .8rem;font-weight:600 } .toc ol{list-style:none;margin:0;padding:0;counter-reset:toc} .toc li{counter-increment:toc;margin-bottom:.45rem;font-size:.885rem;line-height:1.35;display:flex;gap:.5rem} .toc li::before{ content:counter(toc,decimal-leading-zero);font-family:var(--mono);font-size:.66rem; color:var(--green);flex:none;padding-top:.12rem } .toc a,.rail-box a{text-decoration:none;color:var(--ink-3);transition:color .15s} .toc a:hover,.rail-box a:hover{color:var(--green)} .rail-box ul{list-style:none;margin:0;padding:0;font-size:.895rem} .rail-box li{margin-bottom:.5rem;line-height:1.35} .rail-box li:last-child{margin-bottom:0} .rail-box a{color:var(--green-2)} @media(max-width:1000px){ .article-grid{grid-template-columns:1fr} .prose{max-width:none} .rail{position:static;order:-1;gap:1rem} } @media(min-width:640px) and (max-width:1000px){.rail{grid-template-columns:1fr 1fr;align-items:start}} /* ===================== prev / next ===================== */ .pagenav{ display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:var(--s5); padding-top:var(--s4);border-top:1px solid var(--rule) } .pagenav a{ text-decoration:none;border:1px solid var(--rule);border-radius:var(--radius); padding:1.05rem 1.2rem;background:var(--surface);transition:border-color .18s,box-shadow .18s } .pagenav a:hover{border-color:var(--green);box-shadow:var(--shadow-1)} .pagenav span{ display:block;font-family:var(--mono);font-size:.615rem;letter-spacing:.16em; text-transform:uppercase;color:var(--ink-3);margin-bottom:.4rem } .pagenav strong{ font-family:var(--display);font-size:.98rem;font-weight:600;color:var(--ink); line-height:1.25;display:block } .pagenav .next{text-align:right} .pagenav .only-next{grid-column:2} @media(max-width:600px){ .pagenav{grid-template-columns:1fr} .pagenav .next{text-align:left} .pagenav .only-next{grid-column:1} } /* ===================== newsletter ===================== */ .signup{ background:var(--ink);color:#EAEFEC;border-radius:18px; padding:clamp(1.75rem,4vw,2.9rem);display:grid;grid-template-columns:1.15fr 1fr; gap:clamp(1.5rem,3vw,2.5rem);align-items:center;position:relative;overflow:hidden } .signup::after{ content:"";position:absolute;inset:auto -20% -80% 55%;height:120%; background:radial-gradient(closest-side,rgba(11,107,78,.45),transparent 70%);pointer-events:none } .signup > *{position:relative;z-index:1} .signup h2{color:#fff;max-width:17ch} .signup > div > p{color:#AFC0B7;margin:.75rem 0 0;font-size:.975rem;max-width:46ch} .form{display:flex;gap:.55rem;flex-wrap:wrap} .form input{ flex:1 1 190px;min-width:0;padding:.85rem 1rem;border-radius:var(--radius-sm); border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.07);color:#fff; font-family:var(--body);font-size:16px } .form input::placeholder{color:#87A196} .form input:focus{outline:2px solid var(--lime);outline-offset:1px;border-color:transparent} .form button{ padding:.85rem 1.45rem;border:0;border-radius:var(--radius-sm);background:var(--lime); color:var(--ink);font-family:var(--display);font-weight:600;font-size:.95rem;cursor:pointer; transition:background .18s } .form button:hover{background:#fff} .form-note{ font-family:var(--mono);font-size:.625rem;letter-spacing:.09em;color:#87A196; margin:.85rem 0 0;text-transform:uppercase } @media(max-width:820px){.signup{grid-template-columns:1fr}} /* ===================== footer ===================== */ .foot{background:var(--ink);color:#A9BBB2;padding:var(--s6) 0 2rem;font-size:.89rem} .foot-grid{display:grid;grid-template-columns:1.5fr repeat(4,1fr);gap:2rem 1.75rem} .foot h2{ font-family:var(--mono);font-size:.625rem;letter-spacing:.17em;text-transform:uppercase; color:var(--lime);margin:0 0 .9rem;font-weight:600 } .foot ul{list-style:none;margin:0;padding:0} .foot li{margin-bottom:.48rem;line-height:1.4} .foot a{color:#A9BBB2;text-decoration:none;transition:color .15s} .foot a:hover{color:#fff} .foot .brand-name{color:#fff} .foot .brand-name span{color:#87A196} .foot-brand p{max-width:33ch;color:#87A196;margin-top:1rem;line-height:1.6} .foot-base{ margin-top:var(--s5);padding-top:1.4rem;border-top:1px solid rgba(255,255,255,.11); display:flex;justify-content:space-between;gap:1rem 1.5rem;flex-wrap:wrap; font-family:var(--mono);font-size:.665rem;letter-spacing:.07em;color:#78908A } .foot-base a{color:#78908A} @media(max-width:960px){.foot-grid{grid-template-columns:1fr 1fr;gap:2rem}} @media(max-width:520px){.foot-grid{grid-template-columns:1fr}} /* ===================== motion / print ===================== */ @media(prefers-reduced-motion:reduce){ *,*::before,*::after{ animation-duration:.01ms!important;animation-iteration-count:1!important; transition-duration:.01ms!important;scroll-behavior:auto!important } } @media print{ .masthead,.mnav,.signup,.foot,.rail,.pagenav,.skip,.crumbs{display:none!important} body{background:#fff;color:#000;font-size:11pt} .article-grid{display:block;padding:0} .prose{max-width:none} .prose a{text-decoration:none;color:#000} .prose a::after{content:" (" attr(href) ")";font-size:9pt;color:#555} .hero{background:#fff;color:#000} .hero h1,.signup h2{color:#000} h2,h3{page-break-after:avoid} p,li{orphans:3;widows:3} } /* ===================== blog: post feed ===================== */ .postlist{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)} .post-item{border-bottom:1px solid var(--rule)} .post-item a{ display:grid;grid-template-columns:1fr auto;gap:.3rem 2rem;align-items:baseline; text-decoration:none;padding:1.5rem 0 } .post-item a:hover .post-title{color:var(--green)} .post-cat{ grid-column:1/-1;font-family:var(--mono);font-size:.615rem;letter-spacing:.16em; text-transform:uppercase;color:var(--green);margin-bottom:.15rem } .post-title{ font-family:var(--display);font-size:clamp(1.12rem,.98rem + .6vw,1.42rem);font-weight:700; color:var(--ink);letter-spacing:-.02em;line-height:1.2;transition:color .18s } .post-date{font-family:var(--mono);font-size:.685rem;color:var(--ink-3);white-space:nowrap} .post-ex{grid-column:1/-1;font-size:.97rem;color:var(--ink-3);margin:.42rem 0 0;max-width:68ch;line-height:1.6} .post-meta{ grid-column:1/-1;font-family:var(--mono);font-size:.635rem;color:var(--ink-3); letter-spacing:.06em;margin-top:.6rem } @media(max-width:640px){ .post-item a{grid-template-columns:1fr} .post-date{order:-1;margin-bottom:.1rem} } /* pagination */ .pager{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-top:var(--s4);flex-wrap:wrap} .pager a,.pager span{ font-family:var(--display);font-weight:600;font-size:.9rem;text-decoration:none; padding:.6rem 1.05rem;border:1px solid var(--rule);border-radius:var(--radius-sm); background:var(--surface);color:var(--ink) } .pager a:hover{border-color:var(--green);color:var(--green)} .pager .count{border:0;background:none;font-family:var(--mono);font-size:.68rem;color:var(--ink-3);letter-spacing:.08em} /* author box */ .authorbox{ display:flex;gap:1.15rem;align-items:flex-start;margin-top:var(--s5);padding:1.4rem; background:var(--sand);border-radius:var(--radius) } .authorbox .av{ width:52px;height:52px;border-radius:50%;background:var(--green);color:var(--lime);flex:none; display:grid;place-items:center;font-family:var(--display);font-weight:700;font-size:1.15rem } .authorbox h2{font-size:1.02rem;margin:0 0 .3rem} .authorbox p{margin:0;font-size:.93rem;color:var(--ink-3);line-height:1.6} .authorbox a{color:var(--green-2)} /* related */ .related{margin-top:var(--s5);padding-top:var(--s4);border-top:1px solid var(--rule)} .related > h2{font-size:1.25rem;margin-bottom:1.1rem} .related > h2::before{display:none} /* archive */ .arch-year{ font-family:var(--mono);font-size:.66rem;letter-spacing:.18em;text-transform:uppercase; color:var(--green);margin:2.2rem 0 .5rem;font-weight:600 } .arch-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)} .arch-list li{border-bottom:1px solid var(--rule-2)} .arch-list a{ display:flex;justify-content:space-between;gap:1.5rem;padding:.7rem 0;text-decoration:none; font-family:var(--display);font-size:.96rem;font-weight:500;color:var(--ink-2) } .arch-list a:hover{color:var(--green)} .arch-list em{font-family:var(--mono);font-size:.66rem;font-style:normal;color:var(--ink-3);white-space:nowrap} /* search */ .searchbar{display:flex;gap:.6rem;margin:0 0 1.6rem;flex-wrap:wrap} .searchbar input{ flex:1 1 240px;padding:.85rem 1.05rem;border:1px solid var(--rule);border-radius:var(--radius-sm); background:var(--surface);font-family:var(--body);font-size:1.02rem;color:var(--ink) } .searchbar input:focus{outline:3px solid var(--green);outline-offset:2px} #count{font-family:var(--mono);font-size:.68rem;letter-spacing:.09em;color:var(--ink-3);text-transform:uppercase;margin-bottom:1rem} mark{background:var(--lime);color:var(--ink);padding:0 .1em;border-radius:2px} /* ===================== ultrawide ===================== */ @media(min-width:1700px){ :root{--read:72ch;--wrap-read:1680px} body{font-size:1.04rem} .prose{font-size:1.1rem} } @media(min-width:2200px){ .wrap{ padding-left:max(5.5rem,env(safe-area-inset-left)); padding-right:max(5.5rem,env(safe-area-inset-right)); } } /* ===================== responsive hardening ===================== */ a,button,summary,input,label{-webkit-tap-highlight-color:rgba(11,107,78,.14)} /* Touch devices: links sized for a fingertip, not a cursor. */ @media(pointer:coarse){ .mnav summary{padding:.68rem .95rem} .mnav-panel a{padding:.8rem .85rem} .spokes a{padding:.55rem .9rem} .toc li{margin-bottom:.7rem} .toc a,.rail-box a,.foot a,.crumbs a{display:inline-block;padding-block:.22rem} .rail-box li,.foot li{margin-bottom:.7rem} .arch-list a{padding:.85rem 0} .post-item a{padding:1.4rem 0} .pager a{padding:.75rem 1.15rem} .card{padding:1.6rem 1.4rem 1.4rem} } /* Tablet portrait — sidebar stacks above the article as two columns. */ @media(min-width:641px) and (max-width:1000px){ .article-grid{gap:2rem} .page-head h1{max-width:none} } /* Small laptop / tablet landscape — a 300px rail would starve the text column. */ @media(min-width:1001px) and (max-width:1180px){ .article-grid{grid-template-columns:minmax(0,1fr) minmax(228px,258px);gap:2.25rem} .rail{top:84px} } /* Small phones (SE, Fold, 360px Androids). */ @media(max-width:380px){ :root{--band:2.6rem} .wrap{ padding-left:max(1rem,env(safe-area-inset-left)); padding-right:max(1rem,env(safe-area-inset-right)); } h1{font-size:clamp(1.8rem,1.15rem + 2.4vw,2.35rem)} .brand-name span{display:none} .hero-stats{grid-template-columns:1fr;gap:.8rem} .stat dd{font-size:1.3rem} .signup{padding:1.45rem} .form input,.form button{flex:1 1 100%} .card{padding:1.35rem 1.2rem 1.15rem} .callout{padding:1rem 1.1rem} .authorbox{flex-direction:column;gap:.9rem} } /* Phone in landscape — reclaim vertical space. */ @media(max-height:540px) and (orientation:landscape){ .masthead{position:static} .hero{padding:2.25rem 0 1.9rem} .rail{position:static} .band{padding:2.25rem 0} } /* Footer sits above the home indicator on gesture-nav phones. */ .foot{padding-bottom:max(2rem,env(safe-area-inset-bottom))} /* ===================== render performance ===================== Below-the-fold sections are skipped during the first layout pass. contain-intrinsic-size reserves height so the scrollbar doesn't jump. */ .band:not(.hero), .related, .foot{content-visibility:auto} .band:not(.hero){contain-intrinsic-size:auto 640px} .related{contain-intrinsic-size:auto 420px} .foot{contain-intrinsic-size:auto 520px} @media print{.band,.related,.foot{content-visibility:visible}} /* ===================== share row ===================== */ .share{ display:flex;flex-wrap:wrap;align-items:center;gap:.45rem; margin:var(--s4) 0 0;padding:1.05rem 0 0;border-top:1px solid var(--rule) } .share-label{ font-family:var(--mono);font-size:.63rem;letter-spacing:.17em;text-transform:uppercase; color:var(--ink-3);margin-right:.35rem } .share a,.share button,.share .copy-link{ font-family:var(--display);font-size:.83rem;font-weight:600;text-decoration:none; color:var(--ink-2);background:var(--surface);border:1px solid var(--rule); border-radius:999px;padding:.4rem .82rem;cursor:pointer;line-height:1.4; transition:border-color .16s,color .16s,background .16s } .share a:hover,.share button:hover{border-color:var(--green);color:var(--green);background:var(--green-tint)} .share button.done{background:var(--lime);border-color:var(--lime);color:var(--ink)} @media(pointer:coarse){.share a,.share button,.share .copy-link{padding:.58rem 1rem}} @media print{.share{display:none}} /* ===================== founder story (homepage) ===================== */ .story-band{background:var(--sand);border-bottom:1px solid var(--rule)} .story{ display:grid;grid-template-columns:minmax(0,1.55fr) minmax(260px,.9fr); gap:clamp(2rem,5vw,4.5rem);align-items:center; max-width:var(--wrap-read);margin-inline:auto } .story-main h2{max-width:20ch;margin-bottom:1.15rem} .story-lead{font-size:clamp(1.04rem,.97rem + .4vw,1.2rem);color:var(--ink-2);line-height:1.65} .story-main p{color:var(--ink-2)} .story-quote{ margin:1.6rem 0;padding:1.3rem 1.5rem;background:var(--ink);color:#fff; border-radius:var(--radius);border:0; font-family:var(--display);font-size:clamp(1.06rem,.98rem + .5vw,1.28rem); font-weight:600;line-height:1.42;letter-spacing:-.015em;position:relative } .story-quote::before{ content:"";position:absolute;left:0;top:1.4rem;bottom:1.4rem;width:4px; background:var(--lime);border-radius:0 3px 3px 0 } .story-figures{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--rule); border:1px solid var(--rule);border-radius:var(--radius);overflow:hidden} .figure{background:var(--surface);padding:1.35rem 1.2rem;text-align:left} .figure b{ display:block;font-family:var(--display);font-size:clamp(1.7rem,1.3rem + 1.4vw,2.35rem); font-weight:700;color:var(--green);letter-spacing:-.03em;line-height:1 } .figure b sup{font-size:.5em;top:-.55em;position:relative;color:var(--ink-3)} .figure span{ display:block;margin-top:.4rem;font-family:var(--mono);font-size:.615rem; letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3);line-height:1.35 } @media(max-width:900px){ .story{grid-template-columns:1fr;gap:2rem} .story-main h2{max-width:none} } @media(max-width:420px){.story-figures{grid-template-columns:1fr}} /* stats band on the about page */ .statband{ display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:1px; background:var(--rule);border:1px solid var(--rule);border-radius:var(--radius); overflow:hidden;margin:0 0 2.2rem } .stat-card{background:var(--sand);padding:1.3rem 1.15rem} .stat-card b{ display:block;font-family:var(--display);font-size:1.85rem;font-weight:700; color:var(--green);letter-spacing:-.03em;line-height:1 } .stat-card span{ display:block;margin-top:.35rem;font-family:var(--mono);font-size:.6rem; letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3) } .story-main .prose-links a,.story-main p a{ color:var(--green-2);text-decoration:underline; text-decoration-color:rgba(9,84,64,.32);text-decoration-thickness:1px;text-underline-offset:3px } .story-main p a:hover{text-decoration-color:var(--green);background:rgba(216,242,92,.45)} .story-cta{display:flex;flex-wrap:wrap;gap:.6rem 1.6rem;margin-top:1.5rem} .story-cta a{white-space:normal} .textlink.alt{color:var(--ink-2);border-bottom-color:var(--rule)} .textlink.alt:hover{color:var(--green);border-bottom-color:var(--lime)} /* ===================== disclaimers ===================== */ .foot-disclaimer{color:#7D948A!important;font-size:.8rem;line-height:1.55;max-width:38ch;margin-top:.9rem} .foot-disclaimer a{color:#A9BBB2;text-decoration:underline;text-underline-offset:2px} .disclaimer-note{ border:1px solid var(--rule);border-left:3px solid var(--green); background:var(--sand);border-radius:0 var(--radius) var(--radius) 0; padding:.95rem 1.15rem;margin:0 0 1.9rem;font-size:.93rem;line-height:1.6;color:var(--ink-2) } .disclaimer-note strong{font-family:var(--display)} /* ===================== article imagery ===================== */ .fig{margin:0 0 1.9rem} .fig img{ width:100%;height:auto;display:block;border-radius:var(--radius); background:var(--sand);border:1px solid var(--rule) } .fig-lead{margin:0 0 2.1rem} .prose figcaption{ font-family:var(--mono);font-size:.68rem;letter-spacing:.06em;color:var(--ink-3); margin-top:.55rem;line-height:1.45 } .prose .fig + h2{margin-top:2.2rem} @media print{.fig{break-inside:avoid}}