:root { color-scheme:dark; background:#171910; color:#f3e7cb; font:16px/1.6 system-ui,sans-serif; }
* { box-sizing:border-box; }
body { margin:0; background:radial-gradient(ellipse at top right,#3b3020,transparent 52rem); }
a { color:#f0be72; text-decoration:none; }
a:hover { text-decoration:underline; }
:focus-visible { outline:2px solid #f0be72; outline-offset:4px; }
.wrap { width:min(1160px,92%); margin:auto; }
header { border-bottom:1px solid #55452f; background:#171910; }
.mast,nav,footer,.section-head,figcaption { display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.mast { padding:1rem 0; }
.brand,h1,h2,h3 { font-family:Georgia,serif; color:#f3e7cb; line-height:1.1; }
.brand { font-weight:bold; font-size:1.25rem; }
.brand span { display:block; color:#e4b677; }
nav { flex-wrap:wrap; justify-content:center; font-size:.86rem; }
.channel,.button { display:inline-block; border:1px solid #c69b60; padding:.55rem .85rem; border-radius:.25rem; white-space:nowrap; }
.button { background:#e4b677; color:#201b12; font-weight:700; }
.hero { display:grid; grid-template-columns:1fr 1fr; gap:3rem; align-items:center; padding:4rem 0; }
h1 { font-size:clamp(2.6rem,5.5vw,5rem); margin:.4rem 0 1rem; letter-spacing:-.045em; }
h1 em { color:#e4b677; }
h2 { font-size:clamp(1.9rem,3.5vw,3rem); margin:.35rem 0; }
h3 { margin:.5rem 0; font-size:1.3rem; }
p { color:#d1c6ad; }
.label { color:#e4b677; letter-spacing:.13em; font-size:.69rem; font-weight:700; margin:0; text-transform:uppercase; }
figure { margin:0; padding:.55rem; background:#211e16; border:1px solid #755b38; border-radius:.5rem; box-shadow:0 12px 36px #0006; }
figure img { display:block; width:100%; height:auto; border-radius:.25rem; }
figcaption { padding:.5rem .35rem 0; font-size:.72rem; color:#cfbd9d; }
main > section:not(.hero) { border-top:1px solid #55452f; padding:2.6rem 0; scroll-margin-top:1rem; }
.section-head { margin-bottom:1.25rem; align-items:end; }
.section-head p:not(.label) { max-width:27rem; margin:0; }
.grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.85rem; }
.card { background:#22261b; border:1px solid #4b4835; border-top:2px solid #aa814a; padding:1rem; border-radius:.3rem; overflow-wrap:anywhere; }
.card p { margin:.3rem 0 .65rem; }
.card a,.town-links { font-size:.85rem; }
.reading { margin:1rem 0; }
.reading strong { display:block; font-size:1.75rem; color:#f3e7cb; }
.reading small { color:#d1c6ad; display:block; }
select { display:block; padding:.45rem; border:1px solid #76654a; background:#22261b; color:inherit; border-radius:.3rem; font:inherit; }
.town-links { display:flex; flex-wrap:wrap; gap:1rem; margin-top:1rem; }
footer { border-top:1px solid #55452f; padding:1.5rem 0; font-size:.85rem; }
@media(max-width:760px) { .hero { grid-template-columns:1fr; gap:1.5rem; padding:2.5rem 0; } .grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .mast { flex-wrap:wrap; } nav { order:3; width:100%; justify-content:flex-start; } .section-head { align-items:start; flex-direction:column; } }
@media(max-width:370px) { .grid { grid-template-columns:1fr; } }