/* Hallmark stamp macrostructure: Photographic (home) + Letter (about) + Catalogue (menu) + Portfolio Grid (gallery) theme: custom — anchor hue 350 (warm raspberry-pink), secondary accent hue 60 (caramel drizzle) paper band: light/warm · display style: rounded-geometric (Fredoka) · accent hue band: warm-chromatic nav: N1b SaaS three-section · footer: statement + inline info line (Ft5 + Ft2 hybrid) hero: H6 Photographic fold (video, poster fallback) with T4 stat strip pinned at hero base tone: Playful, built for a real mobile dessert-catering brand in Pasadena, MD */ /* ---------- Fonts ---------- */ /* Loaded via in each page's (next to the preconnect tags) instead of @import, so the browser discovers the font stylesheet immediately instead of waiting on this CSS file to parse first. */ /* ---------- Tokens ---------- */ :root { /* paper / surfaces — warm raspberry-blush, never pure white */ --color-paper: oklch(97% 0.014 350); --color-paper-2: oklch(93% 0.020 350); --color-paper-3: oklch(89% 0.026 350); --color-rule: oklch(84% 0.024 350); /* ink / text — warm near-black, never pure black */ --color-ink: oklch(21% 0.024 350); --color-neutral: oklch(46% 0.020 350); --color-muted: oklch(56% 0.018 350); /* accents — pink is the brand signal, caramel is the "drizzle" secondary. Used sparingly. */ --color-accent: oklch(56% 0.21 350); /* raspberry / hot pink, brand-true */ --color-accent-ink: oklch(98% 0.01 350); /* text on accent */ --color-accent-2: oklch(72% 0.15 60); /* caramel drizzle, secondary highlight only */ --color-focus: oklch(60% 0.19 350); --font-display: 'Fredoka', ui-rounded, system-ui, sans-serif; --font-body: 'Inter', system-ui, sans-serif; --radius-sm: 0.5rem; --radius-md: 1rem; --radius-lg: 1.75rem; --shadow-1: 0 1px 2px oklch(21% 0.024 350 / 0.06), 0 8px 24px oklch(21% 0.024 350 / 0.08); --shadow-2: 0 4px 12px oklch(21% 0.024 350 / 0.10), 0 20px 48px oklch(21% 0.024 350 / 0.14); --maxw: 74rem; --pad-inline: clamp(1.25rem, 4vw, 3rem); } /* ---------- Reset ---------- */ * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--color-paper); color: var(--color-ink); font-family: var(--font-body); font-size: 1rem; line-height: 1.6; -webkit-font-smoothing: antialiased; } img, video { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; line-height: 1.08; margin: 0 0 0.5em; letter-spacing: -0.01em; } p { margin: 0 0 1em; color: var(--color-neutral); } .container { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad-inline); } .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } :focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; } /* ---------- Nav: N1b SaaS three-section ---------- */ .site-nav { position: sticky; top: 0; z-index: 40; background: color-mix(in oklch, var(--color-paper) 88%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--color-rule); } .site-nav .container { display: flex; align-items: center; justify-content: space-between; min-height: clamp(4.75rem, 11vw, 8rem); gap: 1rem; padding-block: 0.5rem; } .nav-logo-link { display: flex; align-items: center; flex-shrink: 0; } .nav-logo { display: block; height: clamp(3.75rem, 8.5vw, 6.75rem); width: auto; } .wordmark { font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; display: flex; align-items: baseline; gap: 0.4rem; white-space: nowrap; } .wordmark small { font-family: var(--font-body); font-weight: 500; font-size: 0.6875rem; color: var(--color-muted); letter-spacing: 0.08em; text-transform: uppercase; } .nav-links { display: flex; gap: 1.75rem; list-style: none; margin: 0; padding: 0; font-size: 0.9375rem; font-weight: 500; } .nav-links a { position: relative; padding: 0.25rem 0; } .nav-links a[aria-current="page"] { color: var(--color-accent); } .nav-links a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -2px; height: 2px; background: var(--color-accent); transition: right 0.18s ease; } .nav-links a:hover::after { right: 0; } .nav-cta { display: inline-flex; align-items: center; gap: 0.4rem; background: var(--color-accent); color: var(--color-accent-ink); border-radius: var(--radius-sm); padding: 0.6rem 1.1rem; font-weight: 600; font-size: 0.9375rem; white-space: nowrap; } .nav-cta:hover { filter: brightness(1.06); } .nav-toggle { display: none; } @media (max-width: 60rem) { .nav-links { display: none; } .nav-toggle { display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; border-radius: var(--radius-sm); border: 1px solid var(--color-rule); background: transparent; } .site-nav[data-open="true"] .nav-links { display: flex; flex-direction: column; gap: 0; position: absolute; top: 100%; left: 0; right: 0; background: var(--color-paper); border-bottom: 1px solid var(--color-rule); padding: 0.5rem var(--pad-inline) 1rem; } .site-nav[data-open="true"] .nav-links a { padding: 0.75rem 0; display: block; } } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--font-body); font-weight: 600; font-size: 0.9375rem; padding: 0.85rem 1.5rem; border-radius: var(--radius-sm); border: 1px solid transparent; cursor: pointer; min-height: 44px; } .btn-primary { background: var(--color-accent); color: var(--color-accent-ink); } .btn-primary:hover { filter: brightness(1.06); } .btn-outline { border-color: var(--color-ink); color: var(--color-ink); background: transparent; } .btn-outline:hover { border-color: var(--color-accent); color: var(--color-accent); } .btn-lg { padding: 1.05rem 2rem; font-size: 1.0625rem; } /* ---------- Hero: H6 Photographic fold ---------- */ .hero { position: relative; min-height: 86vh; display: flex; align-items: flex-end; overflow: hidden; color: oklch(98% 0.008 350); } .hero video, .hero img.hero-fallback { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; } .hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, oklch(21% 0.03 350 / 0.15) 0%, oklch(16% 0.03 350 / 0.78) 78%); z-index: 1; } .hero-content { position: relative; z-index: 2; width: 100%; padding-block: 3rem 2.5rem; } .hero-eyebrow { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: oklch(96% 0.02 350); margin-bottom: 1rem; } .hero-eyebrow::before { content: "\25CF"; color: var(--color-accent); font-size: 0.6rem; } .hero h1 { font-size: clamp(2.25rem, 5.4vw, 4.25rem); max-width: 42rem; color: #fff; text-shadow: 0 2px 20px oklch(16% 0.03 350 / 0.3); } .hero-lede { max-width: 34rem; font-size: 1.125rem; color: oklch(94% 0.012 350); margin-bottom: 1.75rem; } .hero-ctas { display: flex; flex-wrap: wrap; gap: 0.85rem; margin-bottom: 2.25rem; } .hero-ctas .btn-outline { border-color: oklch(94% 0.012 350); color: #fff; } .hero-ctas .btn-outline:hover { border-color: var(--color-accent); color: var(--color-accent); } /* Stat strip (T4) pinned to hero base */ .stat-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: oklch(94% 0.012 350 / 0.18); border: 1px solid oklch(94% 0.012 350 / 0.22); border-radius: var(--radius-md); overflow: hidden; backdrop-filter: blur(6px); max-width: 44rem; } .stat-strip div { padding: 1rem 1.25rem; background: oklch(16% 0.03 350 / 0.35); } .stat-num { font-family: var(--font-display); font-size: 1.375rem; font-weight: 600; display: block; color: #fff; } .stat-label { font-size: 0.75rem; color: oklch(90% 0.012 350); text-transform: uppercase; letter-spacing: 0.04em; } @media (max-width: 40rem) { .stat-strip { grid-template-columns: 1fr; max-width: 100%; } } /* ---------- Section heads (S1 left margin numbered) ---------- */ .section { padding-block: clamp(3.5rem, 8vw, 6.5rem); } .section-alt { background: var(--color-paper-2); } .s1 { display: grid; grid-template-columns: 9rem 1fr; gap: 1.5rem; margin-bottom: 2.75rem; align-items: baseline; } .s1-num { font-family: var(--font-display); color: var(--color-accent); font-weight: 600; font-size: 0.9375rem; } .s1 h2 { font-size: clamp(1.75rem, 3.4vw, 2.5rem); max-width: 34rem; } .s1 .s1-sub { grid-column: 2; color: var(--color-muted); max-width: 34rem; margin-top: -0.5rem; } @media (max-width: 40rem) { .s1 { grid-template-columns: 1fr; gap: 0.5rem; } .s1 .s1-sub { grid-column: 1; } } /* ---------- Trust section ---------- */ .trust-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } .trust-card { background: var(--color-paper); border: 1px solid var(--color-rule); border-radius: var(--radius-md); padding: 1.75rem; } .trust-card .mark { color: var(--color-accent); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 0.75rem; display: block; } .trust-card h3 { font-size: 1.125rem; margin-bottom: 0.5rem; } .trust-card p { margin: 0; font-size: 0.9375rem; } @media (max-width: 60rem) { .trust-grid { grid-template-columns: 1fr; } } /* ---------- Reviews (real Facebook reviews, distributed across pages) ---------- */ .reviews-block { margin-top: 2.5rem; } .reviews-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.25rem; } .reviews-head .mark { color: var(--color-accent); font-weight: 700; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em; } .reviews-head .reviews-link { font-size: 0.8125rem; color: var(--color-muted); text-decoration: none; } .reviews-head .reviews-link:hover { color: var(--color-accent); } .reviews-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } .reviews-grid[data-count="2"] { grid-template-columns: repeat(2, 1fr); max-width: 42rem; margin-inline: auto; } .review-card { background: var(--color-paper); border: 1px solid var(--color-rule); border-radius: var(--radius-md); padding: 1.5rem; display: flex; flex-direction: column; gap: 0.85rem; } .review-card .review-text { margin: 0; font-size: 0.9375rem; line-height: 1.55; color: var(--color-ink); } .review-card .review-author { margin: 0; font-size: 0.8125rem; font-weight: 600; color: var(--color-ink); } .review-card .review-author span { font-weight: 400; color: var(--color-muted); } @media (max-width: 48rem) { .reviews-grid, .reviews-grid[data-count="2"] { grid-template-columns: 1fr; max-width: none; } } /* ---------- Feature stack / services ---------- */ .service-list { display: flex; flex-direction: column; gap: 0; border-top: 1px solid var(--color-rule); } .service-row { display: grid; grid-template-columns: 3rem 1fr 16rem; gap: 2rem; padding: 2.25rem 0; border-bottom: 1px solid var(--color-rule); align-items: start; } .service-row .idx { font-family: var(--font-display); color: var(--color-muted); font-size: 1rem; } .service-row h3 { font-size: 1.375rem; margin-bottom: 0.35rem; display: flex; align-items: center; gap: 0.6rem; } .badge-popular { font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; background: var(--color-accent); color: var(--color-accent-ink); padding: 0.2rem 0.55rem; border-radius: 999px; } .service-row .who { font-size: 0.875rem; color: var(--color-muted); margin-top: 0.75rem; } .service-row .who strong { color: var(--color-neutral); } .service-cta { display: flex; flex-direction: column; align-items: flex-start; gap: 0.6rem; justify-self: end; text-align: right; } @media (max-width: 60rem) { .service-row { grid-template-columns: 2.5rem 1fr; } .service-cta { grid-column: 1 / -1; justify-self: start; text-align: left; margin-top: 0.75rem; } } /* ---------- Objection / FAQ (Conversational) ---------- */ .faq-list { border-top: 1px solid var(--color-rule); } .faq-item { border-bottom: 1px solid var(--color-rule); } .faq-item summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.5rem 0; font-weight: 600; font-size: 1.0625rem; color: var(--color-ink); } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary .plus { font-family: var(--font-display); color: var(--color-accent); font-size: 1.25rem; transition: transform 0.15s ease; } .faq-item[open] summary .plus { transform: rotate(45deg); } .faq-answer { padding: 0 0 1.5rem; max-width: 40rem; } .faq-answer .proof { font-size: 0.8125rem; color: var(--color-muted); margin-top: 0.5rem; } /* ---------- Final CTA ---------- */ .final-cta { background: var(--color-ink); color: oklch(96% 0.012 350); border-radius: var(--radius-lg); padding: clamp(2.5rem, 6vw, 4.5rem); text-align: center; margin-inline: var(--pad-inline); } .final-cta h2 { color: #fff; font-size: clamp(1.75rem, 4vw, 2.75rem); max-width: 32rem; margin-inline: auto; } .final-cta p { color: oklch(88% 0.014 350); max-width: 30rem; margin-inline: auto; } .final-cta .btn-primary { margin-top: 0.5rem; } .final-cta .reassure { font-size: 0.875rem; color: oklch(80% 0.016 350); margin-top: 0.85rem; } /* ---------- Cards / grid / gallery (Bento-ish) ---------- */ .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; align-items: center; } @media (max-width: 60rem) { .grid-2 { grid-template-columns: 1fr; } } .media-frame { border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-2); } .media-frame img, .media-frame video { aspect-ratio: 4 / 3; width: 100%; height: auto; object-fit: cover; } /* Proof strip — a few real, current photos placed right under the hero, in an even 2x2 grid. The schedule flyer and menu board are nearly the same portrait shape, so they line up naturally at their own height (uncropped). The trailer-window photo and truck collage are both landscape but not the same shape, so the collage is cropped to match the trailer photo's ratio exactly, keeping that row's bottoms flush. */ .proof-strip-section .container { max-width: 88rem; } .proof-strip { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; } .proof-strip figure { margin: 0; display: flex; flex-direction: column; } .proof-strip figure:nth-child(1) { grid-column: 1; grid-row: 1; } .proof-strip figure:nth-child(2) { grid-column: 2; grid-row: 1; } .proof-strip figure:nth-child(3) { grid-column: 2; grid-row: 2; } .proof-strip figure:nth-child(4) { grid-column: 1; grid-row: 2; } .proof-strip .media-frame img { aspect-ratio: auto; width: 100%; height: auto; object-fit: contain; } .proof-strip figure:nth-child(4) .media-frame img { aspect-ratio: 1023 / 806; object-fit: cover; } .proof-strip figcaption { margin-top: 0.75rem; font-size: 0.9375rem; color: var(--color-muted); text-align: center; } @media (max-width: 60rem) { .proof-strip { grid-template-columns: 1fr; gap: 1.5rem; } .proof-strip figure:nth-child(1), .proof-strip figure:nth-child(2), .proof-strip figure:nth-child(3), .proof-strip figure:nth-child(4) { grid-column: 1; grid-row: auto; } .proof-strip figure:nth-child(4) .media-frame img { aspect-ratio: auto; object-fit: contain; } } .bento { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 12rem; gap: 0.85rem; } .bento a { position: relative; border-radius: var(--radius-sm); overflow: hidden; display: block; } .bento img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.35s ease; } .bento a:hover img { transform: scale(1.045); } .bento a::after { content: attr(data-label); position: absolute; left: 0.6rem; bottom: 0.6rem; right: 0.6rem; font-size: 0.75rem; color: #fff; background: oklch(16% 0.03 350 / 0.55); padding: 0.3rem 0.55rem; border-radius: 0.4rem; opacity: 0; transition: opacity 0.2s ease; } .bento a:hover::after { opacity: 1; } .bento .span-2 { grid-column: span 2; } .bento .span-2r { grid-row: span 2; } @media (max-width: 60rem) { .bento { grid-template-columns: repeat(2, 1fr); } .bento .span-2 { grid-column: span 2; } } @media (max-width: 40rem) { .bento { grid-template-columns: 1fr; } .bento .span-2, .bento .span-2r { grid-column: span 1; grid-row: span 1; } } /* ---------- Pricing / catalogue (menu page) ---------- */ /* Wraps the price table so it scrolls horizontally on narrow phones instead of forcing the whole page to overflow sideways. */ .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; } .price-table { width: 100%; border-collapse: collapse; margin-top: 1rem; } .price-table th, .price-table td { text-align: left; padding: 0.9rem 0.75rem; border-bottom: 1px solid var(--color-rule); font-size: 0.9375rem; } .price-table th { color: var(--color-muted); font-weight: 600; text-transform: uppercase; font-size: 0.75rem; letter-spacing: 0.04em; } .price-table td.amount { font-family: var(--font-display); font-weight: 600; color: var(--color-ink); white-space: nowrap; } @media (max-width: 30rem) { .price-table { min-width: 30rem; } .price-table th, .price-table td { padding: 0.75rem 0.6rem; } } .flavor-tags { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.5rem; } .flavor-tag { font-size: 0.875rem; font-weight: 500; padding: 0.5rem 0.9rem; border-radius: 999px; border: 1px solid var(--color-rule); background: var(--color-paper); } .flavor-tag.hot { border-color: var(--color-accent-2); background: color-mix(in oklch, var(--color-accent-2) 18%, var(--color-paper)); } .note-box { border-left: 3px solid var(--color-accent-2); background: var(--color-paper-2); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; padding: 1.1rem 1.25rem; font-size: 0.9375rem; color: var(--color-neutral); } /* ---------- Letter (about page) ---------- */ .letter { max-width: 40rem; margin-inline: auto; } .letter .salutation { font-family: var(--font-display); font-size: 1.375rem; margin-bottom: 1.25rem; } .letter p { font-size: 1.0625rem; color: var(--color-neutral); } .letter .sign-off { font-family: var(--font-display); font-size: 1.25rem; margin-top: 2rem; } /* ---------- Footer: statement + inline info ---------- */ .footer-statement { text-align: center; padding-block: clamp(3rem, 7vw, 5rem) 2.5rem; } .footer-statement h2 { font-size: clamp(1.5rem, 3.6vw, 2.25rem); max-width: 30rem; margin-inline: auto; } .footer-logo { display: block; width: clamp(84px, 9vw, 130px); height: auto; margin: 0 0 1.25rem auto; } .footer-info { border-top: 1px solid var(--color-rule); padding-block: 1.5rem; display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: center; justify-content: space-between; font-size: 0.875rem; color: var(--color-muted); } .footer-info .socials { display: flex; gap: 1rem; } .footer-info a:hover { color: var(--color-accent); } /* ---------- Live chat widget ---------- */ .chat-launcher { position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 60; width: 4.75rem; height: 4.75rem; border-radius: 999px; background: var(--color-accent); color: var(--color-accent-ink); display: flex; align-items: center; justify-content: center; font-size: 2.5rem; line-height: 1; border: none; cursor: pointer; box-shadow: var(--shadow-2); transition: transform 0.15s ease, filter 0.15s ease; } .chat-launcher:hover { filter: brightness(1.06); transform: scale(1.04); } @media (max-width: 40rem) { .chat-launcher { width: 4rem; height: 4rem; font-size: 2.125rem; right: 1rem; bottom: 1rem; } } .chat-panel { position: fixed; right: 1.25rem; bottom: 6.5rem; z-index: 60; width: min(22rem, calc(100vw - 2.5rem)); max-height: min(32rem, calc(100vh - 8rem)); background: var(--color-paper); border: 1px solid var(--color-rule); border-radius: var(--radius-md); box-shadow: var(--shadow-2); display: none; flex-direction: column; overflow: hidden; } .chat-panel[data-open="true"] { display: flex; } .chat-head { background: var(--color-ink); color: #fff; padding: 1rem 1.1rem; display: flex; align-items: center; justify-content: space-between; } .chat-head strong { font-family: var(--font-display); font-size: 1rem; } .chat-head span { display: block; font-size: 0.75rem; color: oklch(85% 0.02 350); margin-top: 0.15rem; } .chat-close { background: none; border: none; color: #fff; font-size: 1.1rem; cursor: pointer; padding: 0.25rem; } .chat-body { padding: 1rem 1.1rem; overflow-y: auto; flex: 1; } .chat-body p.intro { font-size: 0.875rem; color: var(--color-neutral); } /* Chat transcript bubbles — scripted opening message + echoed replies */ .chat-thread { display: flex; flex-direction: column; gap: 0.35rem; margin-bottom: 0.9rem; } .chat-bubble-row { display: flex; flex-direction: column; max-width: 88%; } .chat-bubble-row.from-them { align-self: flex-start; align-items: flex-start; } .chat-bubble-row.from-you { align-self: flex-end; align-items: flex-end; } .chat-bubble { padding: 0.7rem 0.9rem; font-size: 0.875rem; line-height: 1.5; border-radius: 1rem; } .from-them .chat-bubble { background: var(--color-paper-2); color: var(--color-ink); border-bottom-left-radius: 0.25rem; } .from-you .chat-bubble { background: var(--color-accent); color: var(--color-accent-ink); border-bottom-right-radius: 0.25rem; } .chat-bubble-meta { font-size: 0.6875rem; color: var(--color-muted); margin-top: 0.25rem; padding-inline: 0.2rem; } .chat-field { margin-bottom: 0.75rem; } .chat-field label { display: block; font-size: 0.75rem; font-weight: 600; margin-bottom: 0.3rem; color: var(--color-muted); } .chat-field input, .chat-field textarea, .chat-field select { width: 100%; padding: 0.6rem 0.7rem; border-radius: 0.5rem; border: 1px solid var(--color-rule); background: var(--color-paper); font-family: var(--font-body); font-size: 1rem; color: var(--color-ink); } .chat-field textarea { min-height: 4.5rem; resize: vertical; } /* 1rem (16px) minimum on all form fields — anything smaller triggers an auto-zoom on focus in iOS Safari, which is a jarring, un-native-feeling glitch on iPhone. */ .chat-foot { padding: 0 1.1rem 1.1rem; } .chat-status { font-size: 0.8125rem; margin-top: 0.6rem; min-height: 1.2em; } .chat-status[data-state="ok"] { color: oklch(48% 0.14 150); } .chat-status[data-state="err"] { color: var(--color-accent); } .hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* Full-width page header used on inner pages */ .page-head { padding-block: clamp(3rem, 7vw, 5rem) 2rem; text-align: left; } .page-head .eyebrow { color: var(--color-accent); font-weight: 700; font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 0.75rem; display: block; } .page-head h1 { font-size: clamp(2rem, 4.4vw, 3.25rem); max-width: 38rem; } .page-head .lede { max-width: 36rem; font-size: 1.0625rem; }