/* ============================================================ DREVA.AI — design system Premium editorial · Quiet luxury · Board-grade Deep heritage green, warm ivory, charcoal. Restrained brass accent only for rules, italic emphasis, and key statements. ============================================================ */ /* Google Fonts are loaded via tags in each HTML for better render performance. */ :root { --emerald: #0F2A25; --emerald-deep: #08201C; --emerald-mid: #163830; --emerald-line: #2A5048; --ivory: #F9F7F3; --ivory-warm: #F4EFE6; --ivory-dark: #ECE5D9; --charcoal: #1A1A1A; --mid: #4A4A4A; --muted: #7A7A7A; --border: #DDD5C7; --border-dark: #C9BFAD; --brass: #B8956A; --brass-soft: #C9AC82; --white: #FFFFFF; --serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif; --sans: 'Inter', -apple-system, system-ui, sans-serif; --max-w: 1240px; --max-w-narrow: 920px; --pad-x: clamp(24px, 5vw, 88px); --pad-y: clamp(56px, 7vw, 100px); } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: var(--sans); font-size: 16px; line-height: 1.7; color: var(--charcoal); background: var(--ivory); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } img { display: block; max-width: 100%; height: auto; } a { color: inherit; text-decoration: none; transition: color .2s ease; } a:hover { color: var(--emerald); } ul { list-style: none; } button { font: inherit; cursor: pointer; border: none; background: none; } /* ------------------------------------------------------------ typography ------------------------------------------------------------ */ h1, h2, h3, h4 { font-family: var(--serif); font-weight: 400; line-height: 1.12; color: var(--charcoal); letter-spacing: -0.005em; } h1 { font-size: clamp(2.6rem, 5.8vw, 5rem); } h1 em { font-style: italic; font-weight: 400; } h2 { font-size: clamp(1.85rem, 3.2vw, 2.7rem); letter-spacing: -0.01em; } h2 em { font-style: italic; } h3 { font-size: clamp(1.25rem, 1.8vw, 1.55rem); line-height: 1.25; } h4 { font-size: 1.1rem; line-height: 1.3; } p { font-size: 0.97rem; line-height: 1.75; color: var(--mid); } p strong { color: var(--charcoal); font-weight: 500; } p.lead { font-family: var(--serif); font-size: clamp(1.25rem, 1.9vw, 1.55rem); font-weight: 400; line-height: 1.55; color: var(--charcoal); letter-spacing: 0.005em; } p.lead em { font-style: italic; color: var(--mid); } .eyebrow { font-family: var(--sans); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); } .eyebrow.brass { color: var(--brass); } .eyebrow.ivory { color: var(--brass-soft); } .rule { width: 56px; height: 1px; background: var(--brass); margin: 22px 0; } .rule-light { background: var(--brass-soft); } /* ------------------------------------------------------------ layout primitives ------------------------------------------------------------ */ .inner { max-width: var(--max-w); margin: 0 auto; padding: 0 var(--pad-x); } .inner.narrow { max-width: var(--max-w-narrow); } section { padding: var(--pad-y) 0; } section + section { padding-top: 0; } .section-emerald { background: var(--emerald); color: var(--ivory); } .section-emerald h1, .section-emerald h2, .section-emerald h3, .section-emerald h4 { color: var(--ivory); } .section-emerald p { color: rgba(249, 247, 243, 0.78); } .section-emerald p strong { color: var(--ivory); } .section-warm { background: var(--ivory-warm); } .section-line { border-top: 1px solid var(--border); } /* ------------------------------------------------------------ navigation ------------------------------------------------------------ */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; transition: background 0.25s ease, box-shadow 0.25s ease, border 0.25s ease; border-bottom: 1px solid transparent; } .nav.scrolled { background: rgba(249, 247, 243, 0.96); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); } .nav-row { max-width: var(--max-w); margin: 0 auto; padding: 0 var(--pad-x); height: 76px; display: flex; align-items: center; justify-content: space-between; } .nav-logo { font-family: var(--serif); font-size: 1.5rem; font-weight: 500; letter-spacing: -0.01em; color: var(--charcoal); } .nav.on-emerald .nav-logo, .nav.on-emerald a { color: var(--ivory); } .nav.scrolled .nav-logo, .nav.scrolled a { color: var(--charcoal); } .nav-links { display: flex; gap: clamp(20px, 3vw, 40px); align-items: center; } .nav-links a { font-size: 0.85rem; font-weight: 400; letter-spacing: 0.04em; color: var(--charcoal); position: relative; } .nav-links a.active::after, .nav-links a:hover::after { content: ''; position: absolute; left: 0; right: 0; bottom: -6px; height: 1px; background: var(--brass); } .nav-toggle { display: none; } @media (max-width: 820px) { .nav-toggle { display: flex; flex-direction: column; justify-content: center; gap: 5px; width: 30px; height: 30px; cursor: pointer; } .nav-toggle span { display: block; height: 1px; background: currentColor; transition: all .3s; } .nav-links { position: fixed; top: 76px; left: 0; right: 0; flex-direction: column; gap: 0; background: var(--ivory); border-top: 1px solid var(--border); padding: 24px var(--pad-x); transform: translateY(-100%); opacity: 0; pointer-events: none; transition: transform .3s, opacity .3s; } .nav-links.open { transform: translateY(0); opacity: 1; pointer-events: auto; } .nav-links a { display: block; padding: 14px 0; border-bottom: 1px solid var(--border); width: 100%; } } /* ------------------------------------------------------------ hero (split: text left, portrait right; emerald left half) ------------------------------------------------------------ */ .hero { background: linear-gradient(90deg, rgba(8,32,28,0.55) 0%, rgba(8,32,28,0.18) 42%, rgba(8,32,28,0) 64%), linear-gradient(180deg, rgba(0,0,0,0.08) 0%, rgba(0,0,0,0) 24%), var(--emerald); color: var(--ivory); padding-top: 140px; padding-bottom: 0; overflow: hidden; position: relative; } .hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 12% 18%, rgba(201,172,130,0.10), transparent 22%), radial-gradient(circle at 72% 10%, rgba(249,247,243,0.05), transparent 18%); pointer-events: none; } .hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 80px); max-width: 1440px; margin: 0 auto; align-items: center; padding-left: clamp(24px, 5vw, 88px); position: relative; z-index: 1; } .hero-text { padding: 40px 0 96px 0; max-width: 600px; } .hero-text .eyebrow { color: var(--brass-soft); margin-bottom: 24px; display: block; position: relative; padding-left: 22px; } .hero-text .eyebrow::before { content: ''; position: absolute; left: 0; top: 50%; width: 12px; height: 1px; background: var(--brass-soft); transform: translateY(-50%); } .hero-text h1 { color: var(--ivory); font-size: clamp(2.75rem, 5.5vw, 4.9rem); line-height: 1.04; margin-bottom: 32px; text-wrap: balance; max-width: 12ch; } .hero-text h1 em { font-style: italic; color: var(--ivory); text-shadow: 0 0 0 rgba(0,0,0,0.01); } .hero-rule { width: 72px; height: 1px; background: var(--brass); margin-bottom: 28px; } .hero-name { font-family: var(--serif); font-size: clamp(1.45rem, 2vw, 1.8rem); font-weight: 400; color: var(--ivory); margin-bottom: 8px; letter-spacing: 0; } .hero-authority { font-family: var(--sans); font-size: 0.95rem; font-weight: 300; color: rgba(249, 247, 243, 0.84); line-height: 1.55; max-width: 460px; margin-bottom: 44px; } .hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; } .hero-portrait { align-self: start; display: flex; align-items: flex-start; height: 100%; position: relative; } .hero-portrait::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(8,32,28,0.22) 0%, rgba(8,32,28,0) 26%); pointer-events: none; z-index: 1; } .hero-portrait img { width: 100%; height: auto; max-height: 88vh; object-fit: cover; object-position: center top; filter: saturate(0.93) contrast(1.02); } @media (max-width: 900px) { .hero { padding-top: 110px; } .hero-grid { grid-template-columns: 1fr; padding-right: clamp(24px, 5vw, 88px); } .hero-text { padding: 0 0 56px 0; } .hero-portrait { max-height: 560px; } .hero-portrait img { max-height: 560px; } } /* ------------------------------------------------------------ buttons ------------------------------------------------------------ */ .btn { display: inline-flex; align-items: center; gap: 8px; padding: 14px 26px; font-family: var(--sans); font-size: 0.82rem; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; border: 1px solid currentColor; background: transparent; color: var(--charcoal); transition: all .2s ease; white-space: nowrap; } .btn:hover { background: var(--charcoal); color: var(--ivory); border-color: var(--charcoal); } .btn-solid { background: var(--charcoal); color: var(--ivory); border-color: var(--charcoal); } .btn-solid:hover { background: var(--emerald); border-color: var(--emerald); } .btn-ivory, .btn-outline-light { color: var(--ivory); border-color: var(--ivory); background: transparent; } .btn-ivory:hover, .btn-outline-light:hover { background: var(--ivory); color: var(--emerald); border-color: var(--ivory); } .btn-ivory-solid, .btn-solid-light { background: var(--ivory); color: var(--emerald); border-color: var(--ivory); } .btn-ivory-solid:hover, .btn-solid-light:hover { background: transparent; color: var(--ivory); } .btn .arr { transition: transform .2s ease; } .btn:hover .arr { transform: translateX(3px); } .link { display: inline-flex; align-items: center; gap: 8px; font-family: var(--sans); font-size: 0.78rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--charcoal); border-bottom: 1px solid var(--brass); padding-bottom: 4px; } .link:hover { color: var(--emerald); border-color: var(--emerald); } .link-ivory { color: var(--ivory); border-color: var(--brass-soft); } .link-ivory:hover { color: var(--ivory); border-color: var(--ivory); } /* ------------------------------------------------------------ credential strip — under hero ------------------------------------------------------------ */ .credentials { background: var(--emerald-deep); color: var(--ivory); padding: 28px 0; border-top: 1px solid var(--emerald-line); } .credentials-row { max-width: var(--max-w); margin: 0 auto; padding: 0 var(--pad-x); display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; } .cred { padding: 0 36px; border-right: 1px solid var(--emerald-line); } .cred:first-child { padding-left: 0; } .cred:last-child { border-right: none; padding-right: 0; } .cred-org { font-family: var(--serif); font-size: 1.4rem; font-weight: 500; color: var(--ivory); letter-spacing: 0; margin-bottom: 8px; } .cred-role { font-family: var(--sans); font-size: 0.85rem; line-height: 1.5; color: rgba(249, 247, 243, 0.82); font-weight: 300; } @media (max-width: 760px) { .credentials-row { grid-template-columns: 1fr; gap: 24px; } .cred { padding: 0; border-right: none; border-bottom: 1px solid var(--emerald-line); padding-bottom: 24px; } .cred:last-child { border-bottom: none; padding-bottom: 0; } } /* ------------------------------------------------------------ page header (interior pages) ------------------------------------------------------------ */ .page-header { background: var(--ivory); padding: 130px 0 48px 0; border-bottom: 1px solid var(--border); } .page-header .inner { max-width: var(--max-w); } .page-header .eyebrow { display: block; margin-bottom: 14px; } .page-header h1 { font-size: clamp(2rem, 4vw, 3.2rem); max-width: 18ch; margin-bottom: 22px; } .page-header .lead { max-width: 60ch; font-size: 0.95rem; } /* ------------------------------------------------------------ manifesto — promoted, centred, full-width emerald ------------------------------------------------------------ */ .manifesto { background: var(--emerald); color: var(--ivory); text-align: center; padding: clamp(64px, 8vw, 110px) var(--pad-x); } .manifesto-eyebrow { font-size: 0.72rem; letter-spacing: 0.28em; color: var(--brass-soft); font-weight: 500; margin-bottom: 36px; text-transform: uppercase; display: block; } .manifesto-mark { font-family: var(--serif); font-size: 4rem; line-height: 1; color: var(--brass); display: block; margin-bottom: 16px; font-weight: 300; } .manifesto-quote { font-family: var(--serif); font-size: clamp(1.7rem, 3vw, 2.6rem); line-height: 1.32; color: var(--ivory); font-weight: 300; font-style: italic; max-width: 26ch; margin: 0 auto 20px auto; letter-spacing: -0.005em; } .manifesto-quote em { font-style: normal; } .manifesto-quote .em-brass { color: var(--brass-soft); font-style: italic; } .manifesto-attr { font-family: var(--sans); font-size: 0.78rem; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(249, 247, 243, 0.6); margin-top: 36px; } /* ------------------------------------------------------------ pillars ------------------------------------------------------------ */ .pillars-section .pillars-head { text-align: center; margin-bottom: 48px; } .pillars-section .pillars-head h2 { max-width: 22ch; margin: 16px auto 0 auto; } .pillars-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } .pillar { padding: 44px 32px; border-right: 1px solid var(--border); display: flex; flex-direction: column; gap: 16px; } .pillar:last-child { border-right: none; } .pillar-num { font-family: var(--serif); font-size: 0.95rem; font-style: italic; color: var(--brass); } .pillar h3 { margin-bottom: 0; } .pillar p { margin-top: 12px; } @media (max-width: 800px) { .pillars-grid { grid-template-columns: 1fr; } .pillar { border-right: none; border-bottom: 1px solid var(--border); padding: 48px 0; } .pillar:last-child { border-bottom: none; } } /* ------------------------------------------------------------ position statement — quiet centred section ------------------------------------------------------------ */ .position { text-align: center; padding: var(--pad-y) var(--pad-x); max-width: 900px; margin: 0 auto; } .position .eyebrow { display: block; margin-bottom: 28px; } .position p.lead { font-size: clamp(1.4rem, 2.4vw, 2rem); line-height: 1.45; color: var(--charcoal); max-width: 38ch; margin: 0 auto; } .position p.lead em { color: var(--emerald); font-style: italic; } /* ------------------------------------------------------------ global scope band (emerald, with stats) ------------------------------------------------------------ */ .scope { background: var(--emerald); color: var(--ivory); padding: var(--pad-y) 0; } .scope .inner { display: grid; grid-template-columns: 1.1fr 1fr; gap: 80px; align-items: center; } .scope-text h2 { color: var(--ivory); margin-top: 18px; max-width: 20ch; } .scope-text p { color: rgba(249, 247, 243, 0.82); margin-top: 24px; max-width: 50ch; } .scope-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 36px 24px; padding-left: 40px; border-left: 1px solid var(--emerald-line); } .scope-stat-num { font-family: var(--serif); font-size: clamp(2.4rem, 4vw, 3.6rem); font-weight: 400; line-height: 1; color: var(--ivory); margin-bottom: 8px; } .scope-stat-num em { color: var(--brass-soft); font-style: normal; font-size: 0.6em; } .scope-stat-label { font-family: var(--sans); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--brass-soft); margin-bottom: 6px; } .scope-stat-desc { font-size: 0.85rem; color: rgba(249, 247, 243, 0.7); line-height: 1.45; } @media (max-width: 880px) { .scope .inner { grid-template-columns: 1fr; gap: 56px; } .scope-stats { padding-left: 0; border-left: none; padding-top: 32px; border-top: 1px solid var(--emerald-line); } } /* ------------------------------------------------------------ recognition — quiet line list ------------------------------------------------------------ */ .recognition-list { border-top: 1px solid var(--border); margin-top: 28px; } .recognition-row { display: grid; grid-template-columns: 80px 1fr auto; gap: 32px; align-items: baseline; padding: 22px 0; border-bottom: 1px solid var(--border); } .recognition-year { font-family: var(--serif); font-size: 1.3rem; font-weight: 400; color: var(--brass); } .recognition-name { font-family: var(--serif); font-size: 1.15rem; color: var(--charcoal); line-height: 1.3; } .recognition-source { font-family: var(--sans); font-size: 0.78rem; color: var(--muted); letter-spacing: 0.04em; } @media (max-width: 700px) { .recognition-row { grid-template-columns: 60px 1fr; gap: 16px; } .recognition-source { grid-column: 2; margin-top: 4px; } } /* ------------------------------------------------------------ section heads (interior + home use) ------------------------------------------------------------ */ .s-head { margin-bottom: 36px; } .s-head .eyebrow { display: block; margin-bottom: 16px; } .s-head h2 { max-width: 22ch; } .s-head.center { text-align: center; } .s-head.center h2 { margin-left: auto; margin-right: auto; } /* ------------------------------------------------------------ home preview cards (Speaking / Media / Insights / Contact) ------------------------------------------------------------ */ .preview-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } .preview { padding: 44px 36px; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); display: flex; flex-direction: column; } .preview:nth-child(2n) { border-right: none; } .preview:nth-last-child(-n+2) { border-bottom: none; } .preview .eyebrow { display: block; margin-bottom: 20px; } .preview h3 { margin-bottom: 16px; max-width: 22ch; } .preview p { margin-bottom: 32px; flex-grow: 1; } .preview .link { align-self: flex-start; margin-top: auto; } @media (max-width: 800px) { .preview-grid { grid-template-columns: 1fr; } .preview { border-right: none; padding: 48px 0; } .preview:nth-last-child(-n+2) { border-bottom: 1px solid var(--border); } .preview:last-child { border-bottom: none; } } /* ------------------------------------------------------------ media masthead row (real outlets) ------------------------------------------------------------ */ .mastheads { display: flex; flex-wrap: wrap; gap: 24px 40px; align-items: center; margin-top: 24px; } .masthead { font-family: var(--serif); font-size: 1.05rem; font-style: italic; color: var(--charcoal); font-weight: 400; letter-spacing: 0; white-space: nowrap; } .masthead.lg { font-size: 1.25rem; } /* ------------------------------------------------------------ speaking topics list ------------------------------------------------------------ */ .topics-list { display: grid; grid-template-columns: 1fr; border-top: 1px solid var(--border); } .topic { display: grid; grid-template-columns: 80px 1fr; gap: 32px; padding: 48px 0; border-bottom: 1px solid var(--border); } .topic-num { font-family: var(--serif); font-size: 2.2rem; font-style: italic; color: var(--brass); line-height: 1; } .topic h3 { margin-bottom: 14px; max-width: 28ch; } .topic-body { color: var(--mid); line-height: 1.7; max-width: 60ch; } .topic-body p + p { margin-top: 12px; } .topic-body em { font-style: italic; color: var(--charcoal); } @media (max-width: 700px) { .topic { grid-template-columns: 1fr; gap: 8px; padding: 36px 0; } } /* ------------------------------------------------------------ about — narrative biography ------------------------------------------------------------ */ .about-body { max-width: 68ch; margin: 0 auto; } .about-body p { font-family: var(--serif); font-size: 1.05rem; line-height: 1.7; color: var(--charcoal); margin-bottom: 1.4em; font-weight: 400; } .about-body p strong { font-weight: 500; } .about-body p em { font-style: italic; color: var(--mid); } .about-body .pull { font-size: 1.3rem; line-height: 1.4; color: var(--emerald); font-style: italic; font-weight: 400; border-left: 2px solid var(--brass); padding-left: 28px; margin: 1.8em 0; } .about-body h2 { font-size: 1.8rem; margin: 2.4em 0 0.6em 0; color: var(--charcoal); } .about-rule { width: 56px; height: 1px; background: var(--brass); margin: 3em 0; } /* ------------------------------------------------------------ boards & affiliations ------------------------------------------------------------ */ .boards { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; margin-top: 32px; } .board { padding: 32px; border: 1px solid var(--border); background: var(--white); } .board h4 { font-family: var(--serif); font-size: 1.4rem; margin-bottom: 8px; } .board .eyebrow { display: block; margin-bottom: 16px; } .board p { font-family: var(--sans); font-size: 0.92rem; } @media (max-width: 700px) { .boards { grid-template-columns: 1fr; gap: 20px; } } /* ------------------------------------------------------------ publications grid ------------------------------------------------------------ */ .year-block { margin-bottom: 40px; } .year-block:last-child { margin-bottom: 0; } .year-label { font-family: var(--serif); font-size: 2.4rem; color: var(--brass); font-weight: 400; margin-bottom: 32px; font-style: italic; } .pub-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; } .pub { display: grid; grid-template-columns: 100px 1fr; gap: 24px; padding: 24px; background: var(--white); border: 1px solid var(--border); transition: border-color .2s ease, transform .2s ease; } .pub:hover { border-color: var(--brass); transform: translateY(-2px); } .pub-thumb { width: 100px; height: 130px; object-fit: cover; background: var(--ivory-dark); } .pub-thumb-text { width: 100px; height: 130px; background: linear-gradient(155deg, var(--emerald) 0%, var(--emerald-deep) 100%); color: var(--ivory); display: flex; align-items: center; justify-content: center; font-family: var(--sans); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; text-align: center; padding: 12px; line-height: 1.4; border-left: 2px solid var(--brass); flex-shrink: 0; } .pub-thumb-img { width: 100px; height: 130px; object-fit: cover; flex-shrink: 0; border: 1px solid var(--border); } .pub-meta { display: flex; flex-direction: column; justify-content: space-between; } .pub-date { font-family: var(--sans); font-size: 0.7rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--brass); margin-bottom: 8px; } .pub h4 { font-family: var(--serif); font-size: 1.1rem; font-weight: 500; line-height: 1.3; color: var(--charcoal); margin-bottom: 6px; } .pub p { font-size: 0.85rem; line-height: 1.5; color: var(--mid); margin-bottom: 12px; } .pub a.link { font-size: 0.7rem; align-self: flex-start; } @media (max-width: 700px) { .pub-grid { grid-template-columns: 1fr; } } /* ------------------------------------------------------------ videos grid ------------------------------------------------------------ */ .video-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px; } .video { display: flex; flex-direction: column; } .video-frame { position: relative; width: 100%; padding-bottom: 56.25%; background: var(--charcoal); margin-bottom: 20px; } .video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: none; } .video-date { font-family: var(--sans); font-size: 0.7rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--brass); margin-bottom: 8px; } .video h4 { font-family: var(--serif); font-size: 1.25rem; font-weight: 500; margin-bottom: 12px; line-height: 1.3; } .video p { font-size: 0.9rem; } @media (max-width: 760px) { .video-grid { grid-template-columns: 1fr; gap: 32px; } } /* ------------------------------------------------------------ book showcase ------------------------------------------------------------ */ .book-showcase { background: var(--emerald); color: var(--ivory); padding: var(--pad-y) 0; } .book-showcase .inner { display: grid; grid-template-columns: 1fr 1.4fr; gap: 80px; align-items: center; } .book-cover { display: flex; justify-content: center; } .book-cover img { max-width: 320px; width: 100%; box-shadow: 0 30px 60px rgba(0,0,0,0.4), 0 10px 20px rgba(0,0,0,0.2); } .book-text .eyebrow { color: var(--brass-soft); display: block; margin-bottom: 20px; } .book-text h2 { color: var(--ivory); margin-bottom: 24px; max-width: 22ch; } .book-text p { color: rgba(249, 247, 243, 0.82); margin-bottom: 18px; max-width: 56ch; } .book-text p strong { color: var(--ivory); } .book-meta { border-top: 1px solid var(--emerald-line); border-bottom: 1px solid var(--emerald-line); padding: 20px 0; margin: 32px 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .book-meta-item .eyebrow { color: var(--brass-soft); display: block; margin-bottom: 4px; } .book-meta-item span { font-family: var(--serif); font-size: 1.1rem; color: var(--ivory); } @media (max-width: 880px) { .book-showcase .inner { grid-template-columns: 1fr; gap: 48px; text-align: center; } .book-text h2, .book-text p { margin-left: auto; margin-right: auto; } .book-meta { grid-template-columns: 1fr; gap: 14px; text-align: left; } } /* ------------------------------------------------------------ contact / forms ------------------------------------------------------------ */ .contact-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin-top: 56px; } .contact-card { padding: 40px 32px; background: var(--white); border: 1px solid var(--border); display: flex; flex-direction: column; } .contact-card h3 { margin-bottom: 12px; } .contact-card .eyebrow { display: block; margin-bottom: 16px; color: var(--brass); } .contact-card p { margin-bottom: 24px; flex-grow: 1; } .contact-card a.link { align-self: flex-start; } @media (max-width: 880px) { .contact-grid { grid-template-columns: 1fr; } } .form { margin-top: 24px; display: flex; flex-direction: column; gap: 14px; } .form input, .form select, .form textarea { width: 100%; padding: 14px 16px; font: inherit; font-family: var(--sans); font-size: 0.9rem; background: var(--ivory); border: 1px solid var(--border); color: var(--charcoal); transition: border-color .2s; } .form input:focus, .form select:focus, .form textarea:focus { outline: none; border-color: var(--emerald); } .form textarea { min-height: 120px; resize: vertical; } .form button { align-self: flex-start; margin-top: 8px; } /* ------------------------------------------------------------ interior rhythm helpers ------------------------------------------------------------ */ .side-note { padding: 24px 28px; border-left: 2px solid var(--brass); background: var(--ivory-warm); font-size: 0.92rem; color: var(--mid); } .side-note strong { color: var(--charcoal); } .image-block { margin: 56px 0; border: 1px solid var(--border); background: var(--white); overflow: hidden; } .image-block img { width: 100%; height: auto; display: block; } .image-block figcaption { padding: 18px 22px; font-size: 0.84rem; color: var(--muted); border-top: 1px solid var(--border); } .side-rail { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 48px; align-items: start; } .side-rail-aside { position: sticky; top: 110px; align-self: start; padding: 28px; border: 1px solid var(--border); background: var(--white); } .side-rail-aside h4 { margin-bottom: 10px; } .side-rail-aside p:last-child { margin-bottom: 0; } @media (max-width: 980px) { .side-rail { grid-template-columns: 1fr; } .side-rail-aside { position: static; top: auto; } } /* ------------------------------------------------------------ footer ------------------------------------------------------------ */ .footer { background: var(--emerald-deep); color: var(--ivory); padding: 52px 0 32px 0; } .footer .inner { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px; } .footer-brand .nav-logo { color: var(--ivory); display: block; margin-bottom: 16px; } .footer-tagline { font-family: var(--serif); font-size: 1.05rem; font-style: italic; color: rgba(249, 247, 243, 0.7); max-width: 36ch; line-height: 1.45; } .footer-col h5 { font-family: var(--sans); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--brass-soft); margin-bottom: 18px; } .footer-col a { display: block; font-size: 0.88rem; color: rgba(249, 247, 243, 0.78); padding: 4px 0; font-weight: 300; } .footer-col a:hover { color: var(--ivory); } .footer-base { margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--emerald-line); display: flex; justify-content: space-between; align-items: center; font-size: 0.78rem; color: rgba(249, 247, 243, 0.5); } .footer-base a { color: rgba(249, 247, 243, 0.6); } @media (max-width: 800px) { .footer .inner { grid-template-columns: 1fr 1fr; } .footer-brand { grid-column: 1 / -1; } .footer-base { flex-direction: column; gap: 12px; align-items: flex-start; } } /* utilities */ .sr-only { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .center { text-align: center; } /* ------------------------------------------------------------ scroll-margin-top — compensate for fixed nav on anchor targets ------------------------------------------------------------ */ [id] { scroll-margin-top: 96px; } /* ------------------------------------------------------------ form select — consistent cross-browser styling ------------------------------------------------------------ */ .form select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%234A4A4A' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 40px; cursor: pointer; } /* ------------------------------------------------------------ responsive — inline grid sections (media, speaking, about, contact) These sections use inline style grids; these rules override at mobile ------------------------------------------------------------ */ @media (max-width: 760px) { /* media.html & speaking.html — two-column intro block */ .media-intro-grid, .speaking-intro-grid { grid-template-columns: 1fr !important; } /* media.html — six-topic commentary grid */ .media-topics-grid { grid-template-columns: 1fr !important; } /* speaking.html — formats grid */ .speaking-formats-grid { grid-template-columns: 1fr !important; } /* about.html — visual anchor block */ .about-visual-anchor { grid-template-columns: 1fr !important; } /* contact.html — direct/operational note block */ .contact-details-grid { grid-template-columns: 1fr !important; } /* insights.html — CTA band */ .insights-cta-flex { flex-direction: column !important; align-items: flex-start !important; } /* about.html & insights.html — emerald CTA band */ .emerald-cta-flex { flex-direction: column !important; align-items: flex-start !important; } }