/* ═══════════════════════════════════════════════════════════════ BROWS BY SARA B — PREMIUM REDESIGN Two direction systems toggled via [data-direction] on A = Editorial Atelier | B = Quiet Modern ═══════════════════════════════════════════════════════════════ */ /* ─── UNIFIED SYSTEM — matched to homepage (index.html) ────────── Single Editorial Atelier direction. Old --bg/--accent names kept as aliases onto the homepage's --paper/--copper tokens so existing page CSS resolves unchanged. A/B toggle retired. */ :root, body[data-direction="A"] { --paper: #F1ECDF; --paper-deep: #E6DFCC; --paper-darkest: #1A1612; --copper: #9B6B43; --copper-soft: #B98C68; --bg: var(--paper); --bg-alt: var(--paper-deep); --bg-deep: var(--paper-darkest); --ink: #1B1612; --ink-2: #4F463C; --ink-3: #6B6255; --rule: rgba(27, 22, 18, 0.14); --rule-2: rgba(27, 22, 18, 0.32); --accent: var(--ink); --accent-2: var(--copper); --serif: "Cormorant Garamond", "Tiempos Headline", Georgia, serif; --display: "Italiana", "Cormorant Garamond", Georgia, serif; --sans: "Jost", "Söhne", Helvetica, sans-serif; --display-tracking: -0.025em; --eyebrow-tracking: 0.24em; --hero-weight: 300; --drape-opacity: 0.70; } /* ─── RESET ──────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* background backs the canvas — overscroll shows paper, not UA white. Paints below .page-bg, so the backdrop still layers correctly. */ html { scroll-behavior: smooth; background: var(--paper); } body { font-family: var(--sans); /* transparent so .page-bg (z-index: -1) is not painted over — body is position: relative, so its background would otherwise sit on top */ background: transparent; color: var(--ink); font-weight: 400; line-height: 1.55; font-size: 16px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; transition: background 0.6s ease, color 0.6s ease; position: relative; } /* ─── FIXED DRAPE BACKDROP ──────────────────────────────────── Sits behind all content and stays put while the page scrolls. Solid --paper on the parent + the image faded on the pseudo-element means the drape dials down toward the page colour, not toward transparency. --drape-opacity controls the whole site. */ .page-bg { position: fixed; inset: 0; z-index: -1; background: var(--paper); pointer-events: none; } .page-bg::after { content: ''; position: absolute; inset: 0; background: url('images/backdrop/drape-v2.webp') center / cover no-repeat; opacity: var(--drape-opacity); } /* Paper grain — adds physicality without being noisy */ body::before { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 999; opacity: 0.25; mix-blend-mode: multiply; background-image: url("data:image/svg+xml;utf8,"); background-size: 280px 280px; } img, svg { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; } /* ─── UTILITY ────────────────────────────────────────────────── */ .eyebrow { font-family: var(--sans); font-size: 11px; font-weight: 500; letter-spacing: var(--eyebrow-tracking); text-transform: uppercase; color: var(--accent); } .mono { font-family: var(--sans); font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-3); } .serif-italic { font-family: var(--serif); font-style: italic; font-weight: var(--hero-weight); } .rule { height: 1px; width: 100%; background: var(--rule); border: 0; } /* ─── NAV ─────────────────────────────────────────────────────── */ .nav { position: fixed; inset: 0 0 auto 0; z-index: 80; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 22px 48px; pointer-events: none; transition: padding 0.4s ease, background 0.4s ease, border-color 0.4s ease; border-bottom: 1px solid transparent; } .nav > * { pointer-events: auto; } .nav.scrolled { background: color-mix(in oklab, var(--bg) 88%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom-color: var(--rule); padding: 14px 48px; } .nav-brand { font-family: var(--serif); font-weight: 500; font-size: 26px; letter-spacing: 0.02em; color: var(--ink); display: inline-flex; align-items: baseline; gap: 6px; } .nav-brand em { font-style: italic; color: var(--copper); font-weight: 400; } .nav-links { display: flex; gap: 36px; align-items: center; list-style: none; } .nav-links a { font-size: 12.5px; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 500; color: var(--ink-2); transition: color 0.25s ease; position: relative; } .nav-links a::after { content: ''; position: absolute; left: 0; bottom: -4px; width: 0; height: 1px; background: var(--ink); transition: width 0.3s ease; } .nav-links a:hover { color: var(--ink); } .nav-links a:hover::after { width: 100%; } /* Active page — driven by the page-* class on */ .page-services .nav-services, .page-about .nav-about, .page-portfolio .nav-portfolio, .page-care .nav-care, .page-journal .nav-journal, .page-contact .nav-contact { color: var(--ink); } .nav-right { display: flex; justify-content: flex-end; align-items: center; gap: 16px; } .nav-right .btn { padding: 12px 22px; } /* Hidden by default at every width; shown in the 1100px query below. Sits inside .nav-right, so it needs no .nav grid column of its own. */ .nav-toggle { display: none; flex-direction: column; align-items: center; justify-content: center; gap: 5px; width: 44px; height: 44px; padding: 0; background: none; border: 0; cursor: pointer; color: var(--ink); } .nav-toggle-bar { display: block; width: 24px; height: 1px; background: var(--ink); } /* ─── BUTTONS ─────────────────────────────────────────────────── */ .btn { font-family: var(--sans); font-size: 11px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; padding: 14px 24px; border: 1px solid var(--ink); background: transparent; color: var(--ink); cursor: pointer; display: inline-flex; align-items: center; gap: 10px; transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.3s ease; } .btn:hover { background: var(--ink); color: var(--bg); } .btn-fill { background: var(--ink); color: var(--bg); } .btn-fill:hover { background: var(--accent); border-color: var(--accent); color: var(--bg); } .btn-link { font-family: var(--sans); font-size: 11px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink); display: inline-flex; align-items: center; gap: 10px; padding-bottom: 4px; border-bottom: 1px solid var(--rule-2); transition: gap 0.3s ease, border-color 0.3s ease; } .btn-link:hover { gap: 16px; border-bottom-color: var(--ink); } /* ─── HERO ────────────────────────────────────────────────────── */ .hero { position: relative; min-height: 100vh; display: grid; grid-template-columns: 1.05fr 1fr; align-items: stretch; padding-top: 80px; } .hero-text { padding: 80px 40px 80px 64px; display: flex; flex-direction: column; justify-content: center; position: relative; } .hero-meta { display: flex; justify-content: space-between; align-items: baseline; position: absolute; top: 110px; left: 64px; right: 40px; } .hero-title { font-family: var(--serif); font-weight: var(--hero-weight); font-size: clamp(56px, 8.6vw, 138px); line-height: 0.94; letter-spacing: var(--display-tracking); color: var(--ink); } .hero-title em { font-style: italic; font-weight: var(--hero-weight); color: var(--accent); } .hero-sub { margin-top: 32px; max-width: 440px; font-family: var(--serif); font-style: italic; font-weight: 300; font-size: 20px; line-height: 1.45; color: var(--ink-2); } .hero-actions { margin-top: 48px; display: flex; gap: 14px; flex-wrap: wrap; } .hero-image { position: relative; overflow: hidden; border-left: 1px solid var(--rule); } .hero-scroll { position: absolute; bottom: 32px; left: 64px; display: flex; align-items: center; gap: 14px; } .hero-scroll-line { width: 60px; height: 1px; background: var(--rule-2); } .hero-scroll-text { font-family: var(--sans); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-3); } /* ─── MARQUEE strip ───────────────────────────────────────────── */ .marquee { border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding: 18px 0; overflow: hidden; font-family: var(--sans); font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--ink-2); } .marquee-track { display: flex; gap: 56px; white-space: nowrap; animation: marquee 38s linear infinite; width: max-content; } .marquee span { display: inline-flex; align-items: center; gap: 56px; } .marquee span::after { content: '✦'; color: var(--accent); opacity: 0.6; font-size: 10px; } @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* ─── SECTIONS ────────────────────────────────────────────────── */ section { padding: 120px 64px; position: relative; } @media (max-width: 900px) { section { padding: 72px 24px; } } .section-head { display: grid; grid-template-columns: 1fr 1.4fr; gap: 48px; align-items: end; margin-bottom: 64px; } .section-head-meta { display: flex; flex-direction: column; gap: 16px; } .section-head h2 { font-family: var(--serif); font-weight: var(--hero-weight); font-size: clamp(36px, 4.2vw, 64px); line-height: 1.02; letter-spacing: var(--display-tracking); color: var(--ink); } .section-head h2 em { font-style: italic; color: var(--accent); font-weight: var(--hero-weight); } .section-head-desc { max-width: 460px; font-size: 15px; line-height: 1.65; color: var(--ink-2); } /* ─── INTRO / STATEMENT ──────────────────────────────────────── */ .statement { padding: 140px 64px; display: grid; grid-template-columns: 1fr 2fr; gap: 80px; align-items: start; } .statement-label { padding-top: 14px; } .statement-body { font-family: var(--serif); font-weight: var(--hero-weight); font-size: clamp(28px, 3.4vw, 48px); line-height: 1.22; letter-spacing: -0.01em; color: var(--ink); max-width: 880px; } .statement-body em { font-style: italic; color: var(--accent); font-weight: var(--hero-weight); } .statement-sig { margin-top: 40px; display: flex; align-items: center; gap: 16px; font-family: var(--sans); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-3); } .statement-sig::before { content: ''; width: 28px; height: 1px; background: #8B8275; /* pinned — decorative hairline, not text; do not follow --ink-3 */ } /* ─── SERVICES ───────────────────────────────────────────────── */ .services { background: var(--bg-alt); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); } .service-list { display: grid; grid-template-columns: 1fr; gap: 0; margin-top: 24px; } .service-row { display: grid; grid-template-columns: 80px 1.2fr 1.5fr auto; gap: 48px; align-items: start; padding: 48px 0; border-top: 1px solid var(--rule); } .service-row:last-child { border-bottom: 1px solid var(--rule); } .service-num { font-family: var(--sans); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-3); padding-top: 12px; } .service-title { font-family: var(--serif); font-weight: var(--hero-weight); font-size: clamp(28px, 3vw, 42px); line-height: 1.05; letter-spacing: var(--display-tracking); color: var(--ink); } .service-title em { font-style: italic; color: var(--accent); font-weight: var(--hero-weight); } .service-title small { display: block; margin-top: 8px; font-family: var(--sans); font-style: normal; font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-3); font-weight: 500; } .service-desc { font-size: 15px; line-height: 1.65; color: var(--ink-2); max-width: 460px; } .service-pricing { display: flex; flex-direction: column; gap: 6px; text-align: right; min-width: 200px; } .service-price-row { display: flex; justify-content: space-between; gap: 24px; align-items: baseline; font-size: 13px; color: var(--ink-2); } .service-price-row .label { color: var(--ink-3); font-family: var(--sans); font-size: 10px; letter-spacing: 0.15em; text-transform: uppercase; } .service-price-row .price { font-family: var(--serif); font-size: 22px; font-weight: var(--hero-weight); color: var(--ink); } .service-price-row .price em { font-style: italic; color: var(--accent); } /* ─── PROCESS / JOURNEY ──────────────────────────────────────── */ .process-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; align-items: start; } .process-step { display: flex; flex-direction: column; gap: 16px; padding-top: 32px; border-top: 1px solid var(--ink); } .process-step-num { font-family: var(--sans); font-size: 11px; letter-spacing: 0.2em; color: var(--ink-3); } .process-step-time { font-family: var(--sans); font-size: 11px; letter-spacing: 0.18em; color: var(--accent); text-transform: uppercase; } .process-step h3 { font-family: var(--serif); font-weight: var(--hero-weight); font-size: 32px; line-height: 1.1; letter-spacing: var(--display-tracking); color: var(--ink); margin-top: 8px; } .process-step h3 em { font-style: italic; color: var(--accent); font-weight: var(--hero-weight); } .process-step p { font-size: 14px; line-height: 1.65; color: var(--ink-2); margin-top: 8px; } /* ─── EDITORIAL DARK BREAK ───────────────────────────────────── */ .dark-break { background: var(--bg-deep); color: var(--bg); padding: 0; display: grid; grid-template-columns: 1.2fr 1fr; min-height: 80vh; } .dark-break-image { position: relative; overflow: hidden; border-right: 1px solid rgba(255,255,255,0.08); } .dark-break-text { padding: 96px 64px; display: flex; flex-direction: column; justify-content: center; gap: 32px; } .dark-break .eyebrow { color: var(--accent-2); } .dark-break-quote { font-family: var(--serif); font-weight: var(--hero-weight); font-style: italic; font-size: clamp(28px, 3vw, 44px); line-height: 1.18; letter-spacing: -0.01em; color: var(--bg); } .dark-break-attribution { font-family: var(--sans); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--bg-alt); opacity: 0.55; } /* ─── ABOUT / SARA ───────────────────────────────────────────── */ .about { display: grid; grid-template-columns: 1fr 1.1fr; gap: 80px; align-items: center; padding: 140px 64px; } .about-image-wrap { position: relative; aspect-ratio: 4/5; } .about-text { padding-right: 40px; } .about-text h2 { font-family: var(--serif); font-weight: var(--hero-weight); font-size: clamp(40px, 4.6vw, 72px); line-height: 1.02; letter-spacing: var(--display-tracking); margin-top: 16px; } .about-text h2 em { font-style: italic; color: var(--accent); font-weight: var(--hero-weight); } .about-text p { margin-top: 28px; font-size: 16px; line-height: 1.75; color: var(--ink-2); max-width: 520px; } .about-pullquote { margin-top: 36px; font-family: var(--serif); font-style: italic; font-weight: var(--hero-weight); font-size: 26px; line-height: 1.35; color: var(--accent); border-left: 1px solid var(--accent); padding-left: 24px; } .about-cta { margin-top: 40px; } /* ─── PORTFOLIO GRID TEASER ──────────────────────────────────── */ .portfolio { padding: 120px 64px 140px; } .portfolio-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; } .pf-item { position: relative; overflow: hidden; } .pf-item .label { position: absolute; bottom: 12px; left: 12px; font-family: var(--sans); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--bg); background: rgba(0,0,0,0.65); padding: 6px 10px; } .pf-1 { grid-column: span 7; aspect-ratio: 4/3; } .pf-2 { grid-column: span 5; aspect-ratio: 1/1; } .pf-3 { grid-column: span 4; aspect-ratio: 3/4; } .pf-4 { grid-column: span 4; aspect-ratio: 3/4; } .pf-5 { grid-column: span 4; aspect-ratio: 3/4; } /* ─── TESTIMONIAL STRIP ──────────────────────────────────────── */ .testimonial { border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding: 120px 64px; text-align: center; } .testimonial-quote { max-width: 880px; margin: 0 auto; font-family: var(--serif); font-weight: var(--hero-weight); font-style: italic; font-size: clamp(26px, 3vw, 40px); line-height: 1.32; color: var(--ink); } .testimonial-meta { margin-top: 32px; font-family: var(--sans); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-3); } /* ─── CTA BANNER ─────────────────────────────────────────────── */ .cta { background: var(--bg-deep); color: var(--bg); padding: 140px 64px; text-align: center; position: relative; overflow: hidden; } .cta .eyebrow { color: var(--accent-2); } .cta h2 { margin-top: 24px; font-family: var(--serif); font-weight: var(--hero-weight); font-size: clamp(44px, 5.6vw, 96px); line-height: 1; letter-spacing: var(--display-tracking); color: var(--bg); } .cta h2 em { font-style: italic; color: var(--accent-2); font-weight: var(--hero-weight); } .cta p { margin: 28px auto 0; max-width: 520px; font-family: var(--serif); font-style: italic; font-size: 19px; color: var(--bg-alt); opacity: 0.85; } .cta .btn { margin-top: 48px; border-color: var(--bg); color: var(--bg); } .cta .btn:hover { background: var(--bg); color: var(--ink); } /* ─── FOOTER ─────────────────────────────────────────────────── */ .footer { padding: 96px 48px 32px; background: var(--bg); border-top: 1px solid var(--rule); } .footer-top { max-width: 1480px; margin: 0 auto; display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 56px; padding-bottom: 56px; border-bottom: 1px solid var(--rule); } .footer-brand-block .footer-mark { font-family: var(--serif); font-weight: 400; font-size: 36px; letter-spacing: 0.02em; color: var(--ink); line-height: 1.05; } .footer-brand-block .footer-mark em { font-style: italic; color: var(--copper); } .footer-brand-block p { margin-top: 22px; max-width: 320px; font-size: 15px; line-height: 1.7; color: var(--ink-2); } .footer-brand-block a { border-bottom: 1px solid var(--rule-2); } .footer-col h4 { font-family: var(--sans); font-size: 11.5px; font-weight: 500; letter-spacing: 0.24em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 22px; } .footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 12px; } .footer-col a { font-size: 15px; color: var(--ink-2); transition: color 0.2s ease; } .footer-col a:hover { color: var(--ink); } .footer-bottom { max-width: 1480px; margin: 24px auto 0; padding-top: 24px; display: flex; justify-content: space-between; align-items: center; font-size: 11.5px; font-weight: 500; letter-spacing: 0.24em; text-transform: uppercase; color: var(--ink-3); } .footer-bottom em { font-family: var(--serif); font-style: italic; font-size: 13px; letter-spacing: 0; text-transform: none; color: var(--ink-2); } /* ─── IMAGE FRAME ─────────────────────────────────────────────── */ .img-frame { width: 100%; height: 100%; background: var(--paper-deep); overflow: hidden; } .img-frame > img { width: 100%; height: 100%; object-fit: cover; display: block; } /* ─── A/B Direction Toggle (header) ──────────────────────────── */ .dir-toggle { display: inline-flex; align-items: center; border: 1px solid var(--rule-2); background: color-mix(in oklab, var(--bg) 70%, transparent); backdrop-filter: blur(8px); border-radius: 999px; padding: 4px; font-family: var(--sans); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; } .dir-toggle button { padding: 6px 12px; border-radius: 999px; color: var(--ink-3); transition: color 0.25s ease, background 0.25s ease; } .dir-toggle button[aria-pressed="true"] { background: var(--ink); color: var(--bg); } /* ─── DIRECTION INDICATOR LABEL ──────────────────────────────── */ .dir-label { position: fixed; left: 24px; bottom: 24px; z-index: 70; display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px; background: color-mix(in oklab, var(--bg) 80%, transparent); border: 1px solid var(--rule); font-family: var(--sans); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-2); backdrop-filter: blur(8px); } .dir-label-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); } /* ─── REVEAL ANIMATION ───────────────────────────────────────── */ .reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.9s cubic-bezier(.2,.7,.2,1), transform 0.9s cubic-bezier(.2,.7,.2,1); } .reveal.is-visible { opacity: 1; transform: translateY(0); } /* ─── RESPONSIVE ─────────────────────────────────────────────── */ @media (max-width: 1100px) { .hero { grid-template-columns: 1fr; } .hero-text { padding: 120px 24px 64px; } .hero-meta { left: 24px; right: 24px; top: 96px; } .hero-image { min-height: 56vh; border-left: 0; border-top: 1px solid var(--rule); } .hero-scroll { display: none; } .section-head { grid-template-columns: 1fr; gap: 24px; } .service-row { grid-template-columns: 60px 1fr; gap: 24px; } .service-desc, .service-pricing { grid-column: 2 / -1; text-align: left; } .service-pricing { margin-top: 8px; } .process-grid { grid-template-columns: 1fr; gap: 32px; } .dark-break { grid-template-columns: 1fr; } .dark-break-image { min-height: 50vh; border-right: 0; border-bottom: 1px solid rgba(255,255,255,0.08); } .dark-break-text { padding: 64px 24px; } .about { grid-template-columns: 1fr; gap: 40px; padding: 80px 24px; } .portfolio-grid { grid-template-columns: repeat(6, 1fr); } .pf-1, .pf-2, .pf-3, .pf-4, .pf-5 { grid-column: span 6; aspect-ratio: 4/3; } .statement { grid-template-columns: 1fr; gap: 32px; padding: 80px 24px; } .footer-top { grid-template-columns: 1fr 1fr; gap: 32px; } .nav { padding: 18px 24px; grid-template-columns: 1fr auto; } .nav.scrolled { padding: 12px 24px; } .nav-links { display: none; } .footer { padding: 56px 24px 24px; } .testimonial, .cta { padding: 80px 24px; } .dir-label { display: none; } } /* ─── MOBILE NAV OVERLAY ────────────────────────────────────────── Full-screen opaque paper. z-index 1000 sits above the grain layer (body::before, 999 here / 100 in index.html) so the overlay is flat paper by design — the grain deliberately does not multiply over it. Closed state is visibility + opacity, never display or [hidden], so the fade can transition and focus management keeps working. */ .nav-overlay { position: fixed; inset: 0; z-index: 1000; height: 100vh; height: 100dvh; background: var(--paper); display: flex; align-items: center; justify-content: center; visibility: hidden; opacity: 0; } .nav-overlay-inner { width: 100%; padding: 88px 24px 48px; } .nav-overlay-links { list-style: none; display: flex; flex-direction: column; align-items: center; gap: 4px; } .nav-overlay-links a { display: flex; align-items: center; justify-content: center; min-height: 52px; padding: 6px 16px; font-family: var(--display); font-size: clamp(30px, 8vw, 44px); line-height: 1.1; letter-spacing: 0.02em; color: var(--ink-2); } /* Active page reuses the existing .page-* / .nav-* pairing above — that rule is 0,2,0 and outranks this one, so no new mechanism. */ .nav-overlay-close { position: absolute; top: 18px; right: 18px; width: 44px; height: 44px; padding: 0; background: none; border: 0; cursor: pointer; color: var(--ink); } .nav-overlay-close-bar { position: absolute; top: 50%; left: 50%; width: 22px; height: 1px; margin: -1px 0 0 -11px; background: var(--ink); } .nav-overlay-close-bar:first-child { transform: rotate(45deg); } .nav-overlay-close-bar:last-child { transform: rotate(-45deg); } @media (prefers-reduced-motion: no-preference) { .nav-overlay { transition: opacity 0.2s ease, visibility 0.2s ease; } } /* Toggle and overlay exist only where .nav-links is hidden (1100px), so there is no width at which neither navigation is reachable. Keeping .is-open inside the query means the overlay cannot open above 1100px even if the class is left on. */ @media (max-width: 1100px) { .nav-toggle { display: flex; flex-shrink: 0; } .nav-overlay.is-open { visibility: visible; opacity: 1; } /* Header row fit — brand + BOOK + toggle on one line down to 320px. .nav is `1fr auto` here, so the brand column is whatever the auto column leaves; the toggle added 44 + 16px to that column, which is what pushed the brand into wrapping. Sized from a measured brand width of 177.640625px at font-size 26px (about.html, 305px viewport). The 6px flex gap between the text and B. is fixed and does not scale with font-size, so: brand(fs) = 6.6015625 * fs + 6 Budget: available = vw - 24 - 24 - 69.875 - 12 - 44 = vw - 173.875 Solved for 8px headroom: fs = (vw - 187.875) / 6.6015625, written as a clamp. Floor 18px still clears 305px (124.83 needed, 131.125 available). Cap 26px is the desktop size and is reached at 360px, where headroom is 8.49px — so the curve meets the cap continuously and the brand is never larger here than it is above 1100px. nowrap is why the font-size drop is required rather than cosmetic: it raises the column's min-content floor to the full string, so the brand can no longer relieve pressure by wrapping. */ .nav-brand { white-space: nowrap; font-size: clamp(18px, calc((100vw - 187.875px) / 6.6015625), 26px); } .nav-right { gap: 12px; } /* 44px comes from min-height, not vertical padding, so dropping the horizontal padding still buys row width while the label stays centred via the existing inline-flex/align-items:center. font-size is pinned so index.html's desktop 12.5px cannot leak in. */ .nav-right .btn { font-size: 11px; padding: 0 14px; min-height: 44px; } }