:root{ --ink:#0A1A14; --ink-2:#122A21; --ink-3:#1C3B2F; --paper:#F7F5EF; --paper-2:#EFEBE0; --line:#D8D2C4; --gold:#C9A227; --gold-deep:#7A6114; --gold-soft:#E8D9A4; --green:#157A4E; --text:#1A241F; --muted:#5C6B63; } *{box-sizing:border-box} html{scroll-behavior:smooth} body{margin:0;background:var(--paper);color:var(--text); font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased;} h1,h2,h3,h4{font-family:"Source Serif 4",Georgia,serif;font-weight:600;line-height:1.15;margin:0} a{color:inherit} img{max-width:100%;display:block} body{overflow-wrap:break-word} .wrap{width:min(1120px,92vw);margin-inline:auto} .eyebrow{font-family:Inter,sans-serif;font-size:.72rem;font-weight:600;letter-spacing:.16em; text-transform:uppercase;color:var(--gold-deep)} .prov{background:var(--ink);color:var(--gold-soft);font-size:.76rem;line-height:1.5; padding:.6rem 0;border-bottom:1px solid rgba(201,162,39,.28)} .prov strong{color:#fff;font-weight:600} .site-nav{position:sticky;top:0;z-index:50;background:rgba(247,245,239,.93); backdrop-filter:blur(10px);border-bottom:1px solid var(--line)} .site-nav .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.7rem;padding:.85rem 0} .brand{display:flex;align-items:center;gap:.55rem;text-decoration:none;min-width:0} .brand .mark{width:38px;height:38px;flex:none;border-radius:6px;background:var(--ink); display:grid;place-items:center;color:var(--gold); font-family:"Source Serif 4",serif;font-weight:700;font-size:.95rem} .brand b{font-family:"Source Serif 4",serif;font-size:1rem;font-weight:600;letter-spacing:-.01em} .brand span{display:block;font-size:.66rem;letter-spacing:.11em;text-transform:uppercase;color:var(--muted);font-weight:600;white-space:normal} .navlinks{display:none;flex-wrap:wrap;row-gap:.4rem;gap:1.7rem;font-size:.9rem;font-weight:500} .navlinks a{text-decoration:none;color:var(--muted)} .navlinks a:hover{color:var(--ink)} .btn{display:inline-block;background:var(--ink);color:var(--paper);text-decoration:none; padding:.7rem 1.3rem;border-radius:3px;font-size:.88rem;font-weight:600; border:1px solid var(--ink);transition:background .15s} .btn:hover{background:var(--ink-3)} .btn-ghost{background:transparent;color:var(--ink);border:1px solid var(--ink)} .btn-ghost:hover{background:var(--ink);color:var(--paper)} .btn-gold{background:var(--gold);border-color:var(--gold);color:var(--ink)} .btn-gold:hover{background:var(--gold-soft);border-color:var(--gold-soft)} .site-nav .btn{padding:.6rem .8rem;font-size:.8rem;flex:none} /* hero */ .hero{background:var(--ink);color:var(--paper);padding:2.75rem 0 0;position:relative;overflow:hidden} .hero::after{content:"";position:absolute;inset:0;pointer-events:none; background:radial-gradient(900px 420px at 82% -10%,rgba(21,122,78,.28),transparent 70%), radial-gradient(620px 320px at 6% 106%,rgba(201,162,39,.12),transparent 70%)} .hero .wrap{position:relative;z-index:1} .hero-grid{display:grid;grid-template-columns:1fr;gap:2.5rem;align-items:center;padding-bottom:2.5rem} .hero h1{font-size:clamp(2.4rem,5vw,3.9rem);letter-spacing:-.025em;max-width:16ch;margin:1.1rem 0 0} .hero .lede{font-size:clamp(1.04rem,1.8vw,1.22rem);color:#CFDCD4;max-width:56ch;margin:1.4rem 0 0} .hero .lede b{color:#fff;font-weight:600} .hero-cta{display:flex;gap:.85rem;flex-wrap:wrap;margin:2.1rem 0 0} .hero .btn-ghost{color:var(--paper);border-color:rgba(247,245,239,.45)} .hero .btn-ghost:hover{background:var(--paper);color:var(--ink)} .portrait-frame{position:relative} .portrait-frame img{border-radius:8px;border:1px solid rgba(201,162,39,.4);width:100%; height:auto;aspect-ratio:4/5;object-fit:cover;object-position:50% 18%; filter:saturate(.96) contrast(1.02)} .portrait-cap{margin-top:.9rem;font-size:.82rem;color:#A9BBB2;line-height:1.5} .portrait-cap b{color:#fff;display:block;font-family:"Source Serif 4",serif;font-size:1.02rem;font-weight:600} /* her voice quote under hero */ .voicebar{background:var(--ink-2);border-top:1px solid rgba(255,255,255,.09);padding:2.6rem 0} .voicebar blockquote{margin:0;font-family:"Source Serif 4",serif; font-size:clamp(1.3rem,2.6vw,1.85rem);line-height:1.35;color:#fff;max-width:34ch} .voicebar .attrib{margin-top:1rem;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gold)} .voicebar .wrap{display:grid;grid-template-columns:1fr;gap:2.5rem;align-items:end} .voicebar .qmark{font-family:"Source Serif 4",serif;font-size:6rem;color:rgba(201,162,39,.22);line-height:.6} /* authority band */ .authority{background:var(--paper-2);padding:4.5rem 0;border-bottom:1px solid var(--line)} .auth-grid{display:grid;grid-template-columns:1fr;gap:2rem;align-items:center} .auth-grid img{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;object-position:50% 22%; border-radius:8px;border:1px solid var(--line)} .auth-cap{margin-top:.8rem;font-size:.8rem;color:var(--muted);line-height:1.5} .creds{display:grid;grid-template-columns:1fr;gap:1.3rem;margin-top:1.8rem} .cred-item{border-left:3px solid var(--gold);padding-left:1.1rem} .cred-item b{display:block;font-family:"Source Serif 4",serif;font-size:1.22rem;color:var(--ink);line-height:1.25} .cred-item span{font-size:.87rem;color:var(--muted)} /* photo strip */ .strip{display:grid;grid-template-columns:1fr;gap:1.2rem;margin-top:2.5rem} .strip figure{margin:0} .strip img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:6px;border:1px solid var(--line)} .strip figcaption{margin-top:.6rem;font-size:.8rem;color:var(--muted);line-height:1.45} /* proof strip */ .proof{background:var(--ink);border-top:1px solid rgba(255,255,255,.09)} .proof .wrap{display:grid;grid-template-columns:1fr 1fr} .proof div{padding:1.85rem 1.2rem 1.85rem 0;border-right:1px solid rgba(255,255,255,.09);border-bottom:1px solid rgba(255,255,255,.09)} .proof div:last-child{border-right:0} .proof dt{font-family:"Source Serif 4",serif;font-size:1.7rem;color:var(--gold);line-height:1.05;font-weight:600} .proof dd{margin:.55rem 0 0;font-size:.82rem;color:#A9BBB2;line-height:1.45} section{padding:3.5rem 0} .alt{background:var(--paper-2)} .sec-head{max-width:62ch;margin-bottom:3rem} .sec-head h2{font-size:clamp(1.9rem,3.6vw,2.7rem);letter-spacing:-.02em;margin:.9rem 0 0} .sec-head p{color:var(--muted);font-size:1.05rem;margin:1.1rem 0 0} .cols{display:grid;grid-template-columns:1fr;gap:2.2rem;align-items:start} .stat-block{border-left:3px solid var(--gold);padding-left:1.4rem;margin:2rem 0} .stat-block b{font-family:"Source Serif 4",serif;font-size:1.45rem;display:block;color:var(--ink)} .stat-block span{font-size:.9rem;color:var(--muted)} .grid3{display:grid;grid-template-columns:1fr;gap:1.5rem} .card{background:#fff;border:1px solid var(--line);border-radius:6px;padding:1.9rem 1.7rem; display:flex;flex-direction:column;gap:.85rem;transition:border-color .16s,transform .16s} .card:hover{border-color:var(--green);transform:translateY(-2px)} .card.dark .num,.card.dark .code{color:var(--gold)} .card .num{font-family:"Source Serif 4",serif;font-size:.85rem;color:var(--gold-deep);font-weight:700;letter-spacing:.08em} .card h3{font-size:1.26rem;letter-spacing:-.01em} .card p{margin:0;font-size:.94rem;color:var(--muted)} .card ul{margin:.2rem 0 0;padding-left:1.05rem;font-size:.88rem;color:var(--muted)} .card li{margin:.3rem 0} .std{display:grid;grid-template-columns:1fr;gap:1.5rem} .std-card{background:var(--ink);color:var(--paper);border-radius:6px;padding:2rem 1.9rem;border:1px solid var(--ink-3)} .std-card .code{font-family:"Source Serif 4",serif;font-size:2rem;color:var(--gold);line-height:1;font-weight:600} .std-card h3{margin:.6rem 0 0;font-size:1.16rem;color:#fff} .std-card p{margin:.7rem 0 0;font-size:.92rem;color:#A9BBB2} .std-more{border:1px dashed var(--line);border-radius:6px;padding:1.6rem 1.8rem;margin-top:1.5rem; font-size:.94rem;color:var(--muted);background:#fff} /* principal */ .principal{display:grid;grid-template-columns:1fr;gap:2rem;align-items:start} .principal img{border-radius:8px;border:1px solid var(--line);width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:50% 18%} .pcap{margin-top:.85rem;font-size:.82rem;color:var(--muted);line-height:1.5} .pcap b{display:block;color:var(--ink);font-family:"Source Serif 4",serif;font-size:1.05rem;font-weight:600} .pullquote{font-family:"Source Serif 4",serif;font-size:1.28rem;line-height:1.45;color:var(--ink); border-top:2px solid var(--gold);border-bottom:2px solid var(--gold);padding:1.45rem 0;margin:2rem 0} .pullquote cite{display:block;font-family:Inter,sans-serif;font-size:.76rem;font-style:normal; letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-top:1rem} .timeline{margin:2rem 0 0;padding:0;list-style:none} .timeline li{display:grid;grid-template-columns:5.5rem 1fr;gap:1.2rem;padding:.85rem 0;border-top:1px solid var(--line);font-size:.94rem} .timeline b{font-family:"Source Serif 4",serif;color:var(--gold-deep);font-size:.95rem} .timeline span{color:var(--muted)} /* quotes grid */ .qgrid{display:grid;grid-template-columns:1fr;gap:1.5rem} .qcard{background:#fff;border:1px solid var(--line);border-left:3px solid var(--gold); border-radius:0 6px 6px 0;padding:1.7rem} .qcard p{margin:0;font-family:"Source Serif 4",serif;font-size:1.08rem;line-height:1.45;color:var(--ink)} .qcard cite{display:block;font-style:normal;font-size:.76rem;letter-spacing:.08em; text-transform:uppercase;color:var(--muted);margin-top:1.1rem;line-height:1.5} /* press strip */ .pressstrip{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:2rem} .pressstrip span{border:1px solid var(--line);background:#fff;border-radius:100px; padding:.45rem 1rem;font-size:.8rem;color:var(--muted);font-weight:500} .sectors{display:grid;grid-template-columns:1fr;gap:1.2rem} .sectors>*{min-width:0} .sector{border:1px solid var(--line);border-radius:6px;padding:1.5rem;background:#fff} .sector h3{font-size:1.05rem;margin-bottom:.5rem} .sector p{margin:0;font-size:.88rem;color:var(--muted)} .steps{counter-reset:s} .step{display:grid;grid-template-columns:auto 1fr;gap:1rem;padding:1.85rem 0;border-top:1px solid var(--line)} .step:last-child{border-bottom:1px solid var(--line)} .step .n{counter-increment:s;font-family:"Source Serif 4",serif;font-size:1.02rem;color:var(--gold-deep); font-weight:700;width:2.6rem;height:2.6rem;border:1px solid var(--gold-deep);border-radius:50%; display:grid;place-items:center;flex:none} .step .n::before{content:counter(s,decimal-leading-zero)} .step h3{font-size:1.2rem} .step p{margin:.5rem 0 0;color:var(--muted);font-size:.95rem;max-width:64ch} .cta{background:var(--ink);color:var(--paper);text-align:center} .cta h2{font-size:clamp(2rem,4.2vw,3rem);max-width:20ch;margin-inline:auto;letter-spacing:-.02em} .cta p{color:#CFDCD4;max-width:54ch;margin:1.3rem auto 0} .cta-row{display:flex;gap:.85rem;justify-content:center;flex-wrap:wrap;margin-top:2.2rem} .contact-line{margin-top:2.6rem;font-size:.9rem;color:#A9BBB2} .contact-line a{color:var(--gold-soft)} footer{background:var(--ink-2);color:#A9BBB2;font-size:.85rem;padding:3rem 0 2.5rem} .foot-grid{display:grid;grid-template-columns:1fr;gap:1.6rem;margin-bottom:2.5rem} footer h2{color:#fff;font-family:Inter,sans-serif;font-size:.72rem;letter-spacing:.14em; text-transform:uppercase;margin:0 0 .85rem;font-weight:600} footer a{color:#A9BBB2;text-decoration:none;display:block;margin:.35rem 0;padding:.2rem 0} footer a:hover{color:var(--gold-soft)} .foot-note{border-top:1px solid rgba(255,255,255,.1);padding-top:1.6rem;font-size:.78rem;line-height:1.6} .hero .eyebrow,.head .eyebrow,.cta .eyebrow{color:var(--gold)} /* ---- Accessibility remediation (WCAG 2.2 AA gate, 2026-08-24) ---- */ /* 2.4.1 Bypass Blocks */ .skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--ink);color:var(--paper); padding:.8rem 1.2rem;font-size:.9rem;font-weight:600;text-decoration:none;border-radius:0 0 4px 0} .skip:focus,.skip:focus-visible{left:0} main:focus{outline:none} /* 2.4.7 / 2.4.11 author-defined focus indicator, no longer UA-dependent */ :focus-visible{outline:3px solid var(--green);outline-offset:2px;border-radius:2px} .hero :focus-visible,.head :focus-visible,.cta :focus-visible,.proof :focus-visible, .voicebar :focus-visible,.summary :focus-visible,.side.dark :focus-visible, .std-card :focus-visible,footer :focus-visible{outline-color:var(--gold)} /* 2.3.3 Animation from Interactions */ @media(prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important; transition-duration:.01ms !important;transition-delay:0s !important;scroll-behavior:auto !important} .card:hover,.post:hover,.side:hover{transform:none !important} } .brand b{font-size:1rem} .site-nav .btn{padding:.65rem .9rem;font-size:.82rem} } /* ---- Mobile-first enhancement layer (base styles above are the 320px case) ---- */ @media(min-width:561px){ .site-nav .wrap{gap:2rem} .brand{gap:.7rem} .brand b{font-size:1.12rem} .brand span{white-space:nowrap} .site-nav .btn{padding:.7rem 1.3rem;font-size:.88rem} .sectors{grid-template-columns:1fr 1fr} } @media(min-width:641px){ .creds{grid-template-columns:1fr 1fr} .grid3{grid-template-columns:1fr 1fr} } @media(min-width:761px){ section{padding:5.25rem 0} .hero{padding:4.5rem 0 0} .std{grid-template-columns:repeat(2,1fr)} .foot-grid{grid-template-columns:1.4fr 1fr 1fr;gap:2.5rem} .step{gap:1.8rem} } @media(min-width:821px){ .voicebar .wrap{grid-template-columns:1fr auto} .strip{grid-template-columns:repeat(3,1fr)} .proof .wrap{grid-template-columns:repeat(4,1fr)} .proof div{padding:1.85rem 1.4rem 1.85rem 0;border-bottom:0} } @media(min-width:861px){ .cols{grid-template-columns:1fr 1fr;gap:3.5rem} } @media(min-width:901px){ .hero-grid{grid-template-columns:1.25fr .75fr;gap:3.5rem;padding-bottom:3.5rem} .auth-grid{grid-template-columns:.62fr 1.38fr;gap:3.2rem} .principal{grid-template-columns:.8fr 1.2fr;gap:3.5rem} .sectors{grid-template-columns:repeat(4,1fr)} } @media(min-width:961px){ .navlinks{display:flex} .grid3{grid-template-columns:repeat(3,1fr)} .qgrid{grid-template-columns:repeat(3,1fr)} } /* ---- Motion layer (EDEN for Sites, 2026-08-24) ------------------------- Three effects, each one gated on frequency/purpose/speed/function before it was written. Reduced-motion handling is inline with each effect, not bolted on afterwards. Everything animates transform and opacity only. */ :root{--ease-out:cubic-bezier(.23,1,.32,1)} /* 1. Press feedback. The site had :hover and no :active anywhere, so on touch (most of our traffic) buttons gave no press feedback at all. */ .btn{transition:background .15s var(--ease-out),border-color .15s var(--ease-out),color .15s var(--ease-out),transform .16s var(--ease-out)} .btn:active{transform:scale(.97)} /* 3. Section reveal. TRANSFORM ONLY -- do not add opacity back. A scroll-driven animation has no time component, so every intermediate state is permanent: a reader can stop at opacity 0.851 and it stays there. Measured on this palette that renders body text at 3.79:1 against a 4.5:1 requirement, so a fade is a 1.4.3 failure by construction and no animation-range value can close the band. Gated on @supports + no-preference so an unsupporting browser simply shows the content in place. */ @supports (animation-timeline:view()){ @media(prefers-reduced-motion:no-preference){ main>section{animation:ckb-reveal linear both;animation-timeline:view();animation-range:entry 0% entry 60%} @keyframes ckb-reveal{from{transform:translateY(8px)}to{transform:none}} } } /* ---- from accreditation.html ---- */ .head-grid{display:grid;grid-template-columns:1fr;gap:2.2rem;align-items:center} .head-portrait img{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;object-position:50% 22%; border-radius:8px;border:1px solid rgba(201,162,39,.4)} .head-portrait figcaption{margin-top:.75rem;font-size:.79rem;color:#A9BBB2;line-height:1.5} .head-portrait b{display:block;color:#fff;font-family:"Source Serif 4",serif;font-size:1rem;font-weight:600} /* the distinction */ .split{display:grid;grid-template-columns:1fr;gap:1.5rem} .side .who{font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;font-weight:600;color:var(--gold-deep)} .side.dark .who{color:var(--gold)} .note{background:#fff;border:1px solid var(--line);border-left:3px solid var(--gold); border-radius:0 6px 6px 0;padding:1.6rem 1.8rem;font-size:.94rem;color:var(--muted);margin-top:2rem} .note b{color:var(--ink)} .faq details{border-bottom:1px solid var(--line);padding:1.2rem 0} .faq details:first-of-type{border-top:1px solid var(--line)} .faq summary{cursor:pointer;font-family:"Source Serif 4",serif;font-size:1.14rem;font-weight:600;color:var(--ink);list-style:none} .faq summary::-webkit-details-marker{display:none} .faq summary::before{content:"+";color:var(--gold-deep);font-weight:700;margin-right:.7rem} .faq details[open] summary::before{content:"–"} .faq p{color:var(--muted);margin:.9rem 0 0;font-size:.95rem;max-width:72ch} /* ---- from insights.html ---- */ .feature{display:grid;grid-template-columns:1fr;gap:2.5rem;align-items:center; background:#fff;border:1px solid var(--line);border-radius:8px;overflow:hidden;margin-bottom:2.5rem} .feature img{width:100%;height:100%;min-height:260px;object-fit:cover} .feature .body{padding:2.2rem} .feature h3{font-size:clamp(1.4rem,2.6vw,1.85rem);letter-spacing:-.015em;margin:.6rem 0 .8rem} .feature p{color:var(--muted);margin:0 0 1.2rem;font-size:.97rem} .date{font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:600} .grid{display:grid;grid-template-columns:1fr;gap:1.6rem} .post .thumb{aspect-ratio:16/10;width:100%;height:auto;object-fit:cover;background:var(--paper-2)} .post .noimg{aspect-ratio:16/10;background:linear-gradient(150deg,var(--ink),var(--ink-3)); display:grid;place-items:center;color:var(--gold);font-family:"Source Serif 4",serif;font-size:1.7rem} .post .body{padding:1.4rem 1.4rem 1.6rem;display:flex;flex-direction:column;gap:.55rem;flex:1} .post .more{margin-top:auto;font-size:.8rem;font-weight:600;color:var(--green)} .note{background:var(--paper-2);border-left:3px solid var(--gold);padding:1.5rem 1.7rem; border-radius:0 6px 6px 0;font-size:.93rem;color:var(--muted);margin-top:2.5rem} /* ISO 22000 panel — replaces a bitmap infographic with real text, closing WCAG 1.4.5. Mobile-first: single column base, no fixed widths, nothing that can overflow 320. Paper on ink and gold on ink are the two combinations the accessibility gate measured as safe on a dark ground. */ .fsms{background:var(--ink);color:var(--paper);padding:1.6rem 1.3rem;display:flex;flex-direction:column;gap:.55rem} .fsms .fsms-eyebrow{margin:0;font-size:.7rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)} .fsms .fsms-title{margin:0 0 .2rem;font-family:"Source Serif 4",serif;font-size:1.32rem;font-weight:700;line-height:1.2;letter-spacing:normal;color:var(--paper)} .fsms .fsms-lede{margin:0 0 .5rem;font-size:.88rem;line-height:1.5;color:var(--paper)} .fsms .fsms-label{margin:.5rem 0 .1rem;font-size:.68rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--gold)} .fsms-chain{margin:0;padding:0;list-style:none;counter-reset:s;display:flex;flex-wrap:wrap;gap:.3rem .55rem} .fsms .fsms-chain li{counter-increment:s;font-size:.8rem;line-height:1.4;color:var(--paper);flex:1 1 auto;min-width:0} .fsms-chain li::before{content:counter(s);color:var(--gold);font-weight:700;margin-right:.35rem} .fsms-benefits{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:.4rem} .fsms .fsms-benefits li{font-size:.82rem;line-height:1.45;color:var(--paper);padding-left:.85rem;position:relative;min-width:0} .fsms-benefits li::before{content:"";position:absolute;left:0;top:.55em;width:.3rem;height:.3rem;background:var(--gold);border-radius:50%} .fsms-benefits b{font-weight:700;color:var(--paper)} .fsms .fsms-note{margin:.6rem 0 0;padding-top:.7rem;border-top:1px solid rgba(247,245,239,.25);font-size:.76rem;line-height:1.5;color:var(--paper)} /* Registration facts as real text on the card, so the certificate image is supplementary rather than the sole carrier of the information (WCAG 1.4.5). */ .post .reg{margin:.6rem 0 0;font-size:.86rem;line-height:1.5;color:var(--text);border-top:1px solid var(--line);padding-top:.6rem} .post .reg b{color:var(--ink);font-weight:700} /* ---- from press.html ---- */ .head-grid{display:grid;grid-template-columns:1fr;gap:2rem;align-items:center} .head-portrait img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:50% 18%; border-radius:8px;border:1px solid rgba(201,162,39,.4)} .head-portrait figcaption{margin-top:.8rem;font-size:.8rem;color:#A9BBB2;line-height:1.5} .entry{border-top:1px solid var(--line);padding:2.2rem 0;display:grid; grid-template-columns:1fr;gap:.9rem} .entry:last-child{border-bottom:1px solid var(--line)} .entry .meta .pub{font-family:"Source Serif 4",serif;font-size:1.05rem;color:var(--ink);font-weight:600} .entry .meta .date{font-size:.83rem;color:var(--muted);margin-top:.2rem} .entry .meta .tag{display:inline-block;margin-top:.7rem;font-size:.68rem;letter-spacing:.1em; text-transform:uppercase;font-weight:600;color:var(--green);border:1px solid var(--green); border-radius:100px;padding:.2rem .6rem} .entry h3{font-size:1.32rem;letter-spacing:-.01em;margin-bottom:.7rem} .entry h3 a{text-decoration:none;background-image:linear-gradient(var(--gold),var(--gold)); background-size:0 2px;background-repeat:no-repeat;background-position:0 100%;transition:background-size .2s} .entry h3 a:hover{background-size:100% 2px} .entry p{margin:0 0 .8rem;color:var(--muted);font-size:.96rem} .entry blockquote{margin:1rem 0 0;padding:1rem 0 1rem 1.3rem;border-left:3px solid var(--gold); font-family:"Source Serif 4",serif;font-size:1.08rem;line-height:1.45;color:var(--ink)} .entry .src{font-size:.8rem;color:var(--muted);margin-top:.6rem} .further{background:#fff;border:1px solid var(--line);border-radius:6px;padding:1.7rem 1.9rem} .further h3{font-size:1.1rem;margin-bottom:.9rem} .further ul{margin:0;padding-left:1.1rem;color:var(--muted);font-size:.92rem} .further li{margin:.5rem 0} .further .note{margin-top:1.1rem;font-size:.85rem;color:var(--muted);font-style:italic} .faq{border-top:1px solid var(--line)} .faq p{color:var(--muted);margin:.9rem 0 0;font-size:.96rem;max-width:70ch} /* ---- from policies.html ---- */ .narrow{width:min(760px,92vw);margin-inline:auto} .toc{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:2rem} .toc a{border:1px solid rgba(247,245,239,.35);border-radius:100px;padding:.42rem 1rem; font-size:.83rem;text-decoration:none;color:var(--gold-soft)} .toc a:hover{background:var(--gold);border-color:var(--gold);color:var(--ink)} .meta{font-size:.85rem;color:var(--muted);margin-top:.5rem} .source{background:var(--paper-2);border-left:3px solid var(--green);padding:1rem 1.3rem; border-radius:0 5px 5px 0;font-size:.88rem;color:var(--muted);margin:1.4rem 0} .source b{color:var(--ink)} .flag{background:#FFF6EC;border:1px solid #E8C9A6;border-left:4px solid var(--flag); border-radius:0 6px 6px 0;padding:1.5rem 1.7rem;margin:1.5rem 0} .flag b{color:var(--flag);display:block;margin-bottom:.5rem;font-size:.75rem;letter-spacing:.12em;text-transform:uppercase} .flag p{margin:.5rem 0;font-size:.94rem;color:var(--text)} .todo{display:inline-block;background:#FDEBD8;border:1px dashed var(--flag);color:var(--flag); border-radius:3px;padding:.1rem .5rem;font-size:.85rem;font-weight:600;font-family:Inter,sans-serif} /* ===================================================================== PALETTES. Shipped as namedselect options, never as a colour picker. A client with a colour picker can reproduce the 2.03:1 gold failure this build already had to fix. Every palette below was measured before shipping; ratios are recorded so the next person can re-check rather than re-derive. Base 'Forest and gold' lives in :root above and is unchanged. ===================================================================== */ /* Navy and copper — measured text on paper=15.1; muted on paper=5.71; muted on paper-2=5.08; gold-deep on paper=7.04; gold-deep on paper-2=6.26; paper on ink=16.11; accent on ink=5.48 Lowest pair: 5.08. AA body text requires 4.5. */ .theme-navy{ --ink:#0B1A2A; --ink2:#132638; --ink3:#1D3550; --paper:#F6F5F2; --paper2:#EAE8E2; --line:#D6D2C9; --gold:#C87F3C; --gold-deep:#7A4712; --gold-soft:#EBD3B8; --green:#1C6E8C; --text:#16202B; --muted:#57626D; } /* Slate and teal — measured text on paper=15.19; muted on paper=5.69; muted on paper-2=5.09; gold-deep on paper=6.94; gold-deep on paper-2=6.21; paper on ink=15.48; accent on ink=5.27 Lowest pair: 5.09. AA body text requires 4.5. */ .theme-slate{ --ink:#12201F; --ink2:#1B2E2C; --ink3:#264240; --paper:#F5F6F5; --paper2:#E7EAE9; --line:#D2D8D6; --gold:#35A093; --gold-deep:#1E5E57; --gold-soft:#BFE0DB; --green:#2F7D6E; --text:#18211F; --muted:#586460; } /* ===================================================================== Koenig editor cards. Required by Ghost: content the client creates in the editor must render correctly, and wide/full images are the two widths the editor offers. Without these the client can produce layouts the theme silently ignores. ===================================================================== */ .post .body{max-width:68ch;margin-inline:auto} .kg-card{margin:2rem 0} .kg-width-wide{position:relative;width:min(1120px,92vw);margin-inline:calc(50% - min(560px,46vw))} .kg-width-full{position:relative;width:100vw;margin-inline:calc(50% - 50vw);max-width:100vw} .kg-width-full img{width:100%;height:auto} .kg-image{margin-inline:auto;height:auto} .kg-image-card figcaption,.kg-embed-card figcaption,.kg-gallery-card figcaption{ margin-top:.6rem;font-size:.8rem;color:var(--muted);line-height:1.45;text-align:center} .kg-gallery-row{display:flex;gap:.6rem} .kg-gallery-image img{width:100%;height:auto} .kg-bookmark-card a.kg-bookmark-container{display:flex;text-decoration:none;color:inherit; border:1px solid var(--line);border-radius:6px;overflow:hidden;background:var(--paper-2)} .kg-bookmark-content{padding:1rem 1.1rem} .kg-bookmark-title{font-family:"Source Serif 4",Georgia,serif;font-weight:600;color:var(--ink)} .kg-bookmark-description{font-size:.88rem;color:var(--muted)} .kg-bookmark-thumbnail img{width:100%;height:100%;object-fit:cover} blockquote.kg-blockquote-alt{font-family:"Source Serif 4",Georgia,serif;font-size:1.25rem} .kg-callout-card{display:flex;gap:.8rem;padding:1rem 1.2rem;border-radius:6px; background:var(--paper-2);border:1px solid var(--line)} .kg-toggle-card{border:1px solid var(--line);border-radius:6px;padding:1rem 1.2rem} .kg-button-card a{display:inline-block;background:var(--ink);color:var(--paper); text-decoration:none;padding:.7rem 1.3rem;border-radius:3px;font-weight:600} /* ===================================================================== Custom font support. Ghost's admin font picker sets these variables; a theme that ignores them makes the setting look broken to the client. We default to the built design and let the picker override. ===================================================================== */ :root{ --gh-font-heading:"Source Serif 4",Georgia,serif; --gh-font-body:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; } body{font-family:var(--gh-font-body)} h1,h2,h3,h4,h5,h6{font-family:var(--gh-font-heading)} /* Ghost's {{navigation}} helper emits