/* ============================================================ BRYONY LANCASTER — MAIN STYLESHEET Fonts: Jost (Futura alt) · Barlow (DIN alt) · Raleway (Brandon alt) · Nunito Sans (Proxima alt) To use exact Wix fonts, add your Adobe Fonts kit in each HTML and the font-family stacks already reference the correct Wix font names. ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,300;0,400;0,500;1,300&family=Barlow:ital,wght@0,300;0,400;1,300&family=Raleway:ital,wght@0,300;0,400;0,600;1,300&family=Nunito+Sans:ital,wght@0,300;0,400;0,600;1,400&display=swap'); /* ============================================================ CUSTOM PROPERTIES ============================================================ */ :root { --sage: #424325; --sage-dark: #2e2f18; --sage-mid: #424325; --sage-light: #d4d4b8; --sage-pale: #ebebd8; --cream: #F8F6F2; --white: #FFFFFF; --text: #2D2D2D; --text-mid: #555555; --text-light: #8E8E8E; --border: #E2E2E2; --nav-h: 68px; --max-w: 1180px; --pad-x: 48px; --f-futura: 'Jost', 'futura-lt-w01-book', sans-serif; --f-din: 'Barlow', 'din-next-w01-light', sans-serif; --f-brandon: 'Raleway', 'brandon-grot-w01-light', sans-serif; --f-proxima: 'Nunito Sans', 'proxima-n-w01-reg', sans-serif; } /* ============================================================ RESET ============================================================ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; scroll-behavior: smooth; } body { font-family: var(--f-din); font-weight: 300; font-size: 16px; line-height: 1.4em; color: var(--text); background: var(--white); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } img { max-width: 100%; height: auto; display: block; } a { text-decoration: none; color: inherit; cursor: pointer; } ul { list-style: none; } button { cursor: pointer; font-family: inherit; } /* ============================================================ UTILITIES ============================================================ */ .container { max-width: var(--max-w); margin: 0 auto; padding: 0 var(--pad-x); } .section-header { text-align: center; margin-bottom: 58px; } .section-header h2 { font-family: var(--f-futura); font-size: 30px; font-weight: 300; line-height: 1.4em; letter-spacing: 0.04em; color: var(--text); margin-bottom: 16px; } .section-header p { font-family: var(--f-din); font-size: 16px; font-weight: 300; line-height: 1.6em; color: var(--text-mid); max-width: 560px; margin: 0 auto; } .divider { width: 36px; height: 1px; background: var(--sage); margin: 18px auto 0; } /* Buttons */ .btn { display: inline-block; padding: 13px 38px; font-family: var(--f-proxima); font-size: 13px; font-weight: 400; line-height: 1.4em; letter-spacing: 0.12em; text-transform: uppercase; transition: all 0.25s ease; } .btn-outline-white { border: 1.5px solid rgba(255,255,255,0.85); color: var(--white); background: transparent; } .btn-outline-white:hover { background: var(--white); color: var(--text); border-color: var(--white); } .btn-outline-dark { border: 1.5px solid var(--text); color: var(--text); background: transparent; } .btn-outline-dark:hover { background: var(--sage); color: var(--white); border-color: var(--sage); } .btn-sage { background: var(--sage); color: var(--white); border: 1.5px solid var(--sage); } .btn-sage:hover { background: var(--sage-dark); border-color: var(--sage-dark); } /* ============================================================ NAVIGATION ============================================================ */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; height: var(--nav-h); background: var(--white); border-bottom: 1px solid var(--border); } .nav-inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 100%; max-width: var(--max-w); margin: 0 auto; padding: 0 var(--pad-x); } .nav-left { display: flex; align-items: center; gap: 30px; } .nav-right { display: flex; align-items: center; gap: 30px; justify-content: flex-end; } .nav-link { font-family: var(--f-proxima); font-size: 12px; font-weight: 400; line-height: 1.4em; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text); white-space: nowrap; transition: color 0.2s; } .nav-link:hover, .nav-link.active { color: var(--sage); } .nav-logo-wrap { display: flex; flex-direction: column; align-items: center; gap: 4px; text-decoration: none; } .nav-logo-icon { width: 28px; height: 28px; color: var(--sage); display: block; } .nav-logo-name { font-family: var(--f-futura); font-size: 13px; font-weight: 300; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text); white-space: nowrap; } .nav-socials { display: flex; align-items: center; gap: 10px; margin-left: 6px; } .nav-social-btn { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; color: var(--text-light); transition: color 0.2s; } .nav-social-btn:hover { color: var(--sage); } .nav-social-btn svg { width: 16px; height: 16px; } /* Hamburger */ .nav-burger { display: none; flex-direction: column; gap: 5px; background: none; border: none; padding: 4px; } .nav-burger span { display: block; width: 22px; height: 1.5px; background: var(--text); transition: all 0.3s ease; } .nav-burger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); } .nav-burger.open span:nth-child(2) { opacity: 0; } .nav-burger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); } /* Mobile Nav */ .mobile-menu { display: none; position: fixed; top: var(--nav-h); left: 0; right: 0; bottom: 0; background: var(--white); z-index: 999; flex-direction: column; align-items: center; justify-content: center; gap: 36px; } .mobile-menu.open { display: flex; } .mobile-menu .nav-link { font-size: 16px; letter-spacing: 0.14em; } .mobile-menu .nav-socials { gap: 20px; margin-left: 0; margin-top: 8px; } .mobile-menu .nav-social-btn { width: 44px; height: 44px; } .mobile-menu .nav-social-btn svg { width: 22px; height: 22px; } /* ============================================================ HERO ============================================================ */ .hero { position: relative; z-index: 2; min-height: 580px; display: flex; align-items: center; justify-content: center; margin-top: var(--nav-h); margin-left: 64px; margin-right: 64px; overflow: hidden; background-color: var(--sage); } .hero-bg { position: absolute; inset: 0; background-size: cover; background-position: center; background-repeat: no-repeat; } .hero-overlay { position: absolute; inset: 0; background: rgba(55, 75, 50, 0.32); } .hero-content { position: relative; z-index: 2; text-align: center; color: var(--white); padding: 0 24px; max-width: 680px; } .hero-content h1 { font-family: var(--f-futura); font-size: 54px; font-weight: 300; line-height: 1.15em; letter-spacing: 0.01em; margin-bottom: 20px; white-space: nowrap; } .hero-content p { font-family: var(--f-brandon); font-size: 16px; font-weight: 700; line-height: 1.7em; letter-spacing: 0.04em; opacity: 1; margin-bottom: 36px; } /* ============================================================ ABOUT SECTION ============================================================ */ .about { display: grid; grid-template-columns: 1fr 1fr; gap: 0; align-items: stretch; /* Full-width green box that underlaps the hero */ background: #424325; margin: -80px 0 0; position: relative; z-index: 1; /* 140px top = 80px hero overlap + 60px visible green above photo */ padding: 140px 64px 80px; } .about-image { background-color: var(--sage-light); background-size: cover; background-position: center 15%; background-repeat: no-repeat; /* No margin — photo and card touch, same height via stretch */ } .about-text { /* White card — same height as photo, no gap between them */ background: var(--white); padding: 72px 52px; display: flex; flex-direction: column; justify-content: center; color: var(--text); } .about-text h2 { font-family: var(--f-futura); font-size: 26px; font-weight: 300; line-height: 1.35em; letter-spacing: 0.03em; color: var(--text); margin-bottom: 6px; } .about-text .tagline { font-family: var(--f-brandon); font-size: 14px; font-weight: 300; font-style: italic; line-height: 1.4em; letter-spacing: 0.04em; color: var(--text-mid); margin-bottom: 20px; } .about-text p { font-family: var(--f-din); font-size: 15px; font-weight: 300; line-height: 1.7em; color: var(--text-mid); margin-bottom: 12px; } .about-text .btn { align-self: flex-start; margin-top: 14px; } .btn-outline-white-sm { border: 1px solid rgba(255,255,255,0.7); color: var(--white); background: transparent; padding: 10px 28px; font-family: var(--f-proxima); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; transition: all 0.25s; display: inline-block; } .btn-outline-white-sm:hover { background: var(--white); color: var(--text); } /* ============================================================ WHY / FEATURES SECTION ============================================================ */ .why { padding: 90px 0; background: var(--white); } .features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 52px 40px; } .feature-card { text-align: center; } .feature-icon { width: 52px; height: 52px; margin: 0 auto 18px; color: var(--sage); } .feature-icon svg { width: 100%; height: 100%; stroke-width: 1.2; } .feature-card h3 { font-family: var(--f-futura); font-size: 14px; font-weight: 400; line-height: 1.4em; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text); margin-bottom: 10px; } .feature-card p { font-family: var(--f-din); font-size: 14px; font-weight: 300; line-height: 1.4em; color: var(--text-mid); } /* ============================================================ TESTIMONIALS ============================================================ */ .testimonials { padding: 90px 0; background: var(--cream); } .testimonial-wrap { max-width: 680px; margin: 0 auto; text-align: center; } .testimonial-item { display: none; } .testimonial-item.active { display: block; } .testimonial-quote { font-family: var(--f-brandon); font-size: 18px; font-weight: 300; font-style: italic; line-height: 1.75em; color: var(--text-mid); margin-bottom: 22px; } .testimonial-author { font-family: var(--f-proxima); font-size: 12px; font-weight: 400; line-height: 1.4em; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-light); } .testimonial-dots { display: flex; justify-content: center; gap: 8px; margin-top: 30px; } .testimonial-dots button { width: 8px; height: 8px; border-radius: 50%; border: none; background: var(--sage-light); padding: 0; transition: background 0.2s; } .testimonial-dots button.active { background: var(--sage); } /* ============================================================ SERVICES SECTION ============================================================ */ .services { padding: 90px 0; background: var(--white); } .services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; } .service-card { text-align: center; } .service-card a { color: inherit; text-decoration: none; } .service-card a:hover .service-img img { opacity: 0.85; } .service-card a:hover h3 { color: var(--sage); } .service-img img { transition: opacity 0.25s; } .service-img { width: 170px; height: 170px; border-radius: 50%; overflow: hidden; margin: 0 auto 22px; background: var(--sage-light) url('../images/service-placeholder.jpg') center/cover no-repeat; } .service-img img { width: 100%; height: 100%; object-fit: cover; } .service-card h3 { font-family: var(--f-futura); font-size: 14px; font-weight: 400; line-height: 1.4em; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text); margin-bottom: 8px; } .service-card p { font-family: var(--f-din); font-size: 14px; font-weight: 300; line-height: 1.4em; color: var(--text-mid); } /* ============================================================ FOOTER ============================================================ */ footer { background: var(--sage-pale); padding: 52px 0 30px; border-top: 1px solid var(--border); } .footer-inner { max-width: var(--max-w); margin: 0 auto; padding: 0 var(--pad-x); display: flex; flex-direction: column; align-items: center; gap: 0; } .footer-logo { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-bottom: 24px; } .footer-logo svg { width: 26px; height: 26px; color: var(--sage); } .footer-logo-name { font-family: var(--f-futura); font-size: 13px; font-weight: 300; letter-spacing: 0.22em; text-transform: uppercase; color: var(--text); } .footer-links { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px 22px; margin-bottom: 22px; } .footer-links a { font-family: var(--f-proxima); font-size: 12px; font-weight: 400; line-height: 1.4em; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-mid); transition: color 0.2s; } .footer-links a:hover { color: var(--sage); } .footer-socials { display: flex; justify-content: center; gap: 14px; margin-bottom: 26px; } .footer-socials a { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; color: var(--text-light); transition: color 0.2s; } .footer-socials a:hover { color: var(--sage); } .footer-socials svg { width: 17px; height: 17px; } .footer-copy { font-family: var(--f-proxima); font-size: 11px; line-height: 1.4em; color: var(--text-light); letter-spacing: 0.06em; } /* ============================================================ PAGE HERO (interior pages) ============================================================ */ .page-hero { position: relative; min-height: 380px; display: flex; align-items: center; justify-content: center; margin-top: var(--nav-h); background-color: var(--sage); background-size: cover; background-position: center; background-repeat: no-repeat; overflow: hidden; } .page-hero::after { content: ''; position: absolute; inset: 0; background: rgba(60, 80, 52, 0.35); } .page-hero-content { position: relative; z-index: 1; text-align: center; color: var(--white); padding: 0 24px; } .page-hero-content h1 { font-family: var(--f-futura); font-size: 48px; font-weight: 300; line-height: 1.2em; letter-spacing: 0.04em; margin-bottom: 14px; } .page-hero-content p { font-family: var(--f-brandon); font-size: 16px; font-weight: 300; line-height: 1.7em; opacity: 0.85; letter-spacing: 0.04em; max-width: 520px; margin: 0 auto; } /* ============================================================ WORKSHOPS PAGE ============================================================ */ .workshops-section { padding: 90px 0; } .workshops-section .section-header p a { color: var(--sage); text-decoration: underline; text-underline-offset: 3px; transition: opacity 0.2s; } .workshops-section .section-header p a:hover { opacity: 0.7; } .workshop-list { display: flex; flex-direction: column; gap: 24px; } .workshop-item { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; border: 1px solid #000; padding: 52px 48px; } .workshop-item.reverse .workshop-img { order: 2; } .workshop-item.reverse .workshop-info { order: 1; } .workshop-img { height: 400px; background: var(--sage-light) url('../images/workshop-1.jpg') center/cover no-repeat; border-radius: 1px; } .workshop-info .tag { font-family: var(--f-proxima); font-size: 11px; font-weight: 400; line-height: 1.4em; letter-spacing: 0.2em; text-transform: uppercase; color: var(--sage); margin-bottom: 12px; } .workshop-info h3 { font-family: var(--f-futura); font-size: 28px; font-weight: 300; line-height: 1.3em; letter-spacing: 0.02em; margin-bottom: 14px; color: var(--text); } .workshop-meta { display: flex; gap: 20px; flex-wrap: wrap; margin-bottom: 18px; } .workshop-meta span { display: flex; align-items: center; gap: 6px; font-family: var(--f-proxima); font-size: 12px; font-weight: 400; line-height: 1.4em; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-light); } .workshop-meta svg { width: 14px; height: 14px; color: var(--sage); flex-shrink: 0; } .workshop-info p { font-family: var(--f-din); font-size: 16px; font-weight: 300; line-height: 1.75em; color: var(--text-mid); margin-bottom: 26px; } /* ============================================================ ARTICLES PAGE ============================================================ */ .articles-section { padding: 90px 0; } .articles-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px 36px; } .article-card { cursor: pointer; } .article-img { height: 220px; overflow: hidden; background: var(--sage-light); margin-bottom: 20px; } .article-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; } .article-card:hover .article-img img { transform: scale(1.04); } .article-tag { font-family: var(--f-proxima); font-size: 11px; font-weight: 400; line-height: 1.4em; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sage); margin-bottom: 8px; } .article-card h3 { font-family: var(--f-futura); font-size: 20px; font-weight: 300; line-height: 1.35em; letter-spacing: 0.01em; color: var(--text); margin-bottom: 10px; transition: color 0.2s; } .article-card:hover h3 { color: var(--sage-dark); } .article-card p { font-family: var(--f-din); font-size: 14px; font-weight: 300; line-height: 1.4em; color: var(--text-mid); margin-bottom: 12px; } .article-date { font-family: var(--f-proxima); font-size: 12px; line-height: 1.4em; color: var(--text-light); } /* ============================================================ AUDIO PAGE ============================================================ */ .audio-section { padding: 90px 0; } .audio-intro { max-width: 600px; margin: 0 auto 60px; text-align: center; } .audio-intro p { font-family: var(--f-din); font-size: 16px; font-weight: 300; line-height: 1.7em; color: var(--text-mid); } .soundcloud-list { max-width: 720px; margin: 0 auto; } .soundcloud-item { padding: 32px 0; border-bottom: 1px solid var(--border); } .soundcloud-item:first-child { padding-top: 0; } .soundcloud-item:last-child { border-bottom: none; padding-bottom: 0; } .soundcloud-item h3 { font-family: var(--f-futura); font-size: 18px; font-weight: 300; line-height: 1.3em; letter-spacing: 0.02em; color: var(--text); margin-bottom: 16px; } .soundcloud-item iframe { display: block; border: 0; border-radius: 2px; width: 100%; } /* ============================================================ CONTACT PAGE ============================================================ */ .contact-section { padding: 90px 0; } .contact-grid { display: grid; grid-template-columns: 1fr 1.6fr; gap: 80px; align-items: start; } .contact-info h3 { font-family: var(--f-futura); font-size: 26px; font-weight: 300; line-height: 1.35em; letter-spacing: 0.02em; margin-bottom: 18px; color: var(--text); } .contact-info > p { font-family: var(--f-din); font-size: 16px; font-weight: 300; line-height: 1.75em; color: var(--text-mid); margin-bottom: 28px; } .contact-detail { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 14px; font-family: var(--f-din); font-size: 15px; font-weight: 300; line-height: 1.5em; color: var(--text); } .contact-detail svg { width: 17px; height: 17px; color: var(--sage); flex-shrink: 0; margin-top: 2px; } .contact-form { display: flex; flex-direction: column; gap: 22px; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; } .form-group { display: flex; flex-direction: column; gap: 6px; } .form-group label { font-family: var(--f-proxima); font-size: 11px; font-weight: 400; line-height: 1.4em; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-mid); } .form-group input, .form-group textarea, .form-group select { font-family: var(--f-din); font-size: 15px; font-weight: 300; line-height: 1.4em; color: var(--text); background: transparent; border: none; border-bottom: 1.5px solid var(--border); padding: 10px 0; outline: none; width: 100%; transition: border-color 0.2s; appearance: none; } .form-group input::placeholder, .form-group textarea::placeholder { color: var(--text-light); } .form-group input:focus, .form-group textarea:focus, .form-group select:focus { border-color: var(--sage); } .form-group textarea { resize: vertical; min-height: 120px; } .form-status { font-family: var(--f-din); font-size: 14px; font-weight: 300; line-height: 1.5em; min-height: 1.5em; } .form-status--ok { color: var(--sage); } .form-status--err { color: #b94040; } /* ============================================================ ABOUT PAGE ============================================================ */ .about-page-bio { background: #424325; } .about-page-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; align-items: stretch; } .about-page-image { background-size: cover; background-position: center 15%; background-repeat: no-repeat; min-height: 580px; } .about-page-text { background: var(--white); padding: 72px 60px; display: flex; flex-direction: column; justify-content: center; } .about-page-tag { font-family: var(--f-brandon); font-size: 13px; font-weight: 300; font-style: italic; letter-spacing: 0.06em; color: var(--sage); margin-bottom: 10px; } .about-page-text h2 { font-family: var(--f-futura); font-size: 32px; font-weight: 300; line-height: 1.3em; letter-spacing: 0.03em; color: var(--text); margin-bottom: 24px; } .about-page-text p { font-family: var(--f-din); font-size: 15px; font-weight: 300; line-height: 1.8em; color: var(--text-mid); margin-bottom: 16px; } .about-page-philosophy { padding: 90px 0; background: var(--cream); } .about-page-philosophy-text { max-width: 720px; margin: 0 auto; text-align: center; } .about-page-philosophy-text p { font-family: var(--f-din); font-size: 16px; font-weight: 300; line-height: 1.8em; color: var(--text-mid); margin-bottom: 16px; } .about-page-credentials { padding: 90px 0; background: var(--white); } .credentials-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 52px 40px; } .credential-item { text-align: center; } .credential-icon { width: 52px; height: 52px; margin: 0 auto 18px; color: var(--sage); } .credential-icon svg { width: 100%; height: 100%; stroke-width: 1.2; } .credential-item h3 { font-family: var(--f-futura); font-size: 14px; font-weight: 400; letter-spacing: 0.06em; color: var(--text); margin-bottom: 8px; text-transform: uppercase; } .credential-item p { font-family: var(--f-din); font-size: 14px; font-weight: 300; line-height: 1.6em; color: var(--text-mid); } .about-page-strip { height: 420px; background-size: cover; background-position: center 20%; background-repeat: no-repeat; } .about-page-cta { padding: 90px 0; background: var(--sage-pale); text-align: center; } .about-page-cta h2 { font-family: var(--f-futura); font-size: 30px; font-weight: 300; letter-spacing: 0.04em; color: var(--text); margin-bottom: 16px; } .about-page-cta p { font-family: var(--f-din); font-size: 16px; font-weight: 300; line-height: 1.7em; color: var(--text-mid); max-width: 540px; margin: 0 auto 36px; } .about-page-cta-btns { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; } /* ============================================================ CONNECT PAGE ============================================================ */ .connect-section { padding: 100px 0; min-height: calc(100vh - var(--nav-h) - 160px); display: flex; align-items: center; } .connect-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px; max-width: 680px; margin: 0 auto; } .connect-card { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 52px 36px; border: 1px solid var(--border); transition: border-color 0.25s, transform 0.25s, box-shadow 0.25s; text-decoration: none; } .connect-card:hover { border-color: var(--sage); transform: translateY(-5px); box-shadow: 0 14px 36px rgba(0,0,0,0.08); } .connect-icon { width: 68px; height: 68px; margin-bottom: 22px; color: var(--sage); } .connect-icon svg { width: 100%; height: 100%; } .connect-card h3 { font-family: var(--f-futura); font-size: 18px; font-weight: 400; line-height: 1.4em; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text); margin-bottom: 10px; } .connect-card p { font-family: var(--f-din); font-size: 14px; font-weight: 300; line-height: 1.4em; color: var(--text-mid); } /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width: 1024px) { :root { --pad-x: 36px; } .hero-content h1 { font-size: 54px; } .about-text { padding: 60px 44px; } .contact-grid { grid-template-columns: 1fr 1.3fr; gap: 56px; } } @media (max-width: 768px) { :root { --nav-h: 60px; --pad-x: 24px; } /* Nav */ .nav-left, .nav-right { display: none; } .nav-inner { grid-template-columns: 1fr auto 1fr; } .nav-inner > *:first-child { justify-content: flex-start; } .nav-burger { display: flex; } .nav-inner .nav-burger { grid-column: 3; justify-self: end; } /* Hero */ .hero { min-height: 420px; margin-left: 16px; margin-right: 16px; } .hero-content h1 { font-size: 40px; white-space: normal; } .hero-content p { font-size: 15px; } /* About */ .about { grid-template-columns: 1fr; margin: -40px 0 0; padding: 60px 16px 40px; } .about-image { min-height: 320px; } .about-text { padding: 36px 28px; } .about-text h2 { font-size: 22px; } /* Features */ .features-grid { grid-template-columns: 1fr 1fr; gap: 36px 20px; } /* Services */ .services-grid { grid-template-columns: 1fr; max-width: 320px; margin: 0 auto; } /* Page hero */ .page-hero { min-height: 260px; } .page-hero-content h1 { font-size: 34px; } /* Workshops */ .workshop-item { grid-template-columns: 1fr; gap: 24px; padding: 32px 24px; } .workshop-item.reverse .workshop-img, .workshop-item.reverse .workshop-info { order: unset; } .workshop-img { height: 260px; } /* Articles */ .articles-grid { grid-template-columns: 1fr 1fr; gap: 36px 24px; } /* Contact */ .contact-grid { grid-template-columns: 1fr; gap: 48px; } .form-row { grid-template-columns: 1fr; } /* Connect */ .connect-grid { grid-template-columns: 1fr; max-width: 300px; } } @media (max-width: 520px) { .hero-content h1 { font-size: 32px; } .features-grid { grid-template-columns: 1fr; } .articles-grid { grid-template-columns: 1fr; } .about-text { margin: 0 16px 24px; padding: 28px 20px; } .section-header h2 { font-size: 26px; } } /* ============================================================ ARTICLE SINGLE PAGE ============================================================ */ /* Full-bleed featured image header */ .article-hero { position: relative; height: 520px; margin-top: var(--nav-h); overflow: hidden; background-color: var(--sage); background-size: cover; background-position: center; background-repeat: no-repeat; } .article-hero::after { content: ''; position: absolute; inset: 0; background: rgba(40, 58, 36, 0.38); } /* Article header (sits below the image) */ .article-header { max-width: 760px; margin: 0 auto; padding: 60px var(--pad-x) 0; text-align: center; } .article-header .article-tag { font-family: var(--f-proxima); font-size: 11px; font-weight: 400; line-height: 1.4em; letter-spacing: 0.2em; text-transform: uppercase; color: var(--sage); display: inline-block; margin-bottom: 16px; } .article-header h1 { font-family: var(--f-futura); font-size: 38px; font-weight: 300; line-height: 1.25em; letter-spacing: 0.02em; color: var(--text); margin-bottom: 18px; } .article-header .article-meta { display: flex; align-items: center; justify-content: center; gap: 20px; font-family: var(--f-proxima); font-size: 12px; font-weight: 400; line-height: 1.4em; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-light); margin-bottom: 48px; } .article-header .article-meta span { display: flex; align-items: center; gap: 6px; } .article-header .article-meta svg { width: 13px; height: 13px; color: var(--sage); } .article-divider { width: 40px; height: 1px; background: var(--border); margin: 0 auto 60px; } /* Article body */ .article-body { max-width: 720px; margin: 0 auto; padding: 0 var(--pad-x) 80px; } .article-body p { font-family: var(--f-brandon); font-size: 17px; font-weight: 300; line-height: 1.85em; color: var(--text-mid); margin-bottom: 24px; } .article-body h2 { font-family: var(--f-futura); font-size: 24px; font-weight: 300; line-height: 1.35em; letter-spacing: 0.02em; color: var(--text); margin-top: 52px; margin-bottom: 18px; } .article-body h3 { font-family: var(--f-futura); font-size: 18px; font-weight: 400; line-height: 1.4em; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text); margin-top: 40px; margin-bottom: 14px; } .article-body blockquote { margin: 44px 0; padding: 0 0 0 28px; border-left: 2px solid var(--sage); } .article-body blockquote p { font-family: var(--f-brandon); font-size: 20px; font-weight: 300; font-style: italic; line-height: 1.7em; color: var(--text); opacity: 1; margin-bottom: 8px; } .article-body blockquote cite { font-family: var(--f-proxima); font-size: 12px; font-weight: 400; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-light); font-style: normal; } .article-body figure { margin: 44px 0; } .article-body figure img { width: 100%; height: 420px; object-fit: cover; display: block; } .article-body figure figcaption { font-family: var(--f-proxima); font-size: 12px; line-height: 1.4em; color: var(--text-light); text-align: center; margin-top: 10px; } /* Author bio strip */ .article-author { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); max-width: 720px; margin: 0 auto; padding: 40px var(--pad-x); display: flex; align-items: center; gap: 28px; } .author-photo { width: 72px; height: 72px; border-radius: 50%; flex-shrink: 0; background-color: var(--sage-light); background-size: cover; background-position: center 15%; background-image: url('Bryonys%20images/BryHeadshot.jpeg'); } .author-info h4 { font-family: var(--f-futura); font-size: 14px; font-weight: 400; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text); margin-bottom: 6px; } .author-info p { font-family: var(--f-din); font-size: 14px; font-weight: 300; line-height: 1.55em; color: var(--text-mid); } /* Related articles */ .related-articles { padding: 80px 0 90px; background: var(--cream); } .related-articles .section-header { margin-bottom: 40px; } .related-articles .section-header h2 { font-size: 22px; } /* Responsive – article single */ @media (max-width: 768px) { .article-hero { height: 300px; } .article-header h1 { font-size: 28px; } .article-header { padding-top: 44px; } .article-body p { font-size: 16px; } .article-body blockquote p { font-size: 17px; } .article-author { flex-direction: column; align-items: flex-start; gap: 16px; } } /* Article card link wrappers */ .article-card a { text-decoration: none; color: inherit; } .article-card h3 a { transition: color 0.2s; } .article-card:hover h3 a { color: var(--sage-dark); } .article-card .article-img a { display: block; }