@import "/design/tokens.css"; /* canonical iterate-design tokens (single source) */ @font-face{font-family:"Geist";font-style:normal;font-weight:100 900;font-display:swap;src:url("/assets/fonts/Geist-Variable.woff2") format("woff2")} @font-face{font-family:"Geist Mono";font-style:normal;font-weight:100 900;font-display:swap;src:url("/assets/fonts/GeistMono-Variable.woff2") format("woff2")} /* ============================================================ iterate.nz - consumes the shared iterate-design tokens. The site is the LIGHT theme (); the token values under [data-theme="light"] match the site's previous palette. Components below reference those vars; dark-hero sections use the dark-* primitives directly. ============================================================ */ *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} body{font-family:var(--sans);background:var(--paper);color:var(--ink);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden} .wrap{max-width:var(--maxw);margin:0 auto;padding:0 clamp(20px,5vw,44px)} a{color:inherit;text-decoration:none} section{position:relative} .skip{position:absolute;left:-9999px}.skip:focus{left:12px;top:12px;z-index:99;background:var(--primary);color:#fff;padding:10px 14px;border-radius:10px} /* ---------- type ---------- */ h1,h2,h3{font-weight:600;letter-spacing:-.02em;line-height:1.1} h1{font-size:clamp(2.4rem,5.6vw,4.4rem);line-height:1.06} h2{font-size:clamp(2rem,4vw,3rem)} h3{font-size:1.3rem;letter-spacing:-.01em} .eyebrow{font-family:var(--mono);font-size:.8rem;font-weight:500;letter-spacing:.02em;color:var(--primary);display:inline-flex;align-items:center;gap:9px} .eyebrow .dot{width:7px;height:7px;border-radius:50%;background:var(--accent);display:inline-block;flex:none} .lead{font-size:clamp(1.075rem,1.6vw,1.25rem);color:var(--muted);max-width:58ch} .note{color:var(--muted);margin-top:.7rem;max-width:60ch} em{font-style:italic;color:var(--accent-deep)} /* ---------- buttons ---------- */ .btn{font-family:inherit;font-size:.95rem;font-weight:600;padding:13px 22px;border-radius:12px;border:1px solid transparent;display:inline-flex;align-items:center;gap:8px;cursor:pointer;transition:transform .2s ease,background .2s ease,box-shadow .2s ease,border-color .2s,color .2s} .btn .arr{transition:transform .2s} .btn:hover .arr{transform:translateX(4px)} .btn--primary{background:var(--primary);color:#fff} .btn--primary:hover{background:var(--primary-600);color:#fff;transform:translateY(-2px);box-shadow:0 16px 34px -16px rgba(83,51,98,.7)} .btn--accent{background:var(--accent);color:#2a1c10} .btn--accent:hover{color:#2a1c10;transform:translateY(-2px);box-shadow:0 16px 34px -14px rgba(230,161,92,.7)} .btn--ghost{background:transparent;color:var(--ink);border-color:var(--line)} .btn--ghost:hover{border-color:var(--primary);color:var(--primary);transform:translateY(-2px)} .btn--ghost-d{background:transparent;color:var(--paper);border-color:rgba(246,242,238,.26)} .btn--ghost-d:hover{color:var(--paper);border-color:var(--paper);transform:translateY(-2px)} .btn--sm{padding:9px 16px;font-size:.875rem} .btn-row{display:flex;gap:13px;flex-wrap:wrap;margin-top:1.7rem} /* ---------- nav ---------- */ .nav{position:fixed;top:0;left:0;right:0;z-index:50;transition:background .3s,box-shadow .3s} .nav-in{display:flex;align-items:center;justify-content:space-between;height:70px} .brand{display:flex;align-items:center;gap:.34em;font-weight:440;font-size:1.2rem;color:var(--ink)} .brandmark{height:1.5em;width:.96em} .brandmark .a{stroke:var(--accent)} .brandmark .b{stroke:var(--primary)} .nav-links{display:flex;align-items:center;gap:28px;font-size:.95rem;font-weight:500} .nav-links a:not(.btn){color:var(--muted)} .nav-links a:not(.btn):hover{color:var(--ink)} .nav.scrolled{background:rgba(246,242,238,.82);backdrop-filter:blur(12px);box-shadow:0 1px 0 var(--line)} /* dark-hero pages: light nav until scrolled */ .dark-hero .nav:not(.scrolled) .brand{color:var(--paper)} .dark-hero .nav:not(.scrolled) .brandmark .b{stroke:var(--paper)} .dark-hero .nav:not(.scrolled) .nav-links a:not(.btn){color:rgba(246,242,238,.72)} .dark-hero .nav:not(.scrolled) .nav-links a:not(.btn):hover{color:var(--paper)} .nav-toggle{display:none} /* Services mega-menu (desktop) */ .nav-drop{position:relative;display:flex;align-items:center} .nav-drop-t{display:inline-flex;align-items:center;gap:5px} .caret{font-size:.6em;opacity:.65;transition:transform .18s} .nav-drop:hover .caret,.nav-drop:focus-within .caret{transform:rotate(180deg)} .mega{position:absolute;top:100%;left:-24px;transform:translateY(8px);margin-top:14px; display:grid;grid-template-columns:repeat(3,minmax(172px,1fr));gap:10px 26px; background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:22px 26px; box-shadow:0 26px 54px -26px rgba(36,26,40,.55); opacity:0;visibility:hidden;pointer-events:none;transition:opacity .18s ease,transform .18s ease;z-index:60} .mega::before{content:"";position:absolute;top:-16px;left:0;right:0;height:16px} .nav-drop:hover .mega,.nav-drop:focus-within .mega{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0)} .mega-col{display:flex;flex-direction:column;gap:9px} .mega a{color:var(--muted) !important;font-size:.88rem;font-weight:500;white-space:nowrap} .mega a:hover{color:var(--primary) !important} .mega .mega-head{color:var(--ink) !important;font-weight:600;font-size:.95rem;margin-bottom:2px} .mega-note{color:var(--muted);font-size:.8rem;line-height:1.4;max-width:16ch;white-space:normal} @media(max-width:720px){ .nav-toggle{display:flex;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:8px;color:var(--ink)} .dark-hero .nav:not(.scrolled) .nav-toggle{color:var(--paper)} .nav-toggle span{width:22px;height:2px;background:currentColor;border-radius:2px} .nav-links{position:absolute;top:70px;left:0;right:0;background:var(--paper);border-top:1px solid var(--line);box-shadow:0 16px 30px -18px rgba(36,26,40,.45);flex-direction:column;align-items:stretch;gap:0;max-height:0;overflow:hidden;transition:max-height .3s ease} .nav-links.open{max-height:70vh;padding:6px 0} .nav-links a:not(.btn),.dark-hero .nav:not(.scrolled) .nav-links a:not(.btn){padding:13px clamp(20px,5vw,44px);color:var(--ink)} .nav-links .btn{margin:10px clamp(20px,5vw,44px) 4px;justify-content:center} /* mega -> inline expanded list on mobile */ .nav-links.open{max-height:85vh;overflow-y:auto} .nav-drop{display:block} .nav-drop-t .caret{display:none} .mega{position:static;transform:none;margin:0;opacity:1;visibility:visible;pointer-events:auto; display:block;background:transparent;border:none;box-shadow:none;padding:0 0 6px} .mega::before{display:none} .mega-col{gap:0} .mega .mega-head{padding:11px clamp(20px,5vw,44px) 3px !important;color:var(--ink) !important} .mega a:not(.mega-head){padding:8px clamp(28px,6vw,52px) !important;font-size:.9rem} .mega-note{padding:0 clamp(20px,5vw,44px) 8px;max-width:none} } /* ---------- shared dark panel ---------- */ .dark,.stage-soft{background:var(--dark);color:var(--paper)} .dark .eyebrow,.stage-soft .eyebrow{color:var(--accent)} .dark .lead,.stage-soft .lead{color:rgba(246,242,238,.76)} .dark .note,.stage-soft .note{color:rgba(246,242,238,.62)} .dark h1,.dark h2,.dark h3,.stage-soft h2{color:var(--paper)} .dark strong{color:var(--paper)} .orb{position:absolute;border-radius:50%;filter:blur(64px);will-change:transform;pointer-events:none} .orb.plum{background:radial-gradient(circle at 40% 40%,#7a4f93,transparent 70%)} .orb.apri{background:radial-gradient(circle at 50% 50%,#E6A15C,transparent 68%)} /* ---------- hero (homepage, dark) ---------- */ .hero{min-height:100vh;display:flex;align-items:center;padding:120px 0 90px;overflow:hidden;background:var(--dark-3);color:var(--paper)} .hero-bg{position:absolute;inset:0;z-index:0} .hero-canvas{position:absolute;inset:0;z-index:1;pointer-events:none} .hero::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(95deg,var(--dark-3) 15%,rgba(26,16,32,.45) 45%,transparent 66%)} .hero .orb.o1{width:620px;height:620px;top:-140px;right:-90px;opacity:.55} .hero .orb.o2{width:480px;height:480px;bottom:-160px;left:-80px;opacity:.4} .loop{position:absolute;top:50%;right:5%;width:min(46vw,560px);aspect-ratio:1;transform:translateY(-50%);opacity:.5;will-change:transform;z-index:1} .loop svg{width:100%;height:100%;transform-origin:50% 50%;animation:spin 26s linear infinite} .loop .mk-arc{stroke-dasharray:50;stroke-dashoffset:50;animation:draw 1.8s cubic-bezier(.4,0,.2,1) .25s forwards} .loop .mk-head{opacity:0;animation:fadein .5s ease 1.5s forwards} @keyframes draw{to{stroke-dashoffset:0}} @keyframes fadein{to{opacity:1}} @keyframes spin{to{transform:rotate(360deg)}} .hero-content{position:relative;z-index:2;max-width:840px} .client-cta{display:inline-flex;align-items:center;gap:.6rem;padding:.35rem .85rem .35rem .35rem;border-radius:999px;background:rgba(230,161,92,.10);border:1px solid rgba(230,161,92,.35);color:var(--paper);font-size:.85rem;text-decoration:none;margin-bottom:1.2rem;transition:.15s} .client-cta:hover{background:rgba(230,161,92,.22);border-color:var(--accent);color:var(--paper)} .client-cta .pill{background:var(--accent);color:#2a1c10;border-radius:999px;padding:.2rem .55rem;font-size:.72rem;font-family:var(--mono);font-weight:600;letter-spacing:.02em} .client-cta .arr{color:var(--accent)} .rise.d0{animation-delay:.05s} .hero .eyebrow{color:var(--accent)} .hero h1{margin:18px 0 0;color:var(--paper)} .hero .lead{margin-top:22px;font-size:clamp(1.1rem,1.7vw,1.3rem);color:rgba(246,242,238,.8)} .hero em{font-style:italic;background:linear-gradient(100deg,#E6A15C 18%,#fff2dd 50%,#E6A15C 82%);background-size:220% auto;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shimmer 4.5s linear infinite} @keyframes shimmer{to{background-position:-220% center}} .ticker{margin-top:50px;display:flex;gap:26px;flex-wrap:wrap;font-family:var(--mono);font-size:.78rem;color:rgba(246,242,238,.6);align-items:center} .ticker b{color:var(--accent)} .ticker .sep{color:var(--accent)} /* ---------- service hero (light) ---------- */ .svc-hero{padding-top:clamp(140px,16vh,200px);overflow:hidden} .svc-hero .orb{width:520px;height:520px;top:-160px;right:-120px;opacity:.16} /* ---------- sections ---------- */ .section{padding:clamp(80px,11vw,140px) 0} .section.surface{background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line)} .shead{max-width:760px;margin-bottom:clamp(40px,6vw,60px)} .shead h1,.shead h2{margin-top:.35rem} /* ---------- cards grid ---------- */ .cards,.card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px} .cards.c4,.card-grid.c4{grid-template-columns:repeat(4,1fr)} @media(max-width:980px){.cards.c4,.card-grid.c4{grid-template-columns:repeat(2,1fr)}} @media(max-width:860px){.cards,.card-grid{grid-template-columns:1fr}} .card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:30px 28px;transition:transform .35s ease,box-shadow .35s ease,border-color .35s} .card:hover{transform:translateY(-6px);box-shadow:0 26px 50px -30px rgba(36,26,40,.4);border-color:#dccfdd} .card .cn,.card .card-no{font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--accent-deep);display:block} .card h3{margin:14px 0 10px} .card h3 a:hover{color:var(--primary)} .card p{color:var(--muted);font-size:1rem} .card .meta,.card .card-meta{display:block;margin-top:18px;font-family:var(--mono);font-size:.7rem;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)} .card .go{margin-top:18px;font-weight:600;color:var(--primary);font-size:.92rem;display:inline-flex;gap:7px;align-items:center} .card:hover .go .arr{transform:translateX(4px)} /* whole-card click target for cards that link somewhere */ .card:has(h3 a){position:relative;cursor:pointer} .card:has(h3 a) h3 a{text-decoration:none} .card:has(h3 a) h3 a::after{content:"";position:absolute;inset:0;z-index:2} .card:has(h3 a):hover h3 a{color:var(--primary)} /* ---------- facts / tool-list (label + desc) ---------- */ .facts,.tool-list{list-style:none;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--surface)} .facts li,.tool-list li{padding:20px 24px;border-bottom:1px solid var(--line);display:grid;grid-template-columns:240px 1fr;gap:16px;align-items:baseline;transition:background .25s} .facts li:last-child,.tool-list li:last-child{border-bottom:0} .facts li:hover,.tool-list li:hover{background:#FBF8F5} @media(max-width:680px){.facts li,.tool-list li{grid-template-columns:1fr;gap:3px}} .facts b,.tool-list b{font-weight:600} .facts span,.tool-list span{color:var(--muted)} /* ---------- steps + drawing line ---------- */ .steps{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:10px} @media(max-width:860px){.steps{grid-template-columns:1fr}} .track{position:absolute;top:34px;left:8%;right:8%;height:2px;background:var(--line);z-index:0} .track .fill{position:absolute;inset:0;background:linear-gradient(90deg,var(--accent),var(--primary));transform:scaleX(0);transform-origin:left;transition:transform 1.4s cubic-bezier(.5,.1,.2,1)} .track.in .fill{transform:scaleX(1)} @media(max-width:860px){.track{display:none}} .step{position:relative;z-index:1} .step .num,.step .step-no{width:54px;height:54px;border-radius:50%;background:var(--surface);border:2px solid var(--line);display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-weight:500;color:var(--primary);transition:border-color .4s,background .4s,color .4s,transform .4s} .step.in .num,.step.in .step-no{border-color:var(--accent);background:var(--accent);color:#2a1c10;transform:scale(1.06)} .step h3{margin:18px 0 8px} .step p{color:var(--muted);font-size:1rem} .step b{color:var(--ink)} /* ---------- split (2-col dark) ---------- */ .split,.about-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(30px,6vw,72px);align-items:start;position:relative;z-index:2} @media(max-width:880px){.split,.about-grid{grid-template-columns:1fr}} .split h2{max-width:18ch} .split p,.about-grid p{margin-top:1.05rem;max-width:54ch} .trust,.trust-list{list-style:none;display:flex;flex-direction:column} .trust li,.trust-list li{display:flex;gap:13px;align-items:baseline;padding:14px 0;border-bottom:1px solid rgba(246,242,238,.12);font-weight:500;color:var(--paper)} .trust li:last-child,.trust-list li:last-child{border-bottom:0} .trust .tick,.trust-list .mono{color:var(--accent);font-family:var(--mono)} /* ---------- stats ---------- */ .stats{background:var(--dark-2);color:var(--paper);overflow:hidden} .stat-grid{position:relative;z-index:2;display:grid;grid-template-columns:repeat(3,1fr);gap:30px} @media(max-width:780px){.stat-grid{grid-template-columns:1fr;gap:34px}} .stat .n{font-size:clamp(2.6rem,5vw,3.6rem);font-weight:600;letter-spacing:-.02em;color:var(--accent);line-height:1} .stat .l{margin-top:10px;color:rgba(246,242,238,.74);font-size:.98rem;max-width:24ch} /* ---------- band (dark statement) ---------- */ .band{overflow:hidden} .band .orb.o4{width:600px;height:600px;top:-180px;right:-140px;opacity:.4} .band h2{font-size:clamp(2rem,4vw,3.1rem);color:var(--paper);max-width:24ch;position:relative;z-index:2} .band .lead{margin-top:20px;position:relative;z-index:2} /* ---------- contact ---------- */ .contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,56px);align-items:start} @media(max-width:820px){.contact-grid{grid-template-columns:1fr}} .mail{display:inline-block;margin-top:1.3rem;font-size:1.3rem;font-weight:600;color:var(--primary)} .mail:hover{color:var(--primary-600)} .powered{margin-top:1.3rem;font-family:var(--mono);font-size:.78rem;color:var(--muted)} form{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:clamp(22px,3vw,32px)} .field{margin-bottom:16px} .field label{display:block;font-size:.82rem;font-weight:500;margin-bottom:6px} .field input,.field select,.field textarea{width:100%;font-family:inherit;font-size:1rem;color:var(--ink);background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:11px 13px;transition:border-color .15s,box-shadow .15s} .field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(83,51,98,.16)} .field textarea{min-height:120px;resize:vertical} .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} .formstatus{margin-top:14px;font-size:.92rem;color:var(--muted)} .formstatus.ok{color:var(--primary-600);font-weight:500} .formstatus.err{color:#b3402c;font-weight:500} .fnote{margin-top:10px;font-size:.8rem;color:var(--muted)} /* ---------- footer ---------- */ .foot{border-top:1px solid var(--line);padding:42px 0} .foot-in{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:18px} .foot-nav{display:flex;gap:22px;flex-wrap:wrap;font-size:.92rem;color:var(--muted)} .foot-nav a:hover{color:var(--ink)} .foot-meta{margin-top:18px;font-size:.82rem;color:var(--muted);display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px} .foot-meta .mono{font-family:var(--mono)} /* ---------- animations ---------- */ .rise{opacity:0;transform:translateY(22px);animation:rise .85s cubic-bezier(.2,.7,.2,1) forwards} .d1{animation-delay:.05s}.d2{animation-delay:.16s}.d3{animation-delay:.3s}.d4{animation-delay:.44s}.d5{animation-delay:.58s} @keyframes rise{to{opacity:1;transform:none}} .reveal,.rv{opacity:0;transform:translateY(28px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)} .reveal.in,.rv.in{opacity:1;transform:none} .reveal.s1,.rv.d1{transition-delay:.08s}.reveal.s2,.rv.d2{transition-delay:.18s}.reveal.s3,.rv.d3{transition-delay:.28s}.reveal.s4,.rv.d4{transition-delay:.38s}.reveal.s5,.rv.d5{transition-delay:.48s} .clip>span{display:inline-block;opacity:0;transform:translateY(18px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)} .clip.in>span{opacity:1;transform:none} @media(prefers-reduced-motion:reduce){ .rise,.reveal,.rv,.clip>span{animation:none!important;opacity:1!important;transform:none!important;transition:none!important} .loop svg{animation:none}.loop .mk-arc{stroke-dashoffset:0;animation:none}.loop .mk-head{opacity:1;animation:none}.track .fill{transition:none}.hero em{animation:none} } /* ---------- definitional intro (GEO/AI-extractable) ---------- */ .def{border-left:3px solid var(--accent);background:var(--surface);border-radius:0 var(--radius) var(--radius) 0;padding:18px 22px;margin-top:26px;max-width:66ch} .def .k{font-family:var(--mono);font-size:.76rem;font-weight:500;letter-spacing:.02em;color:var(--primary);display:block;margin-bottom:7px;text-transform:lowercase} .def p{margin:0;font-size:1.05rem;color:var(--ink)} .dark .def{background:rgba(246,242,238,.06);border-left-color:var(--accent)} .dark .def .k{color:var(--accent)} .dark .def p{color:rgba(246,242,238,.86)} /* ---------- FAQ accordion (no FAQPage schema by policy) ---------- */ .faq{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--surface);max-width:780px} .faq details{border-bottom:1px solid var(--line)} .faq details:last-child{border-bottom:0} .faq summary{padding:18px 22px;font-weight:600;cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:18px;transition:background .2s} .faq summary::-webkit-details-marker{display:none} .faq summary::after{content:"+";font-family:var(--mono);font-size:1.25rem;line-height:1;color:var(--accent);flex:none} .faq details[open] summary::after{content:"\2013"} .faq summary:hover{background:#FBF8F5} .faq .a{padding:0 22px 20px;color:var(--muted);max-width:68ch} .faq .a a{color:var(--primary);text-decoration:underline;text-underline-offset:2px} /* ---------- about: founder / person card ---------- */ .person{display:grid;grid-template-columns:120px 1fr;gap:28px;align-items:start;max-width:800px} @media(max-width:600px){.person{grid-template-columns:1fr;gap:18px}} .person-avatar{width:120px;height:120px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-weight:600;font-size:2.4rem;color:#fff;background:linear-gradient(135deg,var(--primary),var(--accent));letter-spacing:.04em} .person-body h3{margin-bottom:.55rem} .person-role{color:var(--muted);font-weight:500;font-size:1rem;letter-spacing:0} .person-body p{color:var(--muted);margin-bottom:.85rem;max-width:62ch} .person-body .mail{display:inline-block;font-family:var(--mono);font-size:.9rem;color:var(--primary)} /* ---- tap targets (>=44px primary controls) ---- */ .nav-toggle{min-width:44px;min-height:44px;align-items:center;justify-content:center} .foot-nav a{padding:7px 0;display:inline-block} .person-body .mail{padding:6px 0} .foot-meta a{color:inherit;text-decoration:underline;text-underline-offset:2px} /* ---- insight (blog) typography ---- */ .wrap--narrow{max-width:760px;margin-inline:auto} .post-hero{padding-top:120px;padding-bottom:32px} .post-hero .eyebrow{margin-bottom:14px} .post-hero h1{max-width:24ch;color:var(--ink)} .post-hero .lead{max-width:62ch;color:var(--muted);font-size:1.15rem;line-height:1.55;margin-top:18px} .byline{font-size:.92rem;color:var(--muted);margin-top:18px;display:flex;flex-wrap:wrap;gap:12px;align-items:baseline} .byline a{color:var(--primary);font-weight:500} .byline .sep{opacity:.45} .post-body{padding-top:8px} .post-body .wrap--narrow > p, .post-body .wrap--narrow > ul, .post-body .wrap--narrow > ol, .post-body .wrap--narrow > blockquote, .post-body .wrap--narrow > pre, .post-body .wrap--narrow > .tablewrap, .post-body .wrap--narrow > table{margin-block:1.05em} .post-body .wrap--narrow > p{font-size:1.08rem;line-height:1.7;color:#2a2030} .post-body .wrap--narrow > p:first-of-type{font-size:1.18rem;color:var(--ink)} .post-body .wrap--narrow > h2{font-size:1.8rem;line-height:1.2;margin:2.2em 0 .6em;color:var(--ink);scroll-margin-top:90px} .post-body .wrap--narrow > h2::before{content:"";display:block;width:36px;height:3px;background:var(--accent);border-radius:2px;margin-bottom:18px} .post-body .wrap--narrow > h3{font-size:1.25rem;margin:2em 0 .4em;color:var(--ink)} .post-body .wrap--narrow > h4{font-size:1.05rem;margin:1.6em 0 .4em;color:var(--ink);text-transform:none;letter-spacing:0} .post-body .wrap--narrow > ul, .post-body .wrap--narrow > ol{padding-left:1.6em;line-height:1.65;font-size:1.06rem;color:#2a2030} .post-body .wrap--narrow > ul li, .post-body .wrap--narrow > ol li{margin-bottom:.55em} .post-body .wrap--narrow > ul li::marker{color:var(--primary)} .post-body .wrap--narrow a{color:var(--primary);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;text-decoration-color:rgba(83,51,98,.35);transition:text-decoration-color .15s ease} .post-body .wrap--narrow a:hover{text-decoration-color:var(--primary)} .post-body .wrap--narrow strong{color:var(--ink);font-weight:600} .post-body .wrap--narrow blockquote{border-left:3px solid var(--accent);padding:.6em 0 .6em 1.4em;margin-block:1.6em;color:var(--ink);font-style:italic;font-size:1.08rem} .post-body .wrap--narrow blockquote p{margin:0} .post-body .wrap--narrow code{font-family:var(--mono);font-size:.92em;background:rgba(83,51,98,.08);color:#3a2548;padding:.12em .38em;border-radius:4px} .post-body .wrap--narrow pre{font-family:var(--mono);font-size:.86rem;line-height:1.55;background:#221629;color:#efe2f4;padding:18px 20px;border-radius:10px;overflow-x:auto;border:1px solid rgba(255,255,255,.04)} .post-body .wrap--narrow pre code{background:none;color:inherit;padding:0;font-size:inherit} .post-body .wrap--narrow table{width:100%;border-collapse:collapse;font-size:.98rem;border:1px solid rgba(36,26,40,.08)} .post-body .wrap--narrow th{text-align:left;font-weight:600;color:var(--ink);background:rgba(83,51,98,.06);padding:10px 14px;border-bottom:1px solid rgba(36,26,40,.12)} .post-body .wrap--narrow td{padding:10px 14px;border-bottom:1px solid rgba(36,26,40,.06);vertical-align:top;color:#2a2030} .post-body .wrap--narrow tr:last-child td{border-bottom:none} .post-body .wrap--narrow tr:nth-child(even) td{background:rgba(83,51,98,.025)} .post-body .wrap--narrow hr{border:none;border-top:1px solid rgba(36,26,40,.12);margin:2.4em 0} .post-body .wrap--narrow img{max-width:100%;border-radius:8px;margin-block:1.6em} @media (max-width:720px){ .post-hero{padding-top:96px} .post-body .wrap--narrow > p{font-size:1.02rem} .post-body .wrap--narrow > p:first-of-type{font-size:1.08rem} .post-body .wrap--narrow > h2{font-size:1.5rem} .post-body .wrap--narrow > h3{font-size:1.15rem} .post-body .wrap--narrow > table{font-size:.92rem;display:block;overflow-x:auto} }