@font-face { font-family: Outfit; font-style: normal; font-weight: 100 900; font-display: swap; src: url('/tavyo-resources/outfit-latin.woff2') format('woff2'); }
/* Standalone editorial surfaces share the approved premium marketing tokens. */
:root { --intro-bg: #11181f; --intro-ink: #f6f3ee; --intro-muted: #afb8c2; --intro-accent: #f6b987; --intro-rule: #ffffff1a; --intro-surface: #172129; --intro-action-ink: #182028; --intro-focus: #ffbf91; --font-display: Outfit, system-ui, sans-serif; --font-size-sm: .9375rem; --font-size-md: 1.125rem; --font-size-lg: 1.375rem; --font-size-xl: 2rem; --space-1: .5rem; --space-2: 1rem; --space-3: 1.5rem; --space-4: 2rem; --space-6: 3rem; --space-8: 4rem; --intro-card-radius: 1rem; }
* { box-sizing: border-box; } html { scroll-behavior: auto; color-scheme: dark; } body { margin: 0; background: var(--intro-bg); color: var(--intro-ink); font: 400 var(--font-size-md)/1.75 var(--font-display); -webkit-font-smoothing: antialiased; } a { color: inherit; text-underline-offset: .2em; } a:focus-visible { outline: 2px solid var(--intro-focus); outline-offset: .35rem; } h1, h2, p { margin-top: 0; } h1, h2 { font-weight: 500; line-height: 1.18; letter-spacing: -.025em; } h1 { font-size: clamp(2.25rem, 4.3vw, 3.75rem); } h2 { font-size: var(--font-size-xl); } p { margin-bottom: var(--space-3); } .resource-width { width: min(76rem, calc(100% - 3rem)); margin-inline: auto; }
.resource-skip { position: absolute; inset-inline-start: var(--space-2); top: -10rem; background: var(--intro-ink); color: var(--intro-bg); padding: var(--space-2); z-index: 2; } .resource-skip:focus { top: var(--space-2); } .resource-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding-block: var(--space-3); border-bottom: 1px solid var(--intro-rule); } .resource-header svg { display: block; } .resource-header nav, .resource-footer nav { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-3); } .resource-header a, .resource-footer a { text-decoration: none; } .resource-header nav a, .resource-footer nav a { min-height: 2.75rem; display: inline-flex; align-items: center; } .resource-header nav { font-size: var(--font-size-sm); }
.resource-button { display: inline-flex; justify-content: center; align-items: center; gap: var(--space-2); padding: .8rem 1.5rem; border-radius: 100rem; background: var(--intro-accent); color: var(--intro-action-ink); text-decoration: none; font-weight: 500; min-height: 3rem; white-space: nowrap; } .resource-button:hover { background: var(--intro-ink); } .resource-eyebrow { color: var(--intro-accent); font-size: .8125rem; font-weight: 500; letter-spacing: .13em; text-transform: uppercase; margin-bottom: var(--space-2); } .resource-index-heading { padding-block: var(--space-8); max-width: 48rem; } .resource-index-heading > p:last-child { color: var(--intro-muted); font-size: var(--font-size-lg); }
.resource-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); } .resource-card { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4); border: 1px solid var(--intro-rule); border-radius: var(--intro-card-radius); background: var(--intro-surface); text-decoration: none; } .resource-card h2 { font-size: var(--font-size-lg); margin-bottom: 0; } .resource-card p { font-size: var(--font-size-sm); color: var(--intro-muted); margin-bottom: 0; } .resource-card .resource-eyebrow { margin-bottom: 0; } .resource-card-action { margin-top: auto; padding-top: var(--space-2); color: var(--intro-accent); font-size: var(--font-size-sm); } .resource-card:hover { border-color: var(--intro-accent); } .resource-card:hover h2 { text-decoration: underline; text-underline-offset: .15em; }
.resource-breadcrumbs { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-block: var(--space-4); font-size: var(--font-size-sm); color: var(--intro-muted); } .resource-article { max-width: 46rem; margin-inline: auto; padding-top: var(--space-3); } .resource-article header { padding-bottom: var(--space-4); margin-bottom: var(--space-4); border-bottom: 1px solid var(--intro-rule); } .resource-deck { color: var(--intro-muted); font-size: var(--font-size-lg); } .resource-meta { display: flex; flex-wrap: wrap; gap: var(--space-1); font-size: var(--font-size-sm); color: var(--intro-muted); margin-bottom: 0; } .resource-introduction { font-size: var(--font-size-lg); } .resource-contents { padding: var(--space-3) var(--space-4); border-left: 2px solid var(--intro-accent); background: var(--intro-surface); margin-block: var(--space-6); } .resource-contents h2 { font-size: var(--font-size-md); margin-bottom: var(--space-2); } .resource-contents ol { margin: 0; padding-left: var(--space-3); } .resource-contents a { display: inline-block; padding-block: .2rem; } .resource-article section { margin-top: var(--space-6); scroll-margin-top: var(--space-4); } .resource-article section p { color: var(--intro-muted); } .resource-steps { padding-left: var(--space-3); } .resource-steps li { padding-left: var(--space-1); margin-bottom: var(--space-1); }
.resource-cta { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); margin-top: var(--space-8); padding: var(--space-4); border: 1px solid var(--intro-rule); border-radius: var(--intro-card-radius); } .resource-cta > div { max-width: 42rem; } .resource-cta h2 { margin-bottom: var(--space-2); } .resource-cta p:last-child { color: var(--intro-muted); margin-bottom: 0; } .resource-related { margin-top: var(--space-8); } .resource-footer { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); border-top: 1px solid var(--intro-rule); margin-top: var(--space-8); padding-block: var(--space-4); color: var(--intro-muted); font-size: var(--font-size-sm); } .resource-not-found { padding-block: 7rem; max-width: 46rem; min-height: 60vh; } .resource-not-found > p:not(.resource-eyebrow) { color: var(--intro-muted); } .resource-actions { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-4); }
@media (max-width: 60rem) { .resource-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .resource-cta { align-items: flex-start; flex-direction: column; } }
@media (max-width: 40rem) { .resource-width { width: calc(100% - 2rem); } .resource-header { flex-wrap: wrap; } .resource-header nav { width: 100%; justify-content: space-between; gap: var(--space-2); } .resource-index-heading { padding-block: var(--space-6); } .resource-grid { grid-template-columns: 1fr; } .resource-card { padding: var(--space-3); } .resource-article { padding-top: 0; } .resource-article section { margin-top: var(--space-4); } .resource-contents { padding: var(--space-3); } .resource-footer { flex-direction: column; align-items: flex-start; } .resource-cta { padding: var(--space-3); } .resource-not-found { padding-block: var(--space-6); } }