/* Self-hosted webfonts (ORC-399). The site loaded these from fonts.googleapis.com, which was its only third-party browser request -- there are no analytics, no pixels and no cookies -- so vendoring them takes a visitor's page load to zero external hosts and leaves the privacy policy nothing to disclose at the browsing stage. These rules MIRROR what fonts.googleapis.com returned for the link they replace: same files, same discrete font-weight values, same unicode-range split, same font-display. Newsreader and Source Sans 3 are variable fonts, so one file per style covers every weight and is declared once per weight, exactly as Google declares it. Declaring the range instead (font-weight:400 600) would change how and the 600-weight ledger cells render, and this change is about who serves the fonts, not how they look. Only latin and latin-ext are vendored. unicode-range means a visitor downloads latin-ext only if a character needs it, so it costs nothing to keep and preserves today's rendering for a diacritic. Regenerating these rules and refreshing the files: docs/webfonts.md. */ @font-face{font-family:"Newsreader";font-style:italic;font-weight:400;font-display:swap;src:url("/fonts/newsreader-italic-latin.woff2?v=56a8b5052412") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} @font-face{font-family:"Newsreader";font-style:italic;font-weight:400;font-display:swap;src:url("/fonts/newsreader-italic-latin-ext.woff2?v=56a8b5052412") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF} @font-face{font-family:"Newsreader";font-style:italic;font-weight:500;font-display:swap;src:url("/fonts/newsreader-italic-latin.woff2?v=56a8b5052412") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} @font-face{font-family:"Newsreader";font-style:italic;font-weight:500;font-display:swap;src:url("/fonts/newsreader-italic-latin-ext.woff2?v=56a8b5052412") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF} @font-face{font-family:"Newsreader";font-style:normal;font-weight:400;font-display:swap;src:url("/fonts/newsreader-normal-latin.woff2?v=56a8b5052412") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} @font-face{font-family:"Newsreader";font-style:normal;font-weight:400;font-display:swap;src:url("/fonts/newsreader-normal-latin-ext.woff2?v=56a8b5052412") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF} @font-face{font-family:"Newsreader";font-style:normal;font-weight:500;font-display:swap;src:url("/fonts/newsreader-normal-latin.woff2?v=56a8b5052412") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} @font-face{font-family:"Newsreader";font-style:normal;font-weight:500;font-display:swap;src:url("/fonts/newsreader-normal-latin-ext.woff2?v=56a8b5052412") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF} @font-face{font-family:"Newsreader";font-style:normal;font-weight:600;font-display:swap;src:url("/fonts/newsreader-normal-latin.woff2?v=56a8b5052412") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} @font-face{font-family:"Newsreader";font-style:normal;font-weight:600;font-display:swap;src:url("/fonts/newsreader-normal-latin-ext.woff2?v=56a8b5052412") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF} @font-face{font-family:"Source Sans 3";font-style:italic;font-weight:400;font-display:swap;src:url("/fonts/source-sans-3-italic-latin.woff2?v=56a8b5052412") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} @font-face{font-family:"Source Sans 3";font-style:italic;font-weight:400;font-display:swap;src:url("/fonts/source-sans-3-italic-latin-ext.woff2?v=56a8b5052412") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF} @font-face{font-family:"Source Sans 3";font-style:normal;font-weight:400;font-display:swap;src:url("/fonts/source-sans-3-normal-latin.woff2?v=56a8b5052412") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} @font-face{font-family:"Source Sans 3";font-style:normal;font-weight:400;font-display:swap;src:url("/fonts/source-sans-3-normal-latin-ext.woff2?v=56a8b5052412") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF} @font-face{font-family:"Source Sans 3";font-style:normal;font-weight:500;font-display:swap;src:url("/fonts/source-sans-3-normal-latin.woff2?v=56a8b5052412") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} @font-face{font-family:"Source Sans 3";font-style:normal;font-weight:500;font-display:swap;src:url("/fonts/source-sans-3-normal-latin-ext.woff2?v=56a8b5052412") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF} @font-face{font-family:"Source Sans 3";font-style:normal;font-weight:600;font-display:swap;src:url("/fonts/source-sans-3-normal-latin.woff2?v=56a8b5052412") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} @font-face{font-family:"Source Sans 3";font-style:normal;font-weight:600;font-display:swap;src:url("/fonts/source-sans-3-normal-latin-ext.woff2?v=56a8b5052412") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF} @font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url("/fonts/ibm-plex-mono-400-latin.woff2?v=56a8b5052412") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} @font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url("/fonts/ibm-plex-mono-400-latin-ext.woff2?v=56a8b5052412") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF} @font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url("/fonts/ibm-plex-mono-500-latin.woff2?v=56a8b5052412") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} @font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url("/fonts/ibm-plex-mono-500-latin-ext.woff2?v=56a8b5052412") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF} /* Cormorant Garamond (display) and Jost (body) -- the Temple direction's two faces. The files are copied into dist/fonts/ from the @fontsource packages by scripts/build.mjs, so these URLs are local and the page still reaches no third-party host. unicode-range matches what Google serves, so latin-ext downloads only when a character needs it. A weight added here needs adding to the FONTSOURCE list in scripts/build.mjs too, or its file will not exist. */ @font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:300;font-display:swap;src:url("/fonts/cormorant-garamond-latin-300-normal.woff2?v=56a8b5052412") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} @font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:300;font-display:swap;src:url("/fonts/cormorant-garamond-latin-ext-300-normal.woff2?v=56a8b5052412") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF} @font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:400;font-display:swap;src:url("/fonts/cormorant-garamond-latin-400-normal.woff2?v=56a8b5052412") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} @font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:400;font-display:swap;src:url("/fonts/cormorant-garamond-latin-ext-400-normal.woff2?v=56a8b5052412") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF} @font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:500;font-display:swap;src:url("/fonts/cormorant-garamond-latin-500-normal.woff2?v=56a8b5052412") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} @font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:500;font-display:swap;src:url("/fonts/cormorant-garamond-latin-ext-500-normal.woff2?v=56a8b5052412") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF} @font-face{font-family:"Cormorant Garamond";font-style:italic;font-weight:300;font-display:swap;src:url("/fonts/cormorant-garamond-latin-300-italic.woff2?v=56a8b5052412") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} @font-face{font-family:"Cormorant Garamond";font-style:italic;font-weight:300;font-display:swap;src:url("/fonts/cormorant-garamond-latin-ext-300-italic.woff2?v=56a8b5052412") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF} @font-face{font-family:"Cormorant Garamond";font-style:italic;font-weight:400;font-display:swap;src:url("/fonts/cormorant-garamond-latin-400-italic.woff2?v=56a8b5052412") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} @font-face{font-family:"Cormorant Garamond";font-style:italic;font-weight:400;font-display:swap;src:url("/fonts/cormorant-garamond-latin-ext-400-italic.woff2?v=56a8b5052412") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF} @font-face{font-family:"Jost";font-style:normal;font-weight:300;font-display:swap;src:url("/fonts/jost-latin-300-normal.woff2?v=56a8b5052412") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} @font-face{font-family:"Jost";font-style:normal;font-weight:300;font-display:swap;src:url("/fonts/jost-latin-ext-300-normal.woff2?v=56a8b5052412") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF} @font-face{font-family:"Jost";font-style:normal;font-weight:400;font-display:swap;src:url("/fonts/jost-latin-400-normal.woff2?v=56a8b5052412") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} @font-face{font-family:"Jost";font-style:normal;font-weight:400;font-display:swap;src:url("/fonts/jost-latin-ext-400-normal.woff2?v=56a8b5052412") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF} @font-face{font-family:"Jost";font-style:normal;font-weight:500;font-display:swap;src:url("/fonts/jost-latin-500-normal.woff2?v=56a8b5052412") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} @font-face{font-family:"Jost";font-style:normal;font-weight:500;font-display:swap;src:url("/fonts/jost-latin-ext-500-normal.woff2?v=56a8b5052412") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF} @font-face{font-family:"Jost";font-style:italic;font-weight:400;font-display:swap;src:url("/fonts/jost-latin-400-italic.woff2?v=56a8b5052412") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} @font-face{font-family:"Jost";font-style:italic;font-weight:400;font-display:swap;src:url("/fonts/jost-latin-ext-400-italic.woff2?v=56a8b5052412") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF} /* Fraunces, the wordmark face (and only the wordmark -- see .brand .k below). An old-style with deliberate wonk in its curves: it reads alive and slightly organic where Cormorant reads carved, which is the half of "wealth and health" the coin does not already say by itself. Two weights, both split on the same unicode-range boundaries as everything else here, so latin-ext still downloads only when a character needs it. */ @font-face{font-family:"Fraunces";font-style:normal;font-weight:500;font-display:swap;src:url("/fonts/fraunces-latin-500-normal.woff2?v=56a8b5052412") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} @font-face{font-family:"Fraunces";font-style:normal;font-weight:500;font-display:swap;src:url("/fonts/fraunces-latin-ext-500-normal.woff2?v=56a8b5052412") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF} @font-face{font-family:"Fraunces";font-style:normal;font-weight:600;font-display:swap;src:url("/fonts/fraunces-latin-600-normal.woff2?v=56a8b5052412") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} @font-face{font-family:"Fraunces";font-style:normal;font-weight:600;font-display:swap;src:url("/fonts/fraunces-latin-ext-600-normal.woff2?v=56a8b5052412") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF} /* TEMPLE palette. The ground moved from cool sage to warm paper and the two accents from teal/saffron to lacquer/brass, so the page reads as a printed page about wealth rather than a SaaS dashboard. --verdigris and --saffron KEEP THEIR NAMES and change their values. Roughly sixty rules below reference them, and renaming would have meant touching every one of them to no visual effect. Read --verdigris as "accent 1, the royal blue" and --saffron as "accent 2, the gold". The names are wrong and the mapping is stable; that trade was made deliberately. BLUE + GOLD. Accent 1 moved from lacquer red to the royal blue of the coin's lotus, and the ground cooled a little without going cold -- gold needs a warm paper under it or it turns grey-green. The ink is navy rather than brown, so every heading, button and rule carries the blue too and the accent is not doing it alone. The always-dark tokens go back to being ACTUALLY dark: deep navy, which is where the gold has the most to push against and where the Kubera Life band gets to be the heavy moment of the page. */ :root{ --ground:#F2EFE6; --paper:#FBF9F3; --ink:#111C33; --ink-2:#2C3C57; --muted:#5F6B7E; --rule:#D8D5CB; --rule-strong:#ABA69A; --verdigris:#17408A; --verdigris-soft:#E4EAF6; --verdigris-mid:#2E5CB0; --saffron:#C9A227; --saffron-ink:#8A6414; --saffron-soft:#F5EAC9; --loss:#A33420; /* The "always dark" surfaces are NOT dark in the Temple direction. The mock is paper from top to bottom, and the two places that used these tokens -- the Kubera Life section and the Regulated Rich cell -- were the near-black bands making the page read heavy. They become a deeper paper instead, with ink text, so contrast comes from tone rather than from inversion. The names are kept for the same reason --verdigris is: too many rules point at them. */ --dark-ground:#0E1D38; --dark-paper:#16294A; --on-dark:#EEF3FB; --on-dark-muted:#A9BCD8; --dark-rule:#27406B; --shadow:0 1px 0 rgba(17,28,51,.06), 0 14px 34px -22px rgba(17,28,51,.45); /* Was .085 at 720px, centred on the whole hero, which put a petal edge behind every line of the lede -- the paragraph read as a heavy block partly because it was sitting on texture. Smaller, higher and fainter: it now backs the headline and clears the body copy. */ --mandala-op:.055; --radius:2px; --max:1120px; --measure:64ch; color-scheme:light; } /* There is deliberately NO @media (prefers-color-scheme:dark) block here. The palette is a paper one: warm ground, ink type, brass and lacquer, drawn to look like a printed page. Inverting it does not produce a night version of this brand, it produces a different brand -- the warmth that carries the whole design is the light itself, and there is no dark equivalent of "paper". The automatic block that used to live here was inherited from the original sage/teal palette, where inverting made sense, and it meant every visitor whose laptop was set to dark saw a near-black site nobody had designed. :root[data-theme="dark"] below is kept as an OPT-IN: nothing in the shipped UI sets the attribute, so it is reachable only on purpose. If a real dark treatment is ever wanted it should be designed as one, not derived by flipping these tokens. color-scheme:light in :root above also keeps form controls and scrollbars light, which matters for the embedded form. */ :root[data-theme="dark"]{ --ground:#0B1424; --paper:#12203A; --ink:#EAF0FA; --ink-2:#C3D2E8; --muted:#8FA3C0; --rule:#1E3357; --rule-strong:#2F4A78; --verdigris:#8FB4F0; --verdigris-soft:#14284A; --verdigris-mid:#A8C6F5; --saffron:#E0BC57; --saffron-ink:#EDD285; --saffron-soft:#3A2F12; --loss:#E08A74; --dark-ground:#08101D; --dark-paper:#101C33; --on-dark:#EAF0FA; --on-dark-muted:#8FA3C0; --dark-rule:#1C2E4E; --shadow:0 1px 0 rgba(0,0,0,.4), 0 12px 32px -20px rgba(0,0,0,.8); --mandala-op:.2; color-scheme:dark; } *{box-sizing:border-box} html{scroll-behavior:smooth} /* Jost is a geometric sans with a smaller apparent size than Source Sans 3, so the base goes up a point and the leading opens; geometric faces need more air than humanist ones to stay readable. */ body{margin:0;background:var(--ground);color:var(--ink);font-family:"Jost",-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;font-size:18px;line-height:1.62;font-weight:400;-webkit-font-smoothing:antialiased} /* Lighter and larger than before: the Temple direction leans on a delicate serif at display size, so the display weight drops to 400 and the tracking opens up slightly rather than tightening. */ /* Cormorant Garamond runs SMALL and LIGHT -- it is a display face cut for large sizes, so every step here is bigger and lighter than the equivalent would be in a workhorse serif. At 300 it is the whole look; below about 1.6rem it loses too much and h3/h4 go to 500. */ h1,h2,h3,h4{font-family:"Cormorant Garamond",Georgia,"Times New Roman",serif;font-weight:300;line-height:1.04;margin:0;text-wrap:balance;letter-spacing:0} h1{font-size:clamp(3.4rem,8.4vw,6.6rem);font-weight:300;line-height:.94} h2{font-size:clamp(2.4rem,4.8vw,3.8rem)} h3{font-size:1.62rem;font-weight:500} p{margin:0} a{color:inherit} .mono,.eyebrow,.num,.tape,.ledger td,.ledger th,.price .amt,.sched td:first-child,.cmp th.tier{font-family:"IBM Plex Mono","SFMono-Regular",Menlo,Consolas,monospace} .eyebrow{font-size:.7rem;letter-spacing:.32em;text-transform:uppercase;color:var(--saffron-ink);font-weight:500} .wrap{max-width:var(--max);margin:0 auto;padding:0 clamp(18px,4vw,40px)} .measure{max-width:var(--measure)} .lede{font-size:1.2rem;color:var(--ink-2);max-width:var(--measure)} section{padding:clamp(56px,8vw,104px) 0;border-top:1px solid var(--rule)} section.first{border-top:0} .section-head{display:grid;grid-template-columns:1fr;gap:14px;margin-bottom:40px} @media(min-width:860px){.section-head{grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:48px;align-items:end}} .section-head p{color:var(--ink-2);font-size:1.08rem;max-width:var(--measure)} /* nav */ .nav{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--ground) 88%,transparent);backdrop-filter:saturate(1.2) blur(10px);border-bottom:1px solid var(--rule)} .nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;height:64px} .brand{display:flex;align-items:baseline;gap:10px;text-decoration:none} .brand .k{font-family:"Cormorant Garamond",Georgia,serif;font-size:1.7rem;font-weight:500;letter-spacing:.03em} .brand .sub{font-size:.68rem;letter-spacing:.3em;text-transform:uppercase;color:var(--muted)} /* The lotus from favicon.svg, inlined so it can take the theme tokens -- the favicon paints the same five petals on a lacquer chip, which is right for a browser tab and wrong beside a wordmark on a light bar. The first cut of this read as an ACORN: petals 17 units wide at 26 degrees apart, so they overlapped into one solid mass, filled in three browns close enough in hue to look like a single object with a cap on it. Now they are 12 wide at 23 degrees, which leaves daylight between the tips, and the fill runs brass on the outside to lacquer at the centre so the eye reads five petals radiating rather than one lump. Widening the outer pair to 46 degrees opens the fan. viewBox crops the empty top and bottom: the petals occupy y 14-50 of the original 64. */ .brand .mark{flex:0 0 auto;align-self:center;display:block;height:30px;width:auto} @media(max-width:559px){.brand .mark{height:26px}} .nav ul{display:none;list-style:none;margin:0;padding:0;gap:26px} .nav ul a{text-decoration:none;font-size:.95rem;color:var(--ink-2)} .nav ul a:hover{color:var(--ink)} @media(min-width:860px){.nav ul{display:flex}} .btn{display:inline-flex;align-items:center;gap:8px;padding:12px 20px;border-radius:var(--radius);font-weight:600;font-size:.98rem;text-decoration:none;border:1px solid transparent;cursor:pointer;transition:transform .12s ease,background .12s ease;font-family:inherit;line-height:1} .btn:focus-visible{outline:3px solid var(--saffron);outline-offset:2px} /* Ink rather than brass. Brass at button size is closer to a warning than an invitation, and an ink block on warm paper is the printed-page gesture the rest of the look is built on. --ground as the foreground inverts correctly in dark mode, where --ink is the near-white. */ .btn.primary{background:var(--ink);color:var(--ground);border-color:var(--ink)} .btn.primary:hover{transform:translateY(-1px)} .btn.ghost{background:transparent;color:var(--ink);border-color:var(--rule-strong)} .btn.ghost:hover{border-color:var(--ink)} .btn.small{padding:9px 14px;font-size:.9rem} .btn.on-dark{color:var(--on-dark);border-color:var(--dark-rule)} /* hero -- centred, like the title page of a book. The rest of the page stays left-aligned on its grid: full symmetry everywhere would cost scanability in the sections that are read rather than looked at. The hero is the one place the composition is the argument. */ .hero{padding:clamp(48px,7vw,92px) 0 44px;border-top:0;position:relative;overflow:hidden} .hero-center{display:flex;flex-direction:column;align-items:center;text-align:center;position:relative;z-index:1} .hero-center .eyebrow{margin-top:20px} .hero-center h1{margin-top:18px;max-width:16ch} .hero-center .lede{margin-top:28px;max-width:58ch;font-size:1.22rem} .hero-center .fine{margin-top:18px;font-size:.88rem;color:var(--muted);max-width:52ch} .hero h1 em{font-style:italic;font-weight:400;color:var(--verdigris)} .hero .ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px;justify-content:center} .hero-mark{display:block;height:76px;width:auto} .hero-rule{width:84px;height:1px;background:var(--saffron);margin-top:32px} .hero-center .ledger{margin-top:clamp(40px,6vw,64px);width:100%;max-width:780px;text-align:left} /* The twelve-petal lotus sits behind the type as a watermark. currentColor + a token for opacity so it survives the theme flip: brass at 8.5% disappears on the dark ground, so dark mode takes it up to 20%. aria-hidden in the markup -- it carries no information. */ .hero-mandala{position:absolute;top:clamp(16px,3vw,40px);left:50%;transform:translateX(-50%);width:min(600px,96vw);color:var(--saffron);opacity:var(--mandala-op);pointer-events:none;z-index:0} .hero-mandala svg{display:block;width:100%;height:auto} .ledger{background:var(--paper);border:1px solid var(--rule);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden} .ledger table{width:100%;border-collapse:collapse;font-size:.86rem} .ledger th{padding:12px 16px;text-align:left;font-weight:500;font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);border-bottom:1px solid var(--rule)} .ledger th:first-child{width:50%;border-right:1px solid var(--rule)} .ledger td{padding:11px 16px;border-bottom:1px solid var(--rule);vertical-align:top;color:var(--ink-2)} .ledger td:first-child{border-right:1px solid var(--rule)} .ledger td .chk{display:inline-block;width:14px;height:14px;border:1.5px solid var(--verdigris);border-radius:3px;margin-right:8px;vertical-align:-2px;position:relative} .ledger td .chk.on{background:var(--verdigris)} .ledger td .chk.on::after{content:"";position:absolute;left:4px;top:1px;width:3px;height:7px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)} .ledger tfoot td{border-bottom:0;font-weight:600;color:var(--ink);background:var(--verdigris-soft)} .ledger tfoot td:last-child{text-align:right;color:var(--verdigris)} .ledger caption{caption-side:top;text-align:center;padding:16px 16px 8px;font-family:"Cormorant Garamond",Georgia,serif;font-size:1.4rem;font-weight:400;font-style:italic;color:var(--ink-2)} /* tape */ .tape-wrap{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);background:var(--paper);overflow:hidden;position:relative} .tape{display:flex;gap:0;white-space:nowrap;font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);padding:10px 0;width:max-content;animation:tape 48s linear infinite} .tape span{padding:0 22px;border-right:1px solid var(--rule)} .tape span b{color:var(--saffron-ink);font-weight:500} .tape span i{font-style:normal;color:var(--verdigris)} @keyframes tape{from{transform:translateX(0)}to{transform:translateX(-50%)}} @media(prefers-reduced-motion:reduce){.tape{animation:none;width:auto;white-space:normal;flex-wrap:wrap;row-gap:6px}.tape span{border:0}} /* quadrant */ .quad-grid{display:grid;grid-template-columns:1fr;gap:40px} @media(min-width:900px){.quad-grid{grid-template-columns:1fr 1fr;gap:56px;align-items:start}} .quad{display:grid;grid-template-columns:auto 1fr 1fr;grid-template-rows:1fr 1fr auto;gap:8px;font-size:.92rem} .quad .ax-y{grid-row:1/3;writing-mode:vertical-rl;transform:rotate(180deg);text-align:center;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);padding:0 4px;font-family:"IBM Plex Mono",monospace} .quad .ax-x{grid-column:2/4;text-align:center;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);padding-top:6px;font-family:"IBM Plex Mono",monospace} .cell{background:var(--paper);border:1px solid var(--rule);border-radius:var(--radius);padding:18px;min-height:150px;display:flex;flex-direction:column;gap:6px} .cell h4{font-size:1.15rem;font-weight:600} .cell p{font-size:.92rem;color:var(--ink-2)} .cell.goal{background:var(--ink);color:var(--on-dark);border-color:var(--ink)} .cell.goal p{color:var(--on-dark-muted)} .cell.goal h4{color:var(--saffron)} .cell .tag{font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-family:"IBM Plex Mono",monospace} .cell.goal .tag{color:var(--saffron)} .problems{display:grid;gap:22px} .problems div{border-left:2px solid var(--verdigris);padding-left:16px} .problems h3{font-size:1.1rem;margin-bottom:4px} .problems p{color:var(--ink-2)} /* guides */ .guides{display:grid;grid-template-columns:1fr;gap:24px} @media(min-width:760px){.guides{grid-template-columns:1fr 1fr}} .guide{background:var(--paper);border:1px solid var(--rule);border-radius:var(--radius);padding:24px;display:grid;grid-template-columns:88px 1fr;gap:20px} .avatar{width:88px;height:88px;border-radius:50%;background:var(--verdigris-soft);color:var(--verdigris);display:grid;place-items:center;overflow:hidden;font-family:"Cormorant Garamond",Georgia,serif;font-size:2.4rem;font-weight:500} .avatar img{width:100%;height:100%;object-fit:cover;object-position:50% 50%;display:block;border-radius:50%} .guide h3{margin-bottom:4px} .guide .role{font-size:.8rem;color:var(--muted);margin-bottom:10px} .guide p{font-size:.98rem;color:var(--ink-2)} .guide p+p{margin-top:14px} .cred{margin-top:32px;display:grid;grid-template-columns:1fr;gap:10px 28px;padding:20px 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)} @media(min-width:760px){.cred{grid-template-columns:1fr 1fr}} .cred div{display:flex;gap:12px;align-items:flex-start;font-size:.98rem;color:var(--ink-2)} .cred div::before{content:"";flex:0 0 8px;height:8px;margin-top:9px;background:var(--saffron);border-radius:1px} .honest{margin-top:22px;font-size:.95rem;color:var(--muted);max-width:var(--measure)} /* plan */ .plan{display:grid;grid-template-columns:1fr;gap:0;border-top:1px solid var(--rule)} .step{display:grid;grid-template-columns:64px 1fr;gap:20px;padding:26px 0;border-bottom:1px solid var(--rule)} .step .n{font-family:"IBM Plex Mono",monospace;color:var(--saffron-ink);font-size:.9rem;padding-top:6px} .step h3{margin-bottom:6px} .step p{color:var(--ink-2);max-width:var(--measure)} /* features */ .feat{display:grid;grid-template-columns:1fr;gap:1px;background:var(--rule);border:1px solid var(--rule);border-radius:var(--radius);overflow:hidden} @media(min-width:700px){.feat{grid-template-columns:1fr 1fr}} @media(min-width:1000px){.feat{grid-template-columns:1fr 1fr 1fr}} .feat div{background:var(--paper);padding:22px 22px 24px} .feat h3{font-size:1.12rem;margin-bottom:6px} .feat p{font-size:.95rem;color:var(--ink-2)} .feat .tier{display:inline-block;margin-top:10px;font-family:"IBM Plex Mono",monospace;font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--verdigris);border:1px solid var(--verdigris-soft);padding:3px 8px;border-radius:3px} /* life (dark) */ .life{background:var(--dark-ground);color:var(--on-dark);border-top:1px solid var(--rule)} /* Brass on deep paper is too light to read; the darker brass is the text-weight version of it. Same for the session times, which were painted --saffron on what used to be a near-black band. */ .life .eyebrow{color:var(--saffron-ink)} .sessions .when{color:var(--saffron-ink)} .life .section-head p{color:var(--on-dark-muted)} .life-grid{display:grid;grid-template-columns:1fr;gap:40px} @media(min-width:900px){.life-grid{grid-template-columns:1.1fr .9fr;gap:64px;align-items:center}} .life .body p{color:var(--on-dark-muted);margin-bottom:16px;max-width:var(--measure)} .life .body strong{color:var(--on-dark)} .sessions{display:grid;gap:12px;margin-top:22px} .sessions > div{border:1px solid var(--dark-rule);background:var(--dark-paper);border-radius:var(--radius);padding:14px 16px;display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:baseline} .sessions > div > div{display:block} .sessions .when{font-family:"IBM Plex Mono",monospace;font-size:.78rem;color:var(--saffron);letter-spacing:.06em} .sessions b{display:block;color:var(--on-dark)} .sessions span{font-size:.9rem;color:var(--on-dark-muted)} .pacer{background:var(--dark-paper);border:1px solid var(--dark-rule);border-radius:var(--radius);padding:28px;display:grid;justify-items:center;gap:16px;text-align:center} .pacer .orb{width:170px;height:170px;border-radius:50%;background:radial-gradient(circle at 40% 35%,rgba(220,180,74,.55),rgba(220,180,74,.12) 60%,transparent 72%);border:1px solid rgba(220,180,74,.35);display:grid;place-items:center;transition:transform 1s linear} .pacer .orb{background:radial-gradient(circle at 40% 35%,rgba(160,73,47,.3),rgba(201,162,39,.16) 58%,transparent 72%);border-color:rgba(160,73,47,.32)} .pacer .orb span{font-family:"Cormorant Garamond",Georgia,serif;font-style:italic;font-weight:400;font-size:1.65rem;color:var(--ink)} .pacer .count{font-family:"IBM Plex Mono",monospace;font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:var(--on-dark-muted);min-height:1.2em} .pacer p{font-size:.92rem;color:var(--on-dark-muted);max-width:36ch} /* pricing */ .toggle{display:inline-flex;border:1px solid var(--rule-strong);border-radius:999px;padding:3px;gap:2px;background:var(--paper)} .toggle button{border:0;background:transparent;padding:8px 16px;border-radius:999px;font:inherit;font-weight:600;font-size:.9rem;color:var(--muted);cursor:pointer} .toggle button[aria-pressed="true"]{background:var(--ink);color:var(--ground)} .toggle button:focus-visible{outline:3px solid var(--saffron)} .founding{display:inline-flex;align-items:center;gap:10px;background:var(--saffron-soft);color:var(--saffron-ink);border-radius:var(--radius);padding:10px 14px;font-size:.92rem;font-weight:500} .tiers{display:grid;grid-template-columns:1fr;gap:20px;margin-top:28px} @media(min-width:900px){.tiers{grid-template-columns:repeat(3,1fr);align-items:stretch}} .price{background:var(--paper);border:1px solid var(--rule);border-radius:var(--radius);padding:26px;display:flex;flex-direction:column;gap:18px} .price.featured{border-color:var(--verdigris);box-shadow:var(--shadow);position:relative} .price.featured::before{content:"Most members";position:absolute;top:-11px;left:22px;background:var(--verdigris);color:#fff;font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;padding:4px 10px;border-radius:3px;font-family:"IBM Plex Mono",monospace} .price .who{font-size:.92rem;color:var(--muted);min-height:2.8em} .price .amt{font-size:2.4rem;font-weight:500;letter-spacing:-.02em;line-height:1} .price .amt small{font-size:.9rem;color:var(--muted);letter-spacing:0;margin-left:4px;font-family:"Jost",sans-serif} .price .std{font-size:.85rem;color:var(--muted)} .price .std s{color:var(--muted)} .price ul{list-style:none;margin:0;padding:0;display:grid;gap:9px;font-size:.95rem;color:var(--ink-2)} .price li{display:flex;gap:10px} .price li::before{content:"";flex:0 0 6px;height:6px;border-radius:50%;background:var(--verdigris);margin-top:9px} .price li.plus::before{background:var(--saffron)} .price .seats{font-family:"IBM Plex Mono",monospace;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--saffron-ink)} .price .btn{margin-top:auto;justify-content:center} .addons{display:grid;grid-template-columns:1fr;gap:1px;background:var(--rule);border:1px solid var(--rule);border-radius:var(--radius);overflow:hidden;margin-top:24px} @media(min-width:800px){.addons{grid-template-columns:repeat(4,1fr)}} .addons div{background:var(--paper);padding:18px} .addons b{display:block;margin-bottom:4px} .addons .amt{font-family:"IBM Plex Mono",monospace;color:var(--saffron-ink);font-size:.85rem;display:block;margin-bottom:6px} .addons p{font-size:.9rem;color:var(--ink-2)} .pricing-note{margin-top:18px;font-size:.9rem;color:var(--muted);max-width:var(--measure)} /* schedule */ .sched{width:100%;border-collapse:collapse;background:var(--paper);border:1px solid var(--rule);border-radius:var(--radius);overflow:hidden;font-size:.95rem} .sched-wrap{overflow-x:auto} .sched th{text-align:left;padding:12px 16px;font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:500;border-bottom:1px solid var(--rule)} .sched td{padding:12px 16px;border-bottom:1px solid var(--rule);vertical-align:top;color:var(--ink-2)} .sched td:first-child{white-space:nowrap;font-size:.85rem;color:var(--ink)} .sched td b{color:var(--ink)} .sched tr:last-child td{border-bottom:0} .sched .life-row td:first-child{color:var(--saffron-ink)} /* faq */ .faq{display:grid;gap:0;border-top:1px solid var(--rule)} .faq details{border-bottom:1px solid var(--rule)} .faq summary{cursor:pointer;padding:18px 0;font-family:"Cormorant Garamond",Georgia,serif;font-size:1.6rem;font-weight:500;list-style:none;display:flex;justify-content:space-between;gap:20px;align-items:baseline} .faq summary::-webkit-details-marker{display:none} .faq summary::after{content:"+";font-family:"IBM Plex Mono",monospace;color:var(--verdigris);flex:0 0 auto} .faq details[open] summary::after{content:"–"} .faq summary:focus-visible{outline:3px solid var(--saffron);outline-offset:-3px} .faq .a{padding:0 0 20px;color:var(--ink-2);max-width:var(--measure)} /* cta / form */ .cta{background:var(--paper)} .cta-grid{display:grid;grid-template-columns:1fr;gap:36px} @media(min-width:900px){.cta-grid{grid-template-columns:1fr 1fr;gap:64px;align-items:start}} .lead{display:grid;gap:14px;background:var(--ground);border:1px solid var(--rule);border-radius:var(--radius);padding:24px} /* No resize script runs against this iframe (ORC-429), so the height is ours to declare, and too little of it hides the submit button rather than merely cropping whitespace -- the box does not scroll on its own. The GoHighLevel form gets TALLER as it gets NARROWER, because its two consent paragraphs rewrap. Measured against the live widget (document.body.scrollHeight at a given iframe width): iframe width 234 289 330 392 438 502 620 height needed 1256 1095 995 920 875 828 795 The trap is at 900px, where .cta-grid goes two-column: the card does not keep growing with the viewport, it HALVES, from 502px straight down to 332px. The height has to jump back UP there, not down. Each step below declares what its own NARROWEST card needs, plus ~25px of slack. Card width per viewport, measured on the page itself, since the wrap padding is not constant: vp 320->234 375->289 480->392 600->502 760->649 900->332 1280->438 Those seven points are all one formula, and the ladder is built from it rather than from them: one column (vp < 900) w = vp - 2*pad - 50 two columns (vp >= 900) w = (min(vp,1120) - 2*pad - 64) / 2 - 50 pad is .wrap's clamp(18px,4vw,40px), 50 is .lead's 24px padding either side plus its 1px borders, 64 is the .cta-grid gap. A second, quieter breakpoint falls out of it: at 1120px the wrap reaches its own max-width, so the card stops growing at 438px and nothing wider needs a different height. The first ladder stepped only at 400/480/600/900/1200, which is too coarse for a curve this steep at the narrow end -- every band was sized for its narrowest viewport, leaving 185px of empty box at 375px and 145px at 1199px. Hence the steps below. Whatever slack is left is painted --ground, the same colour as the .lead card around it, so a few spare pixels read as padding instead of a pale rectangle hanging below the form. Re-measure the height table if the form gains or loses a field; the width formula only changes if the layout does. */ .lead-embed iframe{display:block;width:100%;height:1280px;border:0;border-radius:var(--radius);background:var(--ground)} @media(min-width:360px){.lead-embed iframe{height:1165px}} @media(min-width:400px){.lead-embed iframe{height:1060px}} @media(min-width:440px){.lead-embed iframe{height:990px}} @media(min-width:480px){.lead-embed iframe{height:945px}} @media(min-width:560px){.lead-embed iframe{height:880px}} @media(min-width:680px){.lead-embed iframe{height:830px}} @media(min-width:780px){.lead-embed iframe{height:805px}} /* two-column starts here: the card halves in width, so the height goes back UP */ @media(min-width:900px){.lead-embed iframe{height:1020px}} @media(min-width:960px){.lead-embed iframe{height:985px}} @media(min-width:1040px){.lead-embed iframe{height:940px}} /* the wrap has hit its max-width by here, so the card is 438px wide from now on */ @media(min-width:1100px){.lead-embed iframe{height:910px}} .lead .consent{font-size:.78rem;color:var(--muted)} .gets{display:grid;gap:12px;margin-top:20px} .gets div{display:flex;gap:12px;color:var(--ink-2)} .gets div::before{content:"";flex:0 0 8px;height:8px;margin-top:9px;background:var(--saffron);border-radius:1px} /* footer */ footer{border-top:1px solid var(--rule);padding:48px 0 40px;font-size:.82rem;color:var(--muted)} footer .cols{display:grid;grid-template-columns:1fr;gap:28px} @media(min-width:860px){footer .cols{grid-template-columns:1.6fr 1fr}} footer h4{font-family:"IBM Plex Mono",monospace;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:10px;font-weight:500} footer p{margin-bottom:12px;max-width:80ch} footer ul{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:16px} footer a{color:var(--ink-2)} .toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);opacity:0;background:var(--ink);color:var(--ground);padding:12px 18px;border-radius:var(--radius);font-size:.95rem;pointer-events:none;transition:all .25s} .toast.show{opacity:1;transform:translate(-50%,0)} /* pricing page extras */ .cmp-wrap{overflow-x:auto;margin-top:36px;border:1px solid var(--rule);border-radius:var(--radius);background:var(--paper)} .cmp{width:100%;border-collapse:collapse;min-width:720px;font-size:.95rem} .cmp th,.cmp td{padding:12px 16px;border-bottom:1px solid var(--rule);text-align:left;vertical-align:top} .cmp th{font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:500} .cmp th.tier{font-size:.78rem;letter-spacing:.06em;color:var(--ink);text-transform:none} .cmp td.c{text-align:center;color:var(--verdigris);font-family:"IBM Plex Mono",monospace} .cmp td.c.no{color:var(--rule-strong)} .cmp td.c.txt{font-size:.82rem;color:var(--ink-2)} .cmp tr.group td{background:var(--ground);font-family:"IBM Plex Mono",monospace;font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)} .cmp tr:last-child td{border-bottom:0} .billing{display:grid;grid-template-columns:1fr;gap:20px} @media(min-width:800px){.billing{grid-template-columns:1fr 1fr 1fr}} .billing div{border-left:2px solid var(--verdigris);padding-left:16px} .billing h3{font-size:1.1rem;margin-bottom:6px} .billing p{color:var(--ink-2);font-size:.95rem} .page-hero{padding:clamp(48px,6vw,80px) 0 24px;border-top:0} .page-hero .lede{margin-top:14px} /* ---- ORC-364 fixes: dark-mode contrast ----------------------------------- */ /* Three ported rules paint a themed surface with a colour that does not invert with it, so they only hold up in light mode. Overridden here rather than edited above, so everything above this line stays byte-identical to the artifact it was ported from. */ /* The goal cell was `background:var(--ink); color:var(--on-dark)`. --ink flips to near-white in dark mode while --on-dark stays near-white, so "Quiet Wealth" -- the one state the section is selling -- rendered as pale grey text on a near-white card. --dark-paper/--on-dark are the token pair that means "an always-dark surface" (it is what .life uses) and they are redefined sensibly in both themes. */ /* Quiet Wealth is the one square the section is selling, so it keeps the strongest treatment on the page: a solid lacquer fill. It used --dark-paper, which is now a paper tone and would have left the goal cell indistinguishable from the three failure states beside it. */ .cell.goal{background:var(--verdigris);color:#F6EDE2;border-color:var(--verdigris)} .cell.goal p{color:#EBD8CC} .cell.goal h4{color:#F0D9A0} .cell.goal .tag{color:#E9C579} /* White on --verdigris is fine over the light-mode teal (#2E6B61) and close to illegible over the dark-mode mint (#6FB5A6). --ground is the page surface, so using it as the foreground here is a real inversion in both themes. */ .price.featured::before{color:var(--ground)} .ledger td .chk.on::after{border-color:var(--ground)} /* ---- Blue + gold: the always-dark band ----------------------------------- */ /* The Kubera Life section and the breath pacer were rebuilt for a PAPER --dark-ground. It is a deep navy again, so the places that painted text in the dark gold -- the one drawn to sit on paper -- need the bright gold instead, and the orb's lacquer wash becomes gold over blue. Without these three the band ships with dark-brass text on navy, which is unreadable. */ .life .eyebrow{color:var(--saffron)} .sessions .when{color:var(--saffron)} .pacer .orb{background:radial-gradient(circle at 40% 35%,rgba(201,162,39,.30),rgba(46,92,176,.24) 58%,transparent 72%);border-color:rgba(201,162,39,.38)} .pacer .orb span{color:var(--on-dark)} /* The goal cell is now a royal blue fill, so its text colours move from warm creams to cool ones and the heading takes the gold -- the same pairing the coin uses. */ .cell.goal{background:var(--verdigris);color:#EEF3FB;border-color:var(--verdigris)} .cell.goal p{color:#C6D6EE} .cell.goal h4{color:#F0D488} .cell.goal .tag{color:#E7C264} /* The mark is a struck coin with its own edge shadow now, so it wants to sit ON the bar rather than in it. Small enough to read as weight, not as a web drop-shadow. */ .brand .mark,.hero-mark{filter:drop-shadow(0 2px 4px rgba(17,28,51,.20))} /* ---- The wordmark ---------------------------------------------------------- */ /* Fraunces for "Kubera Life" in the nav, and ONLY there -- every heading on the site stays Cormorant. The two faces are close enough in genre to sit on one page and different enough that the lockup reads as a mark rather than as a line of the same type as the headings. The size drops from 1.7rem to 1.34rem and the tracking from .03em to .005em: Fraunces has a much larger x-height and heavier stems than Cormorant, so matching it by point size would have made the wordmark noticeably bigger and looser than the one it replaces. These numbers match the two optically, not numerically. */ .brand .k{font-family:"Fraunces",Georgia,"Times New Roman",serif;font-size:1.34rem;font-weight:600;letter-spacing:.005em} @media(max-width:559px){.brand .k{font-size:1.2rem}} /* Mobile header lockup. The nav CTA was wrapping to two or three lines at every width below 860px, which pushed the bar tall and squeezed the brand until the wordmark broke too. Nothing in the lockup or the CTA may wrap. */ .brand .k,.brand .sub{white-space:nowrap} .nav .btn.small{white-space:nowrap} @media(max-width:859px){ .brand{align-items:center;gap:8px} .nav .btn.small{padding:.55rem .85rem;font-size:.85rem} } @media(min-width:700px) and (max-width:859px){.brand .sub{font-size:.6rem;letter-spacing:.16em}} /* ---- Kubera Life section: layout ----------------------------------------- */ /* The text column runs about 450 words and the pacer card is ~430px tall, so align-items:center parked the card in the vertical middle of a column three times its height. That produced a ~900px void at the top of the right column, a second one below it, and put the only interactive element on the page below the fold of its own section. The card now starts at the top and STICKS while the argument scrolls past it, so it is on screen for the whole section and the right column is never empty. 88px clears the 64px sticky nav. */ @media(min-width:900px){ .life-grid{align-items:start} .pacer{position:sticky;top:88px} } /* The two sessions are the concrete offer in this section and they were the last item INSIDE the left text column, indented under all that argument and easy to miss. They now sit full width below both columns, two across, behind a rule -- a schedule rather than a footnote. Moved in the markup; only the spacing and the second column are new here. */ .sessions{margin-top:clamp(40px,6vw,64px);padding-top:30px;border-top:1px solid var(--dark-rule);gap:16px} @media(min-width:760px){.sessions{grid-template-columns:1fr 1fr}} .sessions > div{padding:18px 20px;align-items:start} /* Five paragraphs set identically gave the reader no way in. The first one carries the argument, so it takes the size and the full-strength ink and the rest read as its support. */ .life .body > p:first-child{font-size:1.12rem;color:var(--on-dark)} .life .body p{margin-bottom:18px} .life .body p:last-child{margin-bottom:0} /* ---- ORC-364 follow-up: 404 ---------------------------------------------- */ .notfound{padding:clamp(64px,11vw,132px) 0} .notfound .ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px} .notfound .where{margin-top:40px;padding-top:24px;border-top:1px solid var(--rule);max-width:var(--measure)} .notfound .where ul{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:10px} .notfound .where a{color:var(--ink-2)} .notfound .where a:hover{color:var(--ink)} /* ---- ORC-364 follow-up: mobile menu -------------------------------------- */ /* The ported nav hides its links below 860px and shipped no way to open them, so on a phone /pricing was reachable only from the footer. The toggle is display:none until app.js sets data-menu on the nav, so a JS-less visitor never sees a button that cannot do anything. */ .navtoggle{display:none;align-items:center;justify-content:center;flex:0 0 auto;width:42px;height:42px;padding:0;border:1px solid var(--rule-strong);border-radius:var(--radius);background:transparent;color:var(--ink);cursor:pointer} .navtoggle:focus-visible{outline:3px solid var(--saffron);outline-offset:2px} .navtoggle span,.navtoggle span::before,.navtoggle span::after{display:block;width:18px;height:2px;border-radius:2px;background:currentColor} .navtoggle span{position:relative;transition:background-color .18s ease} .navtoggle span::before,.navtoggle span::after{content:"";position:absolute;left:0;transition:top .18s ease,transform .18s ease} .navtoggle span::before{top:-6px} .navtoggle span::after{top:6px} .nav[data-menu="open"] .navtoggle span{background:transparent} .nav[data-menu="open"] .navtoggle span::before{top:0;transform:rotate(45deg)} .nav[data-menu="open"] .navtoggle span::after{top:0;transform:rotate(-45deg)} @media(prefers-reduced-motion:reduce){.navtoggle span,.navtoggle span::before,.navtoggle span::after{transition:none}} @media(max-width:859px){ .nav[data-menu] .navtoggle{display:inline-flex} /* Push the CTA and the toggle together on the right instead of letting space-between spread three items evenly across the bar. */ .nav[data-menu] .brand{margin-right:auto} .nav .wrap{position:relative} /* The panel drops out of the sticky bar, so it needs an opaque surface of its own -- the bar itself is half-transparent with a backdrop-filter. */ .nav[data-menu="open"] ul{display:block;position:absolute;top:100%;left:0;right:0;padding:4px clamp(18px,4vw,40px) 8px;background:var(--paper);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);box-shadow:var(--shadow)} .nav[data-menu="open"] ul li+li{border-top:1px solid var(--rule)} .nav[data-menu="open"] ul a{display:block;padding:15px 0;font-size:1.02rem;color:var(--ink)} .nav[data-menu="open"] ul a[aria-current="page"]{color:var(--verdigris);font-weight:600} } /* Below 560px the bar cannot hold the brand tagline, the CTA and the toggle at once; the tagline is the one of the three that carries no action. */ /* Mobile lockup. Rather than hide the triad on small screens, stack it: a larger coin carries the bar, the wordmark gets its own line, and WEALTH HEALTH WISDOM reads as a gold strapline beneath it, echoing the coin instead of competing with the wordmark for horizontal room. */ @media(max-width:699px){ .nav .brand{display:grid;grid-template-columns:auto minmax(0,auto);column-gap:13px;row-gap:6px;align-items:center} .nav .brand .mark{grid-column:1;grid-row:1 / span 2;height:40px;align-self:center} .nav .brand .k{grid-column:2;grid-row:1;align-self:end;line-height:1;font-size:1.3rem} .nav .brand .sub{grid-column:2;grid-row:2;display:block;align-self:start;font-size:.52rem;letter-spacing:.2em;line-height:1;color:var(--saffron-ink);white-space:nowrap} } /* Below 430 the nav CTA stands down so the lockup owns the row. Nothing is lost: the hero's own guide button is immediately below, and the footer keeps a link. */ @media(max-width:429px){ .nav .btn.small{display:none} .nav .brand .mark{height:38px} .nav .brand .k{font-size:1.2rem} .nav .brand .sub{font-size:.46rem;letter-spacing:.14em} } @media(max-width:359px){ .nav .brand .mark{height:34px} .nav .brand .k{font-size:1.1rem} .nav .brand .sub{font-size:.42rem;letter-spacing:.1em} } /* ---- ORC-364 additions: pre-launch states -------------------------------- */ /* The lead form and the checkout buttons are deliberately not live before doors open on 23 September. These rules make that state visible rather than silent. */ .prelaunch{margin-top:22px;padding:12px 16px;border:1px solid var(--saffron);border-left-width:3px;border-radius:var(--radius);background:var(--saffron-soft);color:var(--saffron-ink);font-size:.92rem;max-width:var(--measure)} .prelaunch b{font-weight:600} /* Terms and Privacy do not exist yet (ORC-364 item 8) -- the slot is reserved, not linked. */ footer .pending{color:var(--muted);cursor:default} footer .pending i{font-style:normal;font-size:.72em;letter-spacing:.08em;text-transform:uppercase;margin-left:6px;opacity:.75}