/* ── Global typography ────────────────────────────────────────────── Set on the elements themselves (not only via utility classes) so every node on the page inherits the right family, including elements that browsers do NOT inherit fonts into by default (button, input, textarea). */ :root { --font-sans: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-serif: "Cormorant Garamond", "Iowan Old Style", "Palatino Linotype", Georgia, "Times New Roman", serif; } html, body { font-family: var(--font-sans); } h1, h2, h3, h4, h5, h6, .font-serif { font-family: var(--font-serif); } /* Form controls and buttons don't inherit font-family on their own. */ button, input, select, textarea, optgroup { font-family: inherit; font-size: inherit; line-height: inherit; } /* Never let the browser fake a bold or an italic — load the real cut instead. */ body { font-synthesis-weight: none; font-synthesis-style: none; } /* Optical polish for the display serif. */ .font-serif, h1, h2, h3, h4, h5, h6 { font-feature-settings: "liga" 1, "kern" 1; letter-spacing: -0.005em; } body { text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; } [x-cloak] { display: none !important; } /* carries the .tt scope, so Tailwind utilities no longer apply to it — its own behaviour is set here instead. */ html { scroll-padding-top: 5.5rem; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } /* Subtle paper grain over the whole page */ body::before { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 1; opacity: .035; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E"); } .reveal { opacity: 0; } .reveal.is-in { animation: rise .7s cubic-bezier(.2,.7,.3,1) both; } @media (prefers-reduced-motion: reduce) { .reveal, .reveal.is-in { opacity: 1 !important; animation: none !important; } * { scroll-behavior: auto !important; } } /* Tailwind's `animate-rise` keyframes, so the hero animates even before the CDN runtime has finished compiling. */ @keyframes rise { 0% { opacity: 0; transform: translateY(18px); } 100% { opacity: 1; transform: translateY(0); } } .no-scrollbar::-webkit-scrollbar { display: none; } .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; } /* ── WordPress integration ─────────────────────────────────────────── */ /* The admin bar pushes the document down; keep the sticky header under it. */ .admin-bar .site-header--sticky { top: 32px; } @media screen and (max-width: 782px) { .admin-bar .site-header--sticky { top: 46px; } } .admin-bar { scroll-padding-top: 7.5rem; } /* Menu items rendered by wp_nav_menu carry
  • wrappers the design has no styling for — the utility classes live on the anchors instead. */ .nav-menu, .nav-menu li { list-style: none; margin: 0; padding: 0; } /* Underscores' screen-reader helper, kept reachable for the skip link. */ .screen-reader-text { border: 0; clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; word-wrap: normal !important; } .screen-reader-text:focus { background-color: #fff; clip-path: none; color: #241812; display: block; font-size: .875rem; font-weight: 700; height: auto; left: 5px; line-height: normal; padding: 15px 23px 14px; text-decoration: none; top: 5px; width: auto; z-index: 100000; } /* Elementor's editor canvas should not fight the page background. */ .elementor-editor-active body { background-color: #F8F4EF; } /* ── Long-form content ───────────────────────────────────────────────── The Tailwind CDN build does not ship the typography plugin, so `prose` does not exist. Post and page bodies use .tt-prose instead. */ .tt-prose { color: rgba(36, 24, 18, .82); font-size: 1.0625rem; line-height: 1.75; } .tt-prose > * + * { margin-top: 1.25em; } .tt-prose h1, .tt-prose h2, .tt-prose h3, .tt-prose h4 { color: #241812; font-family: var(--font-serif); font-weight: 700; line-height: 1.25; margin-top: 2em; margin-bottom: .6em; } .tt-prose h1 { font-size: 2.25rem; } .tt-prose h2 { font-size: 1.875rem; } .tt-prose h3 { font-size: 1.5rem; } .tt-prose h4 { font-size: 1.25rem; } .tt-prose a { color: #9A4C21; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; } .tt-prose a:hover { color: #7C3A19; } .tt-prose strong { color: #241812; font-weight: 600; } .tt-prose ul, .tt-prose ol { padding-left: 1.4em; } .tt-prose ul { list-style: disc; } .tt-prose ol { list-style: decimal; } .tt-prose li { margin-top: .4em; } .tt-prose li::marker { color: #B4622F; } .tt-prose blockquote { border-left: 3px solid #B4622F; padding: .25em 0 .25em 1.25em; font-family: var(--font-serif); font-size: 1.25rem; font-style: italic; color: rgba(36, 24, 18, .75); } .tt-prose img, .tt-prose iframe, .tt-prose video { border-radius: 1rem; max-width: 100%; height: auto; } .tt-prose figure { margin-top: 2em; margin-bottom: 2em; } .tt-prose figcaption { font-size: .8125rem; color: rgba(36, 24, 18, .55); text-align: center; margin-top: .75em; } .tt-prose code { background: #F6E9DF; border-radius: .375rem; padding: .15em .4em; font-size: .875em; } .tt-prose pre { background: #241812; color: #F8F4EF; border-radius: 1rem; padding: 1.25rem; overflow-x: auto; font-size: .875rem; } .tt-prose pre code { background: none; padding: 0; } .tt-prose hr { border: 0; border-top: 1px solid #EACFBA; margin: 2.5em 0; } .tt-prose table { width: 100%; border-collapse: collapse; font-size: .9375rem; } .tt-prose th, .tt-prose td { border: 1px solid #EACFBA; padding: .6em .8em; text-align: left; } .tt-prose th { background: #F6E9DF; font-weight: 600; } /* ── Comments ────────────────────────────────────────────────────────── wp_list_comments() and comment_form() emit their own markup, so the utility classes cannot all be passed in — these fill the gaps. */ .comment-list, .comment-list ol { list-style: none; margin: 0; padding: 0; } .comment-list ol.children { margin-top: 1.5rem; padding-left: 1.5rem; } .comment-list .comment-body { background: #fff; border-radius: 1.5rem; box-shadow: 0 1px 2px rgba(0, 0, 0, .04); outline: 1px solid #F6E9DF; padding: 1.5rem; } .comment-list .comment-meta { align-items: center; display: flex; flex-wrap: wrap; gap: .75rem; margin-bottom: .75rem; } .comment-list .comment-author img { border-radius: 9999px; margin-right: .625rem; vertical-align: middle; } .comment-list .comment-author .fn { font-style: normal; font-weight: 700; color: #241812; } .comment-list .comment-author .says { display: none; } .comment-list .comment-metadata, .comment-list .comment-metadata a { color: rgba(36, 24, 18, .45); font-size: .75rem; text-decoration: none; } .comment-list .comment-content { color: rgba(36, 24, 18, .8); line-height: 1.7; } .comment-list .comment-content > * + * { margin-top: .75em; } .comment-list .reply a, .comment-respond .comment-reply-title small a { color: #9A4C21; font-size: .75rem; font-weight: 700; text-decoration: none; } .comment-list .reply { margin-top: 1rem; } .comment-respond .comment-form { display: grid; gap: 1.25rem; } .comment-respond .comment-form p { margin: 0; } @media (min-width: 640px) { .comment-respond .comment-form { grid-template-columns: repeat(2, minmax(0, 1fr)); } .comment-respond .comment-form-comment, .comment-respond .comment-notes, .comment-respond .comment-form-cookies-consent, .comment-respond .form-submit { grid-column: 1 / -1; } } .comment-respond .comment-form-cookies-consent { align-items: center; color: rgba(36, 24, 18, .6); display: flex; font-size: .8125rem; gap: .5rem; } .comment-respond .comment-form-cookies-consent input { accent-color: #B4622F; }