/* =================================================================== 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:#2B3833; /* secondary text — dark, not grey */ --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-2);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-2);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-2);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-2);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:#7E8B84} .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} /* Pin every child to the left edge of that column. Explicit left/right rather than a margin-inline shorthand: a narrow element (the lede caps at 60ch) with auto margins centres itself, which is exactly the bug this replaced. */ .page-head .head-inner > *{margin-left:0;margin-right:auto;text-align:left} .page-head h1{max-width:32ch} .page-head .lede{ font-size:clamp(1.03rem,.96rem + .4vw,1.19rem);color:var(--ink-2);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-2);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-2);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-2);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-2);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 ===================== */ /* 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); transform:translateY(-3px);box-shadow:0 10px 22px -10px rgba(10,18,15,.45) } .to-top:active{transform:translateY(-1px)} .to-top:focus-visible{outline:2px solid var(--green);outline-offset:3px} /* clear of the share row and iOS home indicator on small screens */ @media(max-width:700px){ .to-top{right:.85rem;bottom:calc(.85rem + env(safe-area-inset-bottom,0px));width:42px;height:42px} } @media(prefers-reduced-motion:reduce){.to-top{transition:opacity .01ms}} .to-top svg{width:16px;height:16px} @media print{.to-top,.scrollrail{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} } /* ===================== left scroll rail ===================== */ /* A thin track down the left edge whose fill tracks how far through the page you are. Where the browser supports scroll-driven animation this costs no JavaScript at all; elsewhere a passive listener coalesced into one frame. */ .scrollrail{ position:fixed;left:0;top:0;width:3px;height:100vh;z-index:88; background:var(--rule-2);pointer-events:none; opacity:0;transition:opacity .3s ease } .scrolled .scrollrail{opacity:1} .scrollrail i{ display:block;width:100%;height:100%;transform-origin:0 0;transform:scaleY(0); background:linear-gradient(180deg,var(--lime),var(--green) 55%,var(--green-2)); border-radius:0 2px 2px 0;will-change:transform } @supports (animation-timeline:scroll()){ .scrollrail i{animation:railgrow linear both;animation-timeline:scroll(root block)} @keyframes railgrow{from{transform:scaleY(0)}to{transform:scaleY(1)}} } @media(max-width:640px){.scrollrail{width:2px}} @media(prefers-reduced-motion:reduce){.scrollrail{transition:none}} @media print{.scrollrail{display:none}} /* ===================== masthead: utility strip ===================== */ .topstrip{background:var(--ink);color:#93A79D;border-bottom:1px solid rgba(255,255,255,.06)} .topstrip > .wrap{ display:flex;align-items:center;justify-content:space-between;gap:1rem; min-height:34px;font-family:var(--mono);font-size:.665rem;letter-spacing:.055em } .topstrip p{margin:0;color:#93A79D} .topstrip a{color:#C4D3CB;text-decoration:none;border-bottom:1px solid transparent;transition:color .2s,border-color .2s} .topstrip a:hover{color:var(--lime);border-bottom-color:var(--lime)} .strip-nav{display:flex;gap:1.15rem} @media(max-width:760px){ .topstrip p{display:none} .topstrip > .wrap{justify-content:center;min-height:30px} .strip-nav{gap:1.4rem} } /* ===================== topics dropdown ===================== */ .drop{position:relative} .drop summary{ list-style:none;cursor:pointer;position:relative; font-family:var(--display);font-size:.895rem;font-weight:500;color:var(--ink-2); padding:.48rem 1.35rem .48rem .68rem;border-radius:var(--radius-sm); transition:color .2s,background-color .2s,transform .2s cubic-bezier(.2,.7,.3,1) } .drop summary::-webkit-details-marker{display:none} .drop summary::after{ content:"";position:absolute;right:.6rem;top:50%;width:6px;height:6px; border-right:1.8px solid currentColor;border-bottom:1.8px solid currentColor; transform:translateY(-70%) rotate(45deg);transition:transform .25s cubic-bezier(.2,.7,.3,1) } .drop summary:hover{color:var(--ink);background:var(--sand);transform:translateY(-1px)} .drop[open] summary{color:var(--ink);background:var(--sand)} .drop[open] summary::after{transform:translateY(-20%) rotate(-135deg)} .drop-panel{ position:absolute;left:50%;top:calc(100% + .6rem);transform:translateX(-50%); width:min(94vw,560px);background:var(--surface);border:1px solid var(--rule); border-radius:var(--radius);box-shadow:0 24px 60px -24px rgba(10,18,15,.45); padding:.75rem;z-index:60; animation:dropIn .2s cubic-bezier(.2,.7,.3,1) both } @keyframes dropIn{from{opacity:0;transform:translateX(-50%) translateY(-8px)}to{opacity:1;transform:translateX(-50%)}} .drop-panel::before{ content:"";position:absolute;top:-6px;left:50%;width:11px;height:11px; margin-left:-5.5px;transform:rotate(45deg); background:var(--surface);border-left:1px solid var(--rule);border-top:1px solid var(--rule) } .drop-grid{display:grid;grid-template-columns:1fr 1fr;gap:2px} .drop-item{ display:block;padding:.62rem .7rem;border-radius:var(--radius-sm);text-decoration:none; transition:background-color .18s ease,transform .18s cubic-bezier(.2,.7,.3,1) } .drop-item b{ display:block;font-family:var(--display);font-size:.855rem;font-weight:600; color:var(--ink);letter-spacing:-.01em } .drop-item span{display:block;margin-top:.1rem;font-size:.735rem;color:var(--ink-3);line-height:1.35} .drop-item:hover{background:var(--green-tint);transform:translateX(2px)} .drop-item[aria-current="page"]{background:var(--green-tint)} .drop-item[aria-current="page"] b{color:var(--green)} .drop-all{ display:block;margin-top:.35rem;padding:.6rem .7rem;border-top:1px solid var(--rule); font-family:var(--mono);font-size:.665rem;letter-spacing:.08em;text-transform:uppercase; color:var(--green);text-decoration:none;transition:color .18s,padding-left .18s } .drop-all:hover{color:var(--green-2);padding-left:1rem} /* search icon */ .nav-icon{display:grid;place-items:center;width:36px;height:36px;padding:0!important} .nav-icon svg{width:17px;height:17px} .nav-icon::after{display:none!important} .nav-icon:hover{background:var(--sand);color:var(--green)} @media(max-width:1080px){.drop-panel{width:min(94vw,460px)}} @media(prefers-reduced-motion:reduce){ .drop-panel{animation:none} .drop summary,.drop summary::after,.drop-item{transition:none} } /* ===================== footer ===================== */ .foot{position:relative;overflow:hidden} /* a lit edge along the top, the same gradient as the scroll rail */ .foot-edge{ position:absolute;top:0;left:0;right:0;height:2px; background:linear-gradient(90deg,var(--green) 0%,var(--lime) 32%,var(--green-2) 68%,var(--lime) 100%); background-size:200% 100%;animation:edgeshift 14s linear infinite } @keyframes edgeshift{to{background-position:200% 0}} /* slow drifting glow, echoing the hero */ .foot-glow{ position:absolute;left:-8%;top:-30%;width:52%;height:180%;pointer-events:none; background:radial-gradient(closest-side,rgba(15,122,89,.30),transparent 72%); animation:footdrift 26s ease-in-out infinite alternate } @keyframes footdrift{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(22%,6%,0) scale(1.18)}} /* oversized mark, barely there */ .foot-watermark{ position:absolute;right:-3%;bottom:-18%;width:min(330px,34vw);height:auto; fill:#FFFFFF;opacity:.028;pointer-events:none;transform:rotate(-8deg) } .foot-watermark .wm-lines rect{fill:#FFFFFF} .foot .wrap{position:relative;z-index:1} /* column headings get a small lime tick */ .foot h2{position:relative;padding-left:.85rem} .foot h2::before{ content:"";position:absolute;left:0;top:.32em;width:4px;height:.78em; background:var(--lime);border-radius:2px;transform:scaleY(0);transform-origin:top; transition:transform .4s cubic-bezier(.2,.7,.3,1) } .foot-col.in h2::before{transform:scaleY(1)} html:not(.js) .foot h2::before{transform:scaleY(1)} /* links slide and light up */ .foot li a{ position:relative;display:inline-block; transition:color .2s ease,transform .22s cubic-bezier(.2,.7,.3,1) } .foot li a::after{ content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;background:var(--lime); transform:scaleX(0);transform-origin:left;transition:transform .28s cubic-bezier(.2,.7,.3,1) } .foot li a:hover{color:#EAF3EE;transform:translateX(4px)} .foot li a:hover::after{transform:scaleX(1)} /* staggered entrance for the columns */ .js .foot-col{opacity:0;transform:translateY(14px)} .js .foot-col.in{opacity:1;transform:none;transition:opacity .55s ease,transform .55s cubic-bezier(.2,.7,.3,1)} /* the mark in the footer reacts like the header one */ .foot .brand:hover .bm-hl{transform:scaleX(1.06)} /* bottom bar */ .foot-base a{position:relative;transition:color .2s ease} .foot-base a:hover{color:var(--lime)} @media(prefers-reduced-motion:reduce){ .foot-edge,.foot-glow{animation:none} .js .foot-col{opacity:1;transform:none} .foot h2::before{transform:scaleY(1)} .foot li a:hover{transform:none} } @media print{.foot-edge,.foot-glow,.foot-watermark{display:none}} /* ===================== homepage slider ===================== */ /* A scroll-snap track. Without JavaScript it is still a scrollable row of readable cards; JS only adds the arrows, dots and autoplay. */ .slider-band{background:var(--sand);border-bottom:1px solid var(--rule)} .slider-head{display:flex;align-items:flex-end;justify-content:space-between;gap:1.5rem} .slider-ctrl{display:none;gap:.5rem;flex:none} html.js .slider-ctrl{display:flex} .sl-btn{ width:42px;height:42px;display:grid;place-items:center;cursor:pointer; border:1px solid var(--rule);border-radius:50%;background:var(--surface);color:var(--ink); transition:border-color .2s,color .2s,transform .2s cubic-bezier(.2,.7,.3,1),box-shadow .2s } .sl-btn svg{width:17px;height:17px} .sl-btn:hover{border-color:var(--green);color:var(--green);transform:translateY(-2px); box-shadow:0 8px 18px -10px rgba(10,18,15,.4)} .sl-btn:disabled{opacity:.35;cursor:default;transform:none;box-shadow:none} .sl-btn:focus-visible{outline:2px solid var(--green);outline-offset:3px} .slider{margin-top:1.6rem;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory; scrollbar-width:none;-webkit-overflow-scrolling:touch;scroll-behavior:smooth} .slider::-webkit-scrollbar{display:none} .slider-track{display:flex;gap:1rem;list-style:none;margin:0;padding:.2rem .2rem 1.1rem} .slide{ scroll-snap-align:start;flex:0 0 clamp(266px,32%,380px); background:var(--surface);border:1px solid var(--rule);border-radius:var(--radius); padding:1.5rem 1.4rem 1.35rem;display:flex;flex-direction:column; transition:border-color .25s ease,transform .25s cubic-bezier(.2,.7,.3,1),box-shadow .25s ease } .slide:hover{border-color:var(--green);transform:translateY(-3px);box-shadow:var(--shadow-2)} .slide-num{ font-family:var(--mono);font-size:.665rem;letter-spacing:.14em;color:var(--green); display:block;margin-bottom:.7rem } .slide h3{ font-size:clamp(1.02rem,.96rem + .35vw,1.16rem);line-height:1.3;letter-spacing:-.015em; margin:0 0 .55rem;color:var(--ink) } .slide h3::before{display:none} .slide p{margin:0 0 1.1rem;font-size:.9rem;line-height:1.6;color:var(--ink-2)} .slide a{margin-top:auto} .slider-dots{display:none;gap:.4rem;justify-content:center;margin-top:.2rem} html.js .slider-dots{display:flex} .slider-dots i{ width:7px;height:7px;border-radius:50%;background:var(--rule);display:block; transition:background-color .25s ease,width .25s cubic-bezier(.2,.7,.3,1) } .slider-dots i.on{background:var(--green);width:22px;border-radius:4px} @media(max-width:640px){ .slide{flex:0 0 84%} .slider-head{flex-direction:column;align-items:flex-start;gap:.9rem} } @media(prefers-reduced-motion:reduce){ .slider{scroll-behavior:auto} .slide:hover,.sl-btn:hover{transform:none} } /* ===================== Q&A accordions ===================== */ .qa-set{border-top:1px solid var(--rule);margin:1.4rem 0 2rem} .qa{border-bottom:1px solid var(--rule)} .qa summary{ list-style:none;cursor:pointer;position:relative; padding:1rem 2.4rem 1rem 0; font-family:var(--display);font-weight:600;font-size:1rem;line-height:1.42; color:var(--ink);transition:color .2s ease } .qa summary::-webkit-details-marker{display:none} .qa summary:hover{color:var(--green)} .qa summary:focus-visible{outline:2px solid var(--green);outline-offset:2px;border-radius:3px} .qa summary::after{ content:"";position:absolute;right:.55rem;top:1.42rem;width:9px;height:9px; border-right:2px solid var(--green);border-bottom:2px solid var(--green); transform:rotate(45deg);transform-origin:center; transition:transform .28s cubic-bezier(.2,.7,.3,1) } .qa[open] summary::after{transform:rotate(-135deg)} .qa[open] summary{color:var(--green)} .qa-body{overflow:hidden;animation:qaOpen .26s cubic-bezier(.2,.7,.3,1)} @keyframes qaOpen{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}} .qa-body p{margin:0 0 1.05rem;color:var(--ink-2)} @media(prefers-reduced-motion:reduce){ .qa-body{animation:none} .qa summary::after{transition:none} } @media print{.qa-body{display:block!important}} /* ===================== rate calculator ===================== */ .calc{ border:1px solid var(--rule);border-radius:var(--radius);background:var(--sand); padding:1.6rem 1.5rem 1.35rem;margin:2rem 0 2.4rem } .calc-eyebrow{ font-family:var(--mono);font-size:.645rem;letter-spacing:.14em;text-transform:uppercase; color:var(--green);margin:0 0 .35rem } .calc-h{font-size:clamp(1.15rem,1.05rem + .5vw,1.4rem);margin:0 0 .5rem} .calc-h::before{display:none} .calc-intro{margin:0 0 1.25rem;font-size:.92rem;color:var(--ink-2);max-width:62ch} .calc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.85rem} .calc-grid label{ display:flex;flex-direction:column;gap:.35rem; font-family:var(--mono);font-size:.635rem;letter-spacing:.09em;text-transform:uppercase; color:var(--ink-3) } .calc-in{ display:flex;align-items:center;gap:.3rem;background:var(--surface); border:1px solid var(--rule);border-radius:var(--radius-sm);padding:.1rem .6rem; transition:border-color .2s ease,box-shadow .2s ease } .calc-in:focus-within{border-color:var(--green);box-shadow:0 0 0 3px rgba(11,107,78,.12)} .calc-in b{font-family:var(--mono);font-size:.85rem;color:var(--ink-3)} .calc-in input{ width:100%;border:0;background:none;padding:.55rem 0; font-family:var(--display);font-size:1.02rem;font-weight:600;color:var(--ink); -moz-appearance:textfield } .calc-in input:focus{outline:none} .calc-in input::-webkit-outer-spin-button,.calc-in input::-webkit-inner-spin-button{ -webkit-appearance:none;margin:0 } .calc-out{ display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:1px; background:var(--rule);border:1px solid var(--rule);border-radius:var(--radius); overflow:hidden;margin-top:1.15rem } .calc-out > div{background:var(--surface);padding:.95rem 1rem} .calc-out span{ display:block;font-family:var(--mono);font-size:.6rem;letter-spacing:.11em; text-transform:uppercase;color:var(--ink-3);margin-bottom:.3rem } .calc-out b{ font-family:var(--display);font-size:clamp(1.3rem,1.1rem + .8vw,1.65rem);font-weight:700; color:var(--green);letter-spacing:-.025em;display:block;transition:color .2s ease } .calc-out b.bump{animation:bump .35s cubic-bezier(.2,.7,.3,1)} @keyframes bump{0%{transform:scale(1)}45%{transform:scale(1.07)}100%{transform:scale(1)}} .calc-note{margin:.95rem 0 0;font-size:.79rem;line-height:1.55;color:var(--ink-3)} html:not(.js) .calc{display:none} @media(prefers-reduced-motion:reduce){.calc-out b.bump{animation:none}} @media print{.calc{display:none}}