:root { color-scheme: light; --oak-dark: #3A2416; --oak: #9B6738; --light-oak: #C89B68; --cream: #F7F1E7; --paper: #FFFAF0; --brass: #B88A44; --charcoal: #1F1B17; --white: #FFFFFF; --soft-line: rgba(58, 36, 22, 0.14); --muted: #6C5948; --shadow: 0 18px 55px rgba(58, 36, 22, 0.12); --font-display: "Cormorant Garamond", Georgia, serif; --font-body: "Inter", Arial, sans-serif; }
* { box-sizing: border-box; } html { scroll-behavior: smooth; }
body { margin: 0; font-family: var(--font-body); background: radial-gradient(circle at 12% 0%, rgba(255,255,255,.92), transparent 30rem), linear-gradient(140deg, var(--paper) 0%, var(--cream) 52%, #EEDDC5 100%); color: var(--charcoal); line-height: 1.6; }
body::before { content: ""; position: fixed; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(58,36,22,.03) 1px, transparent 1px), linear-gradient(rgba(58,36,22,.03) 1px, transparent 1px); background-size: 54px 54px; mask-image: linear-gradient(to bottom, rgba(0,0,0,.55), transparent 72%); }
a { color: inherit; } .site-header, .site-footer, main { width: min(1180px, calc(100% - 32px)); margin: 0 auto; position: relative; z-index: 1; }
.site-header { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 22px 0; }
.brand, .footer-brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; }
.logo-mark { width: 42px; height: 42px; border: 1.5px solid var(--oak-dark); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 25px; font-weight: 600; letter-spacing: 0; background: rgba(255,250,240,.72); color: var(--oak-dark); flex: 0 0 auto; }
.logo-mark.small { width: 34px; height: 34px; font-size: 21px; }
.brand-name, nav a, .eyebrow, .panel-number { text-transform: uppercase; letter-spacing: .13em; } .brand-name { font-family: var(--font-display); font-size: 1rem; font-weight: 700; color: var(--oak-dark); }
nav { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; color: var(--muted); } nav a { min-height: 40px; display: inline-flex; align-items: center; padding: 0 12px; border-radius: 999px; text-decoration: none; font-size: .73rem; font-weight: 800; } nav a:hover, nav a[aria-current="page"] { background: rgba(255,255,255,.7); color: var(--oak-dark); }
h1, h2, h3, .brand-name { font-family: var(--font-display); } h1, h2, h3, p { margin-top: 0; } h1 { font-size: clamp(3rem, 7vw, 6.4rem); line-height: .92; letter-spacing: -.045em; margin-bottom: 24px; color: var(--oak-dark); } h2 { font-size: clamp(2rem, 4vw, 3.35rem); line-height: 1.04; letter-spacing: -.03em; color: var(--oak-dark); } h3 { color: var(--oak-dark); margin-bottom: 8px; font-size: 1.35rem; line-height: 1.15; }
.lead { color: var(--muted); font-size: clamp(1.08rem, 2vw, 1.34rem); max-width: 760px; } .section-lead, .panel p, .feature-list li, .readable p, figcaption { color: var(--muted); } .eyebrow { margin: 0 0 14px; color: var(--oak); font-size: .76rem; font-weight: 800; }
.hero, .page-hero, .split { display: grid; grid-template-columns: minmax(0,.95fr) minmax(300px,1.05fr); align-items: center; gap: 46px; } .hero { padding: 54px 0 82px; min-height: 72vh; } .page-hero { padding: 58px 0 72px; min-height: 42vh; } .media-page-hero { align-items: stretch; }
.actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 30px; } .button { display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 0 20px; border-radius: 999px; text-decoration: none; font-weight: 800; border: 1px solid var(--soft-line); } .primary { background: var(--oak-dark); color: var(--cream); box-shadow: 0 14px 32px rgba(58,36,22,.18); } .secondary { color: var(--oak-dark); background: rgba(255,255,255,.7); } .text-link { display: inline-flex; margin-top: 12px; color: var(--oak-dark); font-weight: 800; text-underline-offset: 4px; }
.section { padding: 74px 0; border-top: 1px solid var(--soft-line); } .intro-section { display: grid; grid-template-columns: .95fr .9fr; gap: 48px; align-items: end; } .grid { display: grid; gap: 18px; } .three { grid-template-columns: repeat(3, 1fr); } .two { grid-template-columns: repeat(2, 1fr); }
.panel { padding: 27px; border: 1px solid var(--soft-line); border-radius: 26px; background: rgba(255,250,240,.86); box-shadow: 0 18px 48px rgba(58,36,22,.08); } .panel.large { min-height: 300px; display: flex; flex-direction: column; justify-content: space-between; gap: 18px; } .panel.accent, .feature-card { background: linear-gradient(135deg, rgba(255,255,255,.78), rgba(232,202,160,.5)); } .panel-number { display: inline-block; color: var(--oak); font-size: .78rem; font-weight: 800; margin-bottom: 18px; }
.image-card { margin: 0; border: 1px solid var(--soft-line); border-radius: 30px; background: var(--paper); box-shadow: var(--shadow); overflow: hidden; } .image-card img { width: 100%; height: 100%; object-fit: cover; display: block; } .hero-image, .hero-image img { min-height: 620px; } .image-card figcaption { padding: 12px 16px; font-size: .88rem; background: rgba(255,250,240,.92); }
.gallery-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 22px; } .gallery-grid .image-card img { aspect-ratio: 4 / 3; } .gallery-grid figcaption { display: grid; gap: 2px; } .feature-card { margin-inline: -20px; padding-inline: 20px; border-radius: 34px; } .feature-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 16px; } .feature-list li { padding: 20px; border: 1px solid var(--soft-line); border-radius: 22px; background: rgba(255,255,255,.62); }
.menu-grid h2 { font-size: 2rem; } ul { padding-left: 1.1rem; margin-bottom: 0; } li + li { margin-top: 8px; } .timeline { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } .timeline div { padding: 20px; border: 1px solid var(--soft-line); border-radius: 22px; background: rgba(255,255,255,.62); } .timeline span { color: var(--oak); font-weight: 800; } .timeline p { color: var(--muted); margin-bottom: 0; }
.notice { display: flex; align-items: flex-start; gap: 16px; border: 1px solid var(--soft-line); border-radius: 26px; background: rgba(255,255,255,.62); padding: 24px; } .notice p { margin-bottom: 0; color: var(--muted); } .readable { max-width: 860px; font-size: 1.2rem; }
.site-footer { border-top: 1px solid var(--soft-line); padding: 30px 0 50px; color: var(--muted); display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 24px; } .site-footer p { margin: 0; } .footer-links { display: flex; gap: 12px; flex-wrap: wrap; justify-content: flex-end; } .footer-links a { font-weight: 800; text-decoration-color: rgba(58,36,22,.28); text-underline-offset: 4px; }
@media (max-width: 980px) { .hero, .page-hero, .split, .intro-section, .three, .two, .timeline, .gallery-grid, .site-footer { grid-template-columns: 1fr; } .hero { min-height: auto; padding-top: 34px; } .hero-image, .hero-image img { min-height: 420px; } .site-footer, .footer-links { justify-content: flex-start; } }
@media (max-width: 620px) { .site-header { align-items: flex-start; flex-direction: column; } nav { justify-content: flex-start; width: 100%; } nav a { padding-inline: 9px; font-size: .68rem; } h1 { font-size: clamp(2.65rem, 15vw, 4.1rem); } .section { padding: 56px 0; } .hero-image, .hero-image img { min-height: 320px; } .page-hero { padding-top: 36px; } .notice { flex-direction: column; } }