/* Potteries Vintage & Classic Car Club website styles */
:root {
  --green: #063c2d;
  --green-2: #104c39;
  --burgundy: #6d1e25;
  --gold: #bc9342;
  --gold-light: #dbc27d;
  --cream: #f6f0e3;
  --paper: #fbf6ea;
  --ink: #202721;
  --muted: #5b5b4e;
  --line: #d5bc82;
  --shadow: 0 6px 24px rgba(32, 31, 19, .11);
  --serif: Georgia, 'Times New Roman', serif;
  --sans: 'Segoe UI', Arial, sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--cream); font-family: var(--sans); line-height: 1.58; }
a { color: var(--green); text-decoration-color: var(--gold); }
a:hover { color: var(--burgundy); }
img { max-width: 100%; display: block; }
.container { width: min(1180px, calc(100% - 40px)); margin: 0 auto; }
.site-header { background: var(--paper); border-top: 4px solid var(--green); position: relative; overflow: hidden; }
.site-header::after { content:''; position:absolute; left:0; right:0; bottom:0; height:3px; background:var(--gold); }
.masthead { min-height: 174px; display: grid; grid-template-columns: 142px minmax(0, 1fr) auto; align-items: center; gap: 24px; padding: 18px 0 22px; }
.masthead > div { min-width: 0; }
.badge { width: 132px; height: 132px; object-fit: contain; filter: drop-shadow(0 2px 3px rgba(0,0,0,.13)); font-size:0; color:transparent; }
.club-name { margin: 0; color: var(--green); font: 700 clamp(2.25rem,5.2vw,4.65rem)/.95 var(--serif); letter-spacing: .03em; text-transform: uppercase; }
.club-subtitle { display:block; margin-top: 10px; font: 700 clamp(1.32rem,2.55vw,2.05rem)/1.05 var(--serif); letter-spacing:.02em; }
.club-tagline { color: var(--burgundy); font: italic 1.18rem var(--serif); margin: 13px 0 0; }
.header-contact { align-self: start; margin-top: 6px; white-space: nowrap; font-size: .98rem; }
.header-contact a { text-decoration: none; }
.header-sketch { display:none; }
.nav-wrap { background: var(--green); border-bottom: 3px solid var(--gold); }
.main-nav { min-height: 58px; display:flex; align-items:center; justify-content:center; gap:clamp(16px,4vw,45px); }
.main-nav a { color:#f4eedf; font-weight:600; text-decoration:none; text-transform:uppercase; font-size:.92rem; letter-spacing:.06em; padding:19px 0 14px; border-bottom:3px solid transparent; }
.main-nav a:hover, .main-nav a.active { color:var(--gold-light); border-color:var(--gold); }
.menu-button { display:none; }
.hero { display:grid; grid-template-columns: 43% 57%; background: var(--paper); border-bottom:1px solid var(--line); }
.hero-copy { padding: 50px clamp(26px,5vw,58px) 45px max(calc((100vw - 1180px) / 2), 28px); }
.eyebrow { font: 700 .84rem var(--sans); letter-spacing:.14em; text-transform:uppercase; color:var(--gold); }
.hero h1 { color: var(--burgundy); font: 700 clamp(2.35rem,3.6vw,3.65rem)/1.05 var(--serif); text-transform:uppercase; margin: 12px 0 18px; }
.hero h1 small { display:block; color: var(--green); font-size:.55em; margin-top:10px; }
.gold-rule { width:100%; display:flex; align-items:center; gap:14px; margin:18px 0; color:var(--gold); }
.gold-rule::before, .gold-rule::after { content:''; height:1px; background:var(--line); flex:1; }
.hero p { font-size:1.05rem; margin:0 0 15px; }
.hero .motto { color:var(--green); font: italic 1.27rem var(--serif); margin: 25px 0; }
.hero-photo { min-height:540px; object-fit:cover; width:100%; height:100%; }
.button { display:inline-flex; gap:8px; align-items:center; border-radius:6px; padding:13px 22px; background:var(--green); color:#fff; font-weight:650; font-size:.9rem; text-transform:uppercase; letter-spacing:.045em; text-decoration:none; border:1px solid var(--gold); box-shadow:0 2px 5px rgba(0,0,0,.14); }
.button:hover { color:var(--gold-light); background:var(--green-2); }
.button.secondary { color:var(--green); background:transparent; }
.button.secondary:hover { color:var(--burgundy); background:#f0eadb; }
.features { display:grid; grid-template-columns: repeat(3, 1fr); gap:22px; padding:28px 0 22px; }
.card { position:relative; background:var(--paper); border:1px solid var(--line); border-radius:10px; padding:30px; box-shadow: var(--shadow); }
.feature-card { padding-top:42px; text-align:center; min-height:378px; }
.round-icon { width:57px; height:57px; border:3px solid var(--gold); border-radius:50%; background:var(--green); color:white; display:grid; place-items:center; font-size:27px; position:absolute; top:-28px; left:calc(50% - 28px); }
.card h2, .card h3 { font-family: var(--serif); color: var(--burgundy); margin:8px 0 12px; }
.feature-card h2 { font-size:1.45rem; text-transform:uppercase; }
.newsletter-preview { display:grid; grid-template-columns:108px 1fr; text-align:left; gap:15px; margin:18px 0; align-items:center; }
.newsletter-preview img { width:108px; max-height:156px; object-fit:cover; border:1px solid var(--line); }
.event-img { height:130px; width:100%; object-fit:cover; border-radius:6px; margin:10px 0 10px; }
.event-title { font:700 1.42rem var(--serif); color:var(--green); margin:0; text-transform:uppercase; }
.event-date { font:700 1.03rem var(--serif); color:var(--burgundy); margin:0; }
.content-grid { display:grid; grid-template-columns: 1fr 1.03fr; gap:22px; padding:10px 0 40px; }
.section-card { padding:22px 26px 24px; }
.section-heading { display:flex; align-items:center; gap:15px; font:700 1.55rem var(--serif); color:var(--burgundy); margin:0 0 17px; }
.section-heading::after { content:''; flex:1; height:1px; background:var(--line); }
.home-story { display:grid; grid-template-columns:108px 1fr; gap:16px; padding:11px 0; border-bottom:1px solid #dfceb0; }
.home-story:last-child { border:0; }
.home-story img { width:108px; height:73px; object-fit:cover; border-radius:5px; }
.home-story h3 { margin:0 0 2px; font-size:1.06rem; }
.home-story p { margin:0; font-size:.91rem; line-height:1.38; }
.text-link { color:var(--burgundy); text-decoration:none; font-weight:650; font-size:.88rem; }
.table-wrap { overflow-x:auto; }
table { width:100%; border-collapse:collapse; font-size:.92rem; }
thead th { padding:9px 10px; text-align:left; color:#fff; text-transform:uppercase; font-size:.78rem; background:var(--green); letter-spacing:.05em; border-right:1px solid var(--gold); }
tbody td { padding:10px; border:1px solid #d7c6a5; }
tbody tr:nth-child(even) { background:#f1ead9; }
tbody tr.next-event { background:#e8d9b6; font-weight:600; }
.page-banner { background:var(--paper); border-bottom:1px solid var(--line); text-align:center; padding:42px 20px 38px; }
.page-banner h1 { color:var(--green); text-transform:uppercase; font:700 clamp(2.1rem,4vw,3.35rem)/1.1 var(--serif); letter-spacing:.04em; margin:0 0 8px; }
.page-banner p { max-width:700px; margin:0 auto; color:var(--muted); font-size:1.03rem; }
.page-content { padding:38px 0 64px; }
.newsletter-feature { display:grid; grid-template-columns:230px 1fr; gap:34px; padding:30px; margin-bottom:32px; }
.newsletter-feature img { border:1px solid var(--line); max-height:320px; object-fit:cover; }
.archive-grid { display:grid; grid-template-columns: repeat(3, 1fr); gap:20px; }
.archive-item h3 { margin:8px 0 4px; font-size:1.2rem; }
.archive-item img { width:100%; height:258px; object-fit:contain; background:#efe8d8; border:1px solid var(--line); }
.event-highlight { display:grid; grid-template-columns: minmax(260px, 1fr) 1.1fr; gap:26px; margin-bottom:28px; }
.event-highlight img { width:100%; min-height:0; height:auto; aspect-ratio:16 / 10; align-self:center; object-fit:cover; object-position:center center; border-radius:8px; }
.news-list { display:grid; gap:25px; }
.post { display:grid; grid-template-columns:260px 1fr; gap:25px; padding:22px; }
.post img { width:260px; height:190px; object-fit:cover; border-radius:6px; }
.post-meta { font-size:.84rem; color:#6e644d; text-transform:uppercase; letter-spacing:.07em; }
.post h2 { font-size:1.55rem; margin:5px 0 8px; }
.post-body { display:none; border-top:1px solid var(--line); padding-top:15px; margin-top:15px; }
.post.open .post-body { display:block; }
.two-col { display:grid; grid-template-columns: 1.2fr .8fr; gap:26px; }
.prose h2 { color:var(--burgundy); font:700 1.65rem var(--serif); margin: 0 0 14px; }
.prose h3 { color:var(--green); font-family:var(--serif); margin-top:28px; }
.prose p { margin:0 0 17px; }
.quote-panel { background:var(--green); color:#f7f0df; padding:31px; border-radius:9px; border:3px solid var(--gold); }
.quote-panel h2 { color:var(--gold-light); }
.quote-panel li { margin:10px 0; }
.contact-layout { display:grid; grid-template-columns: 1fr .83fr; gap:26px; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
label { display:block; font-weight:600; margin:0 0 6px; }
input, textarea, select { width:100%; padding:12px 13px; border:1px solid #cbb582; border-radius:5px; font:inherit; background:#fffdf7; }
input:focus, textarea:focus, select:focus { outline:2px solid var(--gold); outline-offset:1px; }
.field { margin-bottom:16px; }
textarea { min-height:148px; resize:vertical; }
.consent { display:flex; gap:10px; font-size:.91rem; margin:11px 0 20px; }
.consent input { width:auto; margin-top:4px; }
.honeypot { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.details-card p { margin:0 0 14px; }
.faq-list { max-width:880px; margin:0 auto; }
details { border:1px solid var(--line); border-radius:7px; background:var(--paper); padding:0 20px; margin:13px 0; box-shadow:0 2px 8px rgba(0,0,0,.04); }
summary { color:var(--green); cursor:pointer; list-style:none; font:700 1.16rem var(--serif); padding:18px 0; }
summary::before { content:'+'; color:var(--gold); font-family:var(--sans); font-weight:bold; margin-right:14px; }
details[open] summary::before { content:'-'; }
details p { margin:0 0 19px; }
.site-footer { color:#f4eedc; background:var(--green); border-top:6px solid var(--burgundy); position:relative; }
.site-footer::before { content:''; position:absolute; top:0; left:0; right:0; height:2px; background:var(--gold); }
.footer-grid { display:grid; grid-template-columns: 1fr 1.25fr .75fr; gap:48px; padding:38px 0 25px; }
.site-footer h2 { color:var(--gold-light); font:700 1.35rem var(--serif); text-transform:uppercase; margin:0 0 15px; }
.site-footer a { color:#fff; }
.site-footer .button.secondary { color:#fff; border-color:var(--gold-light); background:transparent; }
.site-footer .button.secondary:hover { color:var(--green); background:var(--gold-light); }
.site-footer p { margin:0 0 12px; font-size:.94rem; }
.footer-motto { border-top:1px solid rgba(217,190,114,.45); text-align:center; color:var(--gold-light); text-transform:uppercase; letter-spacing:.11em; font:600 .78rem var(--serif); padding:17px 20px 22px; }
.notice { padding:15px 17px; border:1px solid var(--line); background:#efe5cd; border-radius:6px; margin:20px 0; }
.status { max-width:720px; margin:55px auto; text-align:center; }
@media (max-width: 1050px) and (min-width: 901px) {
 .masthead { grid-template-columns:124px minmax(0,1fr); gap:18px; }
 .badge { width:116px; height:116px; }
 .header-contact { grid-column:1 / -1; text-align:right; margin: -18px 0 4px; }
}
@media (max-width: 900px) {
 .masthead { grid-template-columns:110px minmax(0,1fr); gap:14px; min-height:132px; }
 .badge { width:103px; height:103px; }
 .header-contact { grid-column:1 / -1; margin:0 0 10px; text-align:center; }
 .menu-button { display:block; margin-left:auto; border:1px solid var(--gold); color:white; background:transparent; padding:9px 13px; border-radius:5px; font-weight:bold; }
 .nav-wrap .container { display:flex; align-items:center; min-height:58px; }
 .main-nav { display:none; width:100%; flex-direction:column; align-items:stretch; gap:0; padding:8px 0; }
 .main-nav.open { display:flex; }
 .main-nav a { padding:12px 10px; }
 .hero, .features, .content-grid, .newsletter-feature, .event-highlight, .post, .two-col, .contact-layout { grid-template-columns:1fr; }
 .hero-copy { padding:38px 26px; }
 .hero-photo { min-height:330px; order:-1; }
 .features { gap:44px; padding-top:50px; }
 .footer-grid { grid-template-columns:1fr; gap:25px; }
 .archive-grid { grid-template-columns:repeat(2, 1fr); }
 .post img { width:100%; height:230px; }
}
@media (max-width: 680px) {
 .container { width:min(100% - 28px, 1180px); }
 .masthead { display:flex; flex-direction:column; gap:8px; min-height:0; text-align:center; padding:18px 0 22px; }
 .badge { width:106px; height:106px; }
 .club-name { font-size:clamp(2rem, 14vw, 2.8rem); letter-spacing:.02em; }
 .club-subtitle { font-size:clamp(1.02rem, 5.6vw, 1.35rem); margin-top:8px; }
 .club-tagline { font-size:.98rem; margin-top:10px; }
 .header-contact { display:none; }
}
@media (max-width: 580px) {
 .archive-grid, .form-row { grid-template-columns:1fr; }
 .card { padding-left:20px; padding-right:20px; }
 .newsletter-preview { grid-template-columns:94px 1fr; }
}