/* =================================================================== 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:#0A120F; /* headings — near-black */ --ink-2:#141D1A; /* body copy — dark, not washed out */ --ink-3:#41504A; /* secondary text, still clearly readable */ --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{transition:box-shadow .3s ease,background-color .3s ease} .masthead.scrolled{ box-shadow:0 6px 24px -14px rgba(10,18,15,.35); background:rgba(251,250,247,.97) } .masthead > .wrap{ display:flex;align-items:center;gap:1.25rem;min-height:68px; transition:min-height .3s ease } .masthead.scrolled > .wrap{min-height:60px} .brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;flex:none} .brand-mark{width:34px;height:34px;flex:none;display:block} .brand-mark svg{width:100%;height:100%;display:block} .bm-disc{fill:var(--green);transition:fill .3s ease} .bm-hl{fill:var(--lime);transform-origin:9.5px 23px;transition:transform .35s cubic-bezier(.2,.7,.3,1)} .bm-lines rect{fill:var(--paper)} .brand:hover .bm-disc{fill:var(--green-2)} .brand:hover .bm-hl{transform:scaleX(1.06)} .brand-name,.brand-name span{transition:color .2s ease} .brand:hover .brand-name{color:var(--green)} .brand-name{ font-family:var(--display);font-weight:700;font-size:1.02rem;color:var(--ink); letter-spacing:-.028em;line-height:1.05 } /* Mono, all-caps, wide-tracked under a logo is the stock template look. Sentence case in the display face reads like a masthead instead. */ .brand-name span{ display:block;font-family:var(--display);font-size:.72rem;font-weight:400; letter-spacing:.002em;color:var(--ink-3);text-transform:none;margin-top:1px } .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-2); white-space:nowrap; transition:color .2s ease,background-color .2s ease,transform .2s cubic-bezier(.2,.7,.3,1) } /* underline grows out from the centre */ .nav a::after{ content:"";position:absolute;left:.68rem;right:.68rem;bottom:.16rem;height:2px; background:var(--lime);border-radius:2px; transform:scaleX(0);transform-origin:center; transition:transform .28s cubic-bezier(.2,.7,.3,1) } .nav a:hover,.nav a:focus-visible{color:var(--ink);background:var(--sand);transform:translateY(-1px)} .nav a:hover::after,.nav a:focus-visible::after{transform:scaleX(1)} .nav a:active{transform:translateY(0)} .nav a[aria-current="page"]{color:var(--ink);font-weight:600} .nav a[aria-current="page"]::after{transform:scaleX(1)} /* the newsletter button: colour shift, lift, and a light sweep across it */ .nav-cta{ background:var(--green)!important;color:#fff!important;font-weight:600!important; margin-left:.45rem;padding:.52rem .98rem!important;overflow:hidden; box-shadow:0 1px 2px rgba(10,18,15,.14); transition:background-color .2s ease,transform .2s cubic-bezier(.2,.7,.3,1),box-shadow .2s ease } .nav-cta::before{ content:"";position:absolute;inset:0; background:linear-gradient(110deg,transparent 20%,rgba(255,255,255,.28) 50%,transparent 80%); transform:translateX(-120%);transition:transform .6s cubic-bezier(.2,.7,.3,1) } .nav-cta:hover{background:var(--green-2)!important;transform:translateY(-2px); box-shadow:0 6px 16px -6px rgba(10,18,15,.4)} .nav-cta:hover::before{transform:translateX(120%)} .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[open] .mnav-panel{animation:menuIn .22s cubic-bezier(.2,.7,.3,1) both} @keyframes menuIn{from{opacity:0;transform:translateY(-8px) scale(.98)}to{opacity:1;transform:none}} .mnav summary{transition:border-color .2s ease,background-color .2s ease} .mnav summary:hover{border-color:var(--green);background:var(--green-tint)} .mnav-panel a{transition:background-color .18s ease,color .18s ease,padding-left .18s ease} .mnav-panel a:hover{padding-left:1rem} .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)} /* one centred column; everything inside it aligns left, matching the article below */ .page-head .head-inner,.crumbs{max-width:var(--wrap-read);margin-inline:auto} .page-head .head-inner > *{margin-inline:0} .page-head h1{max-width:32ch} .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){ .nav a::after,.nav-cta::before,.brand-mark,.mnav[open] .mnav-panel{ transition:none!important;animation:none!important;transform:none!important } .nav a[aria-current="page"]::after{transform:scaleX(1)!important} *,*::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}} /* ===================== homepage motion & imagery ===================== */ /* Everything below degrades to a static page: content is visible unless JS adds .js to , and all of it is switched off for reduced-motion. */ .hero h1,.hero .eyebrow,.hero-lede,.hero-stats{animation:rise .7s cubic-bezier(.2,.7,.3,1) both} .hero .eyebrow{animation-delay:.05s} .hero h1{animation-delay:.14s} .hero-lede{animation-delay:.26s} .hero-stats{animation-delay:.38s} @keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}} /* the highlighter sweeps across the word instead of just appearing */ .hero .mark{ background:none;color:#fff;position:relative;padding:.02em .14em; animation:inkify .01s linear 1.28s forwards } @keyframes inkify{to{color:var(--ink)}} .hero .mark::before{ content:"";position:absolute;inset:0;background:var(--lime);border-radius:.06em; transform:scaleX(0);transform-origin:left;z-index:-1; animation:sweep .55s cubic-bezier(.2,.7,.3,1) .85s forwards } .hero .mark{z-index:0} @keyframes sweep{to{transform:scaleX(1)}} /* slow drift on the hero glow */ .hero::after{animation:drift 22s ease-in-out infinite alternate} @keyframes drift{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(-4%,-3%,0) scale(1.12)}} /* scroll reveal */ .js .reveal,.js .reveal-item{opacity:0;transform:translateY(18px)} .js .reveal.in,.js .reveal-item.in{ opacity:1;transform:none;transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.3,1) } /* card thumbnails */ .card.has-thumb{padding-top:0;overflow:hidden} .card-thumb{display:block;margin:0 -1.4rem 1.15rem;overflow:hidden;background:var(--sand)} .card-thumb img{ width:100%;height:auto;display:block;aspect-ratio:3/2;object-fit:cover; transition:transform .5s cubic-bezier(.2,.7,.3,1) } .card.has-thumb:hover .card-thumb img{transform:scale(1.045)} .card-feature .card-thumb img{aspect-ratio:16/7} @media(max-width:760px){.card-feature .card-thumb img{aspect-ratio:3/2}} /* story section: image above the figures */ .story-side{display:grid;gap:1.15rem} .story-fig{margin:0} .story-fig img{border-radius:var(--radius);border:1px solid var(--rule)} @media(max-width:900px){.story-side{grid-template-columns:1fr}} @media(prefers-reduced-motion:reduce){ .hero h1,.hero .eyebrow,.hero-lede,.hero-stats,.hero::after{animation:none!important} .hero .mark::before{animation:none;transform:scaleX(1)} .hero .mark{animation:none;color:var(--ink)} .js .reveal,.js .reveal-item{opacity:1!important;transform:none!important} .card.has-thumb:hover .card-thumb img{transform:none} } /* ===================== glossary ===================== */ .glossary{border-top:1px solid var(--rule)} .term{border-bottom:1px solid var(--rule);padding:1.35rem 0} .term h2{font-size:clamp(1.08rem,1rem + .4vw,1.28rem);margin:0 0 .5rem;scroll-margin-top:92px} .term h2::before{display:none} .term p{margin:0;color:var(--ink-2);max-width:70ch} .term a{color:var(--green);text-decoration:underline;text-decoration-color:rgba(11,107,78,.32); text-underline-offset:3px} .term:target h2{color:var(--green)} .term:target{background:var(--sand);border-radius:var(--radius);padding-inline:1rem} #masthead-sentinel{position:absolute;top:0;left:0;width:1px;height:1px} /* ===================== reading polish ===================== */ /* Progress bar. Scroll-driven CSS where the browser supports it — no JS, no scroll listener. Browsers without it simply never see the bar. */ .progress{ position:fixed;top:0;left:0;height:3px;width:100%;transform-origin:0 50%;transform:scaleX(0); background:linear-gradient(90deg,var(--green),var(--lime));z-index:90;pointer-events:none } body:not(:has(.article-grid)) .progress{display:none} @supports (animation-timeline:scroll()){ .progress{animation:grow linear both;animation-timeline:scroll(root block)} @keyframes grow{to{transform:scaleX(1)}} } @supports not (animation-timeline:scroll()){.progress{display:none}} /* contents list follows you down the page */ .toc a.here{color:var(--green);font-weight:600} .toc li:has(a.here)::before{color:var(--ink);font-weight:700} /* back to top, once you are past the header */ .to-top{ position:fixed;right:1.15rem;bottom:1.15rem;z-index:85; width:44px;height:44px;display:grid;place-items:center; border:1px solid var(--rule);border-radius:50%;background:var(--surface); color:var(--ink);text-decoration:none;box-shadow:var(--shadow-2); opacity:0;visibility:hidden;transform:translateY(10px); transition:opacity .25s ease,transform .25s cubic-bezier(.2,.7,.3,1),visibility .25s } .scrolled .to-top{opacity:1;visibility:visible;transform:none} .to-top:hover{border-color:var(--green);color:var(--green)} .to-top svg{width:16px;height:16px} @media print{.to-top,.progress{display:none}} /* typography */ .prose p{text-wrap:pretty} .prose > p:first-of-type{font-size:1.06em;color:var(--ink-2)} .prose ul{padding-left:1.4rem} .prose ul li::marker{content:"▸ ";color:var(--green);font-size:.85em} .prose ol{counter-reset:li;padding-left:1.75rem} .prose ol > li{counter-increment:li;list-style:none;position:relative} .prose ol > li::before{ content:counter(li);position:absolute;left:-1.75rem;top:.08em;width:1.4rem; text-align:right;font-family:var(--mono);font-size:.72em;font-weight:600;color:var(--green) } .prose blockquote{ font-family:var(--display);font-size:1.12em;font-weight:500;line-height:1.42; letter-spacing:-.012em;color:var(--ink);border-left-width:4px;padding-left:1.5rem } .prose h2 + p,.prose h3 + p{margin-top:0} .prose hr{border-top:1px solid var(--rule);margin:2.4rem 0} /* ===================== brand lockup ===================== */ .brand-mark{ width:34px;height:34px;border-radius:0;background:none;color:var(--green); display:block;flex:none;overflow:visible; transition:transform .3s cubic-bezier(.2,.7,.3,1),color .3s ease } .brand-mark svg{width:100%;height:100%;display:block} .brand:hover .brand-mark{transform:translateY(-2px) rotate(-3deg);color:var(--green-2)} /* the hyphen in the name, drawn rather than typed — it ties the wordmark to the mark and is the one letterform detail that is genuinely ours */ .brand-name .hy{ display:inline-block;width:.62em;height:.16em;margin:0 .12em .22em; background:var(--green);border-radius:1px;vertical-align:middle; transition:width .28s cubic-bezier(.2,.7,.3,1),background-color .28s ease } .brand:hover .brand-name .hy{width:.86em;background:var(--green-2)} .foot .brand-name .hy{background:var(--lime)} .foot .brand-mark{color:#0F7A59} @media(prefers-reduced-motion:reduce){ .brand:hover .brand-mark{transform:none} .brand:hover .brand-name .hy{width:.62em} }