/* =====================================================================
VAULT / BEHIND THE SCRUBS — GLOBAL DESIGN SYSTEM (global.css)
Link this on EVERY page. Do not write page-specific colors or fonts.
Sections:
1. Tokens 5. Layout 9. Dashboard components
2. Base 6. Buttons 10. Marketing components
3. Paper + wash 7. Navbar 11. Forms
4. Decorations 8. Cards & lists 12. Footer + utilities
===================================================================== */
/* Fonts are bundled locally in assets/fonts (no CDN needed) */
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/inter-latin-400-normal.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('assets/fonts/inter-latin-500-normal.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('assets/fonts/inter-latin-600-normal.woff2') format('woff2');}
@font-face{font-family:'Newsreader';font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/newsreader-latin-400-normal.woff2') format('woff2');}
@font-face{font-family:'Newsreader';font-style:normal;font-weight:500;font-display:swap;src:url('assets/fonts/newsreader-latin-500-normal.woff2') format('woff2');}
@font-face{font-family:'Newsreader';font-style:normal;font-weight:600;font-display:swap;src:url('assets/fonts/newsreader-latin-600-normal.woff2') format('woff2');}
@font-face{font-family:'Newsreader';font-style:italic;font-weight:400;font-display:swap;src:url('assets/fonts/newsreader-latin-400-italic.woff2') format('woff2');}
@font-face{font-family:'Newsreader';font-style:italic;font-weight:500;font-display:swap;src:url('assets/fonts/newsreader-latin-500-italic.woff2') format('woff2');}
@font-face{font-family:'Caveat';font-style:normal;font-weight:500;font-display:swap;src:url('assets/fonts/caveat-latin-500-normal.woff2') format('woff2');}
@font-face{font-family:'Caveat';font-style:normal;font-weight:600;font-display:swap;src:url('assets/fonts/caveat-latin-600-normal.woff2') format('woff2');}
@font-face{font-family:'Caveat';font-style:normal;font-weight:700;font-display:swap;src:url('assets/fonts/caveat-latin-700-normal.woff2') format('woff2');}
@font-face{font-family:'Marck Script';font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/marck-script-latin-400-normal.woff2') format('woff2');}
/* ---------- 1. TOKENS ---------- */
:root {
/* colour */
--bg: #FBF6EC;
--bg-soft: #FDFAF3;
--surface: #FFFFFF;
--sage-50: #F1F5EC;
--sage-100: #E3EBDF;
--sage-200: #CBDACB;
--sage-300: #A9C0AD;
--teal: #1F4D45;
--teal-600: #2A6358;
--teal-800: #163A34;
--peach: #F6D9C8;
--coral: #E58B6E;
--blue-soft: #DDEBEF;
--pink-soft: #F7D8D6;
--sand: #EADCC2;
--text: #24312E;
--muted: #6B7773;
--border: #E8E1D2;
--danger: #D9534F;
/* type */
--font-serif: 'Newsreader', Georgia, serif;
--font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
--font-script: 'Caveat', 'Segoe Script', cursive; /* logotype names */
--font-hand: 'Marck Script', 'Segoe Script', cursive; /* thin handwritten taglines */
/* shape */
--r-sm: 8px;
--r-md: 12px;
--r-lg: 16px;
--r-xl: 24px;
--r-pill: 999px;
/* depth (use sparingly — flat by default, lift on hover) */
--shadow-sm: 0 1px 2px rgba(31, 77, 69, .05);
--shadow-md: 0 6px 18px rgba(31, 77, 69, .09);
--shadow-lg: 0 16px 40px rgba(31, 77, 69, .13);
/* space (8px grid) */
--s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px;
--s6: 32px; --s7: 48px; --s8: 64px; --s9: 80px;
/* layout */
--container: 1200px;
--container-wide: 1440px;
--nav-h: 76px;
--side-l: 280px;
--side-r: 320px;
}
/* ---------- 2. BASE ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
margin: 0;
font-family: var(--font-sans);
font-size: 15px;
line-height: 1.6;
color: var(--text);
background: var(--bg);
position: relative;
min-height: 100vh;
}
img, svg, video { max-width: 100%; display: block; }
a { color: var(--teal); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
button { font-family: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--teal-600); outline-offset: 2px; border-radius: 4px; }
h1, h2, h3, h4 {
font-family: var(--font-serif);
color: var(--teal);
font-weight: 600;
line-height: 1.2;
margin: 0 0 var(--s3);
}
h1 { font-size: clamp(36px, 5vw, 56px); letter-spacing: -.01em; }
h2 { font-size: clamp(26px, 3vw, 34px); }
h3 { font-size: 20px; }
h4 { font-size: 16px; }
p { margin: 0 0 var(--s4); }
.eyebrow {
font-size: 12px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase;
color: var(--teal-600); margin-bottom: var(--s3); display: block;
}
.script { font-family: var(--font-script); font-weight: 600; color: var(--teal); line-height: 1.05; }
.script--coral { color: var(--coral); }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.tiny { font-size: 12px; }
/* ---------- 3. PAPER TEXTURE + WATERCOLOUR WASHES ---------- */
/* Paper grain overlay (very faint) */
body::after {
content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .05;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* Page-level watercolour (painted SVG washes, irregular edges):
sage top-left + right edge, sage bottom-left, peach bottom-right */
body::before {
content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
background:
url("assets/wash-sage-tl.svg") 0 0 / min(46vw, 640px) auto no-repeat,
url("assets/wash-sage-r.svg") 100% 16% / min(34vw, 460px) auto no-repeat,
url("assets/wash-sage-bl.svg") 0 100% / min(40vw, 560px) auto no-repeat,
url("assets/wash-peach-br.svg") 100% 100% / min(36vw, 520px) auto no-repeat;
opacity: .55;
}
body > * { position: relative; z-index: 1; }
/* Reusable wash for banners / cards: add .wash (+ optional variant).
Two painted SVG blobs: ::before top-left, ::after bottom-right. */
.wash {
position: relative; overflow: hidden; isolation: isolate;
--wash-a: url("assets/wash-sage-tl.svg");
--wash-b: url("assets/wash-peach-br.svg");
}
.wash::before, .wash::after {
content: ""; position: absolute; z-index: -1; pointer-events: none;
width: min(58%, 560px); aspect-ratio: 640 / 520; opacity: .72;
background: no-repeat center / 100% 100%;
}
.wash::before { top: 0; left: 0; background-image: var(--wash-a); }
.wash::after { bottom: 0; right: 0; background-image: var(--wash-b); }
.wash--sage { --wash-a: url("assets/wash-sage-tl.svg"); --wash-b: url("assets/wash-sage-br.svg"); }
.wash--peach { --wash-a: url("assets/wash-peach.svg"); --wash-b: url("assets/wash-sage-br.svg"); }
/* Full-width banner: peach on the left, sage on the right (like "Your Voice Matters") */
.wash--banner::before { inset: 0; width: 100%; height: 100%; aspect-ratio: auto; opacity: .9; background-image: url("assets/wash-banner.svg"); background-size: cover; }
.wash--banner::after { display: none; }
/* ---------- 4. DECORATIONS ---------- */
/* Hand-drawn leaf sprigs (SVG files in /assets).
Usage: inside a position:relative parent.
Types: (default olive) | --pair | --corner | --branch | --small
Place: --left | --right | --top Size: --sm | --lg Rotate: --tilt */
.sprig {
position: absolute; pointer-events: none; width: var(--w, 110px); aspect-ratio: 140 / 300;
background: var(--sprig, url("assets/sprig-olive.svg")) no-repeat center / contain;
}
.sprig--pair { --sprig: url("assets/sprig-pair.svg"); --w: 150px; aspect-ratio: 200 / 300; }
.sprig--corner { --sprig: url("assets/sprig-corner.svg"); --w: 190px; aspect-ratio: 260 / 340; }
.sprig--branch { --sprig: url("assets/sprig-branch.svg"); --w: 260px; aspect-ratio: 340 / 130; }
.sprig--small { --sprig: url("assets/sprig-small.svg"); --w: 56px; aspect-ratio: 90 / 190; }
.sprig--left { left: 8px; bottom: 0; }
.sprig--right { right: 8px; bottom: 0; transform: scaleX(-1); }
.sprig--top { top: 0; bottom: auto; }
.sprig--tilt { transform: rotate(18deg); }
.sprig--right.sprig--tilt { transform: scaleX(-1) rotate(18deg); }
.sprig--sm { --w: 64px; }
.sprig--lg { --w: 160px; }
.heart-mark { color: var(--coral); }
.swoosh { /* coral underline under script words */
display: inline-block; position: relative;
}
.swoosh::after {
content: ""; position: absolute; left: 4%; right: 0; bottom: -6px; height: 6px;
background: no-repeat center/100% 100% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 8' preserveAspectRatio='none'%3E%3Cpath d='M1 6C25 1 60 1 99 4' stroke='%23E58B6E' stroke-width='2.2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
}
/* ---------- 5. LAYOUT ---------- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--s5); }
.container--wide { max-width: var(--container-wide); }
.section { padding-block: var(--s9); }
.section--tight { padding-block: var(--s7); }
.section--sage { background: var(--sage-50); }
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s4); margin-bottom: var(--s5); }
.section-head h2 { margin: 0; }
.link-arrow { font-size: 13px; font-weight: 500; white-space: nowrap; }
.link-arrow::after { content: " →"; }
.grid { display: grid; gap: var(--s5); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s7); align-items: center; }
.split-70-30 { display: grid; grid-template-columns: 7fr 3fr; gap: var(--s5); align-items: start; }
/* Dashboard shell: left rail | feed | right rail */
.app-shell {
display: grid; gap: var(--s5); align-items: start;
grid-template-columns: var(--side-l) minmax(0, 1fr) var(--side-r);
max-width: var(--container-wide); margin: 0 auto; padding: var(--s5);
}
.rail { display: flex; flex-direction: column; gap: var(--s5); position: sticky; top: calc(var(--nav-h) + var(--s5)); }
.feed { display: flex; flex-direction: column; gap: var(--s4); min-width: 0; }
/* ---------- 6. BUTTONS ---------- */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
font-size: 14px; font-weight: 500; line-height: 1;
padding: 12px 22px; border-radius: var(--r-pill);
border: 1.5px solid transparent; transition: transform .15s, box-shadow .15s, background .15s;
text-decoration: none !important; white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn-primary { background: var(--teal); color: #fff; }
.btn-primary:hover { background: var(--teal-800); }
.btn-outline { background: transparent; color: var(--teal); border-color: var(--teal); }
.btn-outline:hover { background: var(--teal); color: #fff; }
.btn-soft { background: var(--sage-100); color: var(--teal); }
.btn-soft:hover { background: var(--sage-200); }
.btn-ghost { background: var(--surface); color: var(--teal); border-color: var(--border); border-radius: var(--r-md); padding: 9px 14px; font-size: 13px; }
.btn-ghost:hover { background: var(--sage-50); }
.btn-sm { padding: 8px 16px; font-size: 13px; }
.btn-block { width: 100%; }
.btn-square { border-radius: var(--r-md); }
.icon-btn {
width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
background: transparent; border: 0; color: var(--teal); position: relative;
}
.icon-btn:hover { background: var(--sage-100); }
.icon-btn .dot {
position: absolute; top: 4px; right: 4px; min-width: 16px; height: 16px; padding: 0 4px;
background: var(--danger); color: #fff; border-radius: var(--r-pill); font-size: 10px; display: grid; place-items: center;
}
/* ---------- 7. NAVBAR ---------- */
.navbar {
position: sticky; top: 0; z-index: 50; height: var(--nav-h);
background: rgba(251, 246, 236, .88); backdrop-filter: blur(10px);
border-bottom: 1px solid var(--border);
}
.navbar__inner { display: flex; align-items: center; gap: var(--s6); height: 100%; max-width: var(--container-wide); margin: 0 auto; padding-inline: var(--s5); }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none !important; color: var(--teal); }
.brand__badge {
width: 56px; height: 56px; border-radius: 50%; border: 2px solid var(--teal);
display: grid; place-items: center; background: var(--surface); color: var(--teal); flex: none;
}
.brand__text { display: flex; flex-direction: column; line-height: 1; }
.brand__small { font-size: 9px; letter-spacing: .3em; text-transform: uppercase; font-weight: 600; margin-left: 2px; }
.brand__name { font-family: var(--font-script); font-size: 40px; font-weight: 700; margin-top: -2px; }
.brand__tag { font-size: 8px; letter-spacing: .24em; text-transform: uppercase; color: var(--muted); }
.nav-links { display: flex; gap: var(--s5); margin: 0 auto; padding: 0; list-style: none; }
.nav-link {
display: inline-flex; align-items: center; gap: 8px; padding: 8px 2px;
font-size: 14px; font-weight: 500; color: var(--text); position: relative;
}
.nav-link:hover { color: var(--teal); text-decoration: none; }
.nav-link.is-active { color: var(--teal); font-weight: 600; }
.nav-link.is-active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -14px; height: 2px; background: var(--teal); border-radius: 2px; }
.search {
display: flex; align-items: center; gap: 10px; padding: 0 16px; height: 44px; width: 300px;
background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-pill); color: var(--muted);
}
.search input { border: 0; outline: 0; background: transparent; flex: 1; font: inherit; font-size: 13px; color: var(--text); min-width: 0; }
.navbar__actions { display: flex; align-items: center; gap: var(--s3); }
.avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; border: 2px solid var(--surface); box-shadow: 0 0 0 1px var(--border); background: var(--sage-200); flex: none; }
.avatar--sm { width: 36px; height: 36px; }
.avatar--lg { width: 72px; height: 72px; }
/* ---------- 8. CARDS & LISTS ---------- */
.card {
background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
padding: var(--s5); transition: box-shadow .2s, transform .2s;
}
.card--hover:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.card--soft { background: var(--bg-soft); }
.card--sage { background: var(--sage-50); border-color: var(--sage-100); }
.card--flush { padding: 0; overflow: hidden; }
.card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--s4); }
.card-title { font-family: var(--font-serif); font-size: 18px; font-weight: 600; color: var(--teal); margin: 0; }
.card-link { font-size: 12.5px; font-weight: 500; }
.icon-circle {
width: 44px; height: 44px; border-radius: 50%; flex: none; display: grid; place-items: center;
background: var(--sage-100); color: var(--teal);
}
.icon-circle--blue { background: var(--blue-soft); }
.icon-circle--pink { background: var(--pink-soft); color: #B5483F; }
.icon-circle--peach { background: var(--peach); }
.icon-circle--sand { background: var(--sand); }
.icon-circle--lg { width: 56px; height: 56px; }
.list { list-style: none; margin: 0; padding: 0; }
.list-item {
display: flex; align-items: center; gap: var(--s3); padding: 12px 0; color: inherit;
border-bottom: 1px solid var(--border); text-decoration: none !important;
}
.list-item:last-child { border-bottom: 0; }
.list-item__body { flex: 1; min-width: 0; }
.list-item__title { font-family: var(--font-serif); font-size: 14.5px; font-weight: 600; color: var(--teal); margin: 0; }
.list-item__sub { font-size: 12.5px; color: var(--muted); margin: 0; }
.list-item__meta { font-size: 12px; color: var(--muted); text-align: right; }
.list-item::after { content: none; }
.list-item--chev::after { content: "›"; font-size: 22px; color: var(--muted); line-height: 1; }
a.list-item:hover .list-item__title { text-decoration: underline; text-underline-offset: 3px; }
.badge {
display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: var(--r-sm);
font-size: 11px; font-weight: 600; background: var(--sage-100); color: var(--teal);
}
.badge--new { background: var(--sage-200); }
.badge--count { background: var(--teal); color: #fff; border-radius: var(--r-pill); min-width: 20px; justify-content: center; }
.badge--coral { background: var(--peach); color: #A4482F; }
.tag { /* small category label on cards */
font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--teal-600);
}
.tabs { display: flex; gap: var(--s6); border-bottom: 1px solid var(--border); margin-bottom: var(--s4); }
.tab { background: none; border: 0; padding: 10px 2px; font-family: var(--font-serif); font-size: 15px; color: var(--muted); position: relative; }
.tab:hover { color: var(--teal); }
.tab.is-active { color: var(--teal); font-weight: 600; }
.tab.is-active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--teal); }
.segmented { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; background: var(--sage-50); padding: 5px; border-radius: var(--r-md); }
.segmented button { border: 0; background: transparent; padding: 10px; border-radius: var(--r-sm); font-size: 13px; color: var(--text); }
.segmented button.is-active { background: var(--teal); color: #fff; }
/* ---------- 9. DASHBOARD COMPONENTS ---------- */
/* Welcome banner (photo fades into watercolour on the right) */
.hero-banner {
position: relative; border-radius: var(--r-lg); overflow: hidden; min-height: 230px; border: 1px solid var(--border);
display: grid; grid-template-columns: 1.1fr .9fr; background: var(--bg-soft);
}
.hero-banner__content { padding: var(--s6) var(--s6) var(--s6) 88px; position: relative; z-index: 2; align-self: center; }
.hero-banner__title { font-family: var(--font-script); font-size: clamp(44px, 5vw, 64px); font-weight: 700; color: var(--teal); line-height: 1; margin: 6px 0 12px; }
.hero-banner__image { position: relative; min-height: 230px; background: center/cover no-repeat var(--sage-200); }
.hero-banner__image::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--bg-soft) 0%, rgba(253,250,243,0) 40%); }
.hero-banner__script { position: absolute; right: 18px; top: 24%; font-family: var(--font-script); font-size: 22px; color: var(--teal); text-align: right; line-height: 1.1; z-index: 3; }
.composer { display: flex; flex-direction: column; gap: var(--s3); }
.composer__row { display: flex; gap: var(--s3); align-items: center; }
.composer__input {
flex: 1; height: 46px; padding: 0 16px; border-radius: var(--r-md); border: 1px solid var(--border);
background: var(--bg-soft); font: inherit; font-size: 14px; color: var(--text);
}
.composer__tools { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.composer__tools .spacer { flex: 1; }
.post { padding: var(--s5); }
.post__head { display: flex; gap: var(--s3); align-items: flex-start; }
.post__who { flex: 1; min-width: 0; }
.post__name { font-family: var(--font-serif); font-weight: 600; font-size: 15px; color: var(--teal); }
.post__meta { font-size: 12.5px; color: var(--muted); }
.post__body { margin: var(--s3) 0; font-size: 14.5px; }
.post__stats { display: flex; align-items: center; justify-content: space-between; font-size: 12.5px; color: var(--muted); padding-bottom: var(--s3); }
.post__actions { display: flex; justify-content: space-between; border-top: 1px solid var(--border); padding-top: var(--s2); }
.post__action { display: inline-flex; align-items: center; gap: 8px; background: none; border: 0; padding: 8px 12px; border-radius: var(--r-sm); font-size: 13px; color: var(--muted); }
.post__action:hover { background: var(--sage-50); color: var(--teal); }
.reactions { display: inline-flex; align-items: center; gap: 6px; }
.reaction-dot { width: 20px; height: 20px; border-radius: 50%; display: inline-grid; place-items: center; font-size: 11px; color: #fff; border: 2px solid var(--surface); margin-right: -8px; }
.reaction-dot--like { background: #3B7BE4; } .reaction-dot--love { background: var(--danger); }
.post__attachment { display: flex; gap: var(--s3); align-items: center; border: 1px solid var(--border); border-radius: var(--r-md); padding: 8px; margin: var(--s3) 0; background: var(--bg-soft); }
.post__attachment img { width: 88px; height: 56px; object-fit: cover; border-radius: var(--r-sm); }
.chat-item { display: flex; gap: var(--s3); align-items: center; padding: 10px 0; }
.chat-item__body { flex: 1; min-width: 0; }
.chat-item__name { font-family: var(--font-serif); font-size: 14px; font-weight: 600; color: var(--teal); }
.chat-item__preview { font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-side { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.nav-side a { display: flex; align-items: center; gap: 14px; padding: 11px 14px; border-radius: var(--r-md); color: var(--text); font-size: 14.5px; text-decoration: none; }
.nav-side a:hover { background: var(--sage-50); }
.nav-side a.is-active { background: var(--sage-100); color: var(--teal); font-weight: 600; }
.nav-side .badge { margin-left: auto; }
.trending { list-style: none; margin: 0; padding: 0; counter-reset: t; }
.trending li { counter-increment: t; display: flex; gap: 14px; padding: 10px 0; font-size: 14px; }
.trending li::before { content: counter(t); color: var(--teal); font-weight: 600; width: 14px; }
.promo { /* "Explore Vault Professional" style tile */
text-align: center; padding: var(--s6) var(--s5); border-radius: var(--r-lg); border: 1px solid var(--sage-100); position: relative;
}
.promo h3 { margin-bottom: 8px; }
.side-script { font-family: var(--font-script); font-size: 30px; line-height: 1.15; color: var(--teal); transform: rotate(-8deg); padding: var(--s5); }
/* ---------- 10. MARKETING COMPONENTS (Behind the Scrubs home) ----------
Put class="page-site" on for marketing pages. Measured at 1440px wide. */
body.page-site { background: #FCFAF5; }
body.page-site::before, body.page-site::after { display: none; }
.wrap { width: 100%; max-width: 1300px; margin-inline: auto; padding-inline: 24px; }
.hand { font-family: var(--font-hand); font-weight: 400; color: var(--teal); line-height: 1.0; transform: rotate(-7deg); transform-origin: left center; display: inline-block; }
.hand--white { color: #fff; }
.hand--coral { color: var(--coral); }
/* icons: inline