:root { --ink:#17211e; --muted:#5f6d68; --forest:#163d36; --forest-soft:#e8f0ed; --paper:#fff; --surface:#f4f6f4; --line:#dfe5e1; --amber:#98470d; --shadow:0 1rem 3rem rgba(23,33,30,.1); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--surface); color:var(--ink); font-family:Manrope,system-ui,sans-serif; }
a { color:inherit; }
.skip { position:fixed; top:-5rem; left:1rem; z-index:100; padding:.7rem 1rem; border-radius:.5rem; background:var(--paper); }
.skip:focus { top:1rem; }
.static-header { position:sticky; top:0; z-index:20; display:flex; min-height:4.5rem; align-items:center; justify-content:space-between; gap:1rem; padding:.65rem clamp(1rem,4vw,3.5rem); border-bottom:1px solid rgba(23,33,30,.1); background:rgba(255,255,255,.94); backdrop-filter:blur(.8rem); }
.static-brand { display:flex; align-items:center; gap:.7rem; text-decoration:none; }
.static-brand img { width:2.75rem; height:2.75rem; border-radius:.75rem; object-fit:contain; }
.static-brand span { display:grid; }
.static-brand strong { font-size:.9rem; }
.static-brand small { color:var(--muted); font-size:.65rem; }
.static-header nav,.static-footer nav { display:flex; flex-wrap:wrap; gap:.35rem 1rem; }
.static-header nav a,.static-footer a { display:inline-flex; min-height:2.75rem; align-items:center; padding:.45rem .2rem; color:var(--forest); font-size:.75rem; font-weight:800; text-decoration:none; }
@media (hover: hover) and (pointer: fine) {
.static-header nav a:hover,.static-footer a:hover { text-decoration:underline; } }
.breadcrumbs { display:flex; max-width:74rem; align-items:center; gap:.5rem; margin:0 auto; padding:.8rem clamp(1rem,4vw,3.5rem) 0; color:var(--muted); font-size:.7rem; }
.breadcrumbs a { color:var(--forest); font-weight:700; text-decoration:none; }
.profile-page,.directory-page { max-width:74rem; margin:0 auto; padding:clamp(1.2rem,3vw,2.5rem) clamp(1rem,4vw,3.5rem) 4rem; }
.profile-hero { display:grid; grid-template-columns:10rem minmax(0,1fr); gap:clamp(1.25rem,4vw,3rem); align-items:center; padding:clamp(1.25rem,4vw,3rem); border:1px solid var(--line); border-radius:1.25rem; background:linear-gradient(135deg,var(--paper),#edf3f0); box-shadow:var(--shadow); }
.profile-logo { width:10rem; height:10rem; padding:.75rem; border:1px solid var(--line); border-radius:1rem; background:var(--paper); object-fit:contain; }
.profile-initials { display:grid; place-items:center; color:var(--forest); font-size:2.2rem; font-weight:800; }
.eyebrow { margin:0 0 .55rem; color:var(--amber); font-size:.68rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
h1 { max-width:50rem; margin:0; font-size:clamp(2rem,5vw,3.8rem); letter-spacing:-.05em; line-height:1.02; }
.profile-address { display:inline-block; margin-top:1rem; color:var(--forest); font-size:.9rem; font-weight:700; }
.profile-actions { display:flex; flex-wrap:wrap; gap:.65rem; margin-top:1.35rem; }
.button { display:inline-flex; min-height:2.75rem; align-items:center; justify-content:center; padding:.65rem 1rem; border:1px solid #bdc9c4; border-radius:.65rem; background:var(--paper); color:var(--forest); font-size:.72rem; font-weight:800; text-decoration:none; }
.button.primary { border-color:var(--forest); background:var(--forest); color:var(--paper); }
@media (hover: hover) and (pointer: fine) {
.button:hover { border-color:var(--forest); transform:none; } }
.profile-layout { display:grid; grid-template-columns:minmax(0,1.7fr) minmax(16rem,.8fr); gap:1rem; margin-top:1rem; align-items:start; }
.profile-main,.profile-side { display:grid; gap:1rem; }
.content-card { padding:clamp(1.15rem,3vw,1.8rem); border:1px solid var(--line); border-radius:1rem; background:var(--paper); }
.content-card h2 { margin:0 0 .8rem; font-size:1rem; }
.content-card p { margin:0; color:var(--muted); font-size:.86rem; line-height:1.75; }
.beer-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.55rem; margin:0; padding:0; list-style:none; }
.beer-list li { display:grid; gap:.18rem; padding:.75rem; border:1px solid var(--line); border-radius:.65rem; background:var(--surface); }
.beer-list strong { font-size:.75rem; }
.beer-list span { color:var(--muted); font-size:.66rem; }
.facts { display:grid; gap:1rem; margin:0; }
.facts div { display:grid; gap:.3rem; }
.facts dt { color:var(--muted); font-size:.62rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.facts dd { margin:0; font-size:.78rem; line-height:1.5; }
.facts a { color:var(--forest); font-weight:700; }
.profile-hours-block { margin-top:1.25rem; padding-top:1.15rem; border-top:1px solid var(--line); }
.profile-hours-block h3 { margin:0 0 .7rem; font-size:.82rem; }
.profile-amenities-block { margin-top:1.25rem; padding-top:1.15rem; border-top:1px solid var(--line); }
.profile-amenities-block h3 { margin:0 0 .7rem; font-size:.82rem; }
.profile-amenities { display:flex; flex-wrap:wrap; gap:.45rem; }
.profile-amenities span,.profile-amenities a { display:inline-flex; min-height:2.75rem; align-items:center; padding:.45rem .6rem; border:1px solid var(--line); border-radius:.55rem; background:var(--surface); color:var(--ink); font-size:.7rem; font-weight:800; text-decoration:none; }
@media (hover: hover) and (pointer: fine) { .profile-amenities a:hover { border-color:var(--forest); background:var(--forest-soft); } }
.content-card .profile-amenities-empty { margin:0; font-size:.72rem; }
.profile-hours { display:grid; gap:.1rem; }
.profile-hours>div { display:grid; grid-template-columns:minmax(5.5rem,1fr) auto; gap:.75rem; padding:.42rem 0; color:var(--muted); font-size:.68rem; }
.profile-hours strong { color:var(--ink); text-align:right; }
.content-card .profile-hours-source,.content-card .profile-hours-empty { margin:.65rem 0 0; font-size:.62rem; line-height:1.55; }
.nearby-list { display:grid; gap:.35rem; margin:0; padding:0; list-style:none; }
.nearby-list a { display:grid; gap:.2rem; padding:.65rem; border-radius:.55rem; text-decoration:none; }
@media (hover: hover) and (pointer: fine) {
.nearby-list a:hover { background:var(--forest-soft); } }
.nearby-list strong { font-size:.75rem; }
.nearby-list span { color:var(--muted); font-size:.65rem; }
.directory-hero { max-width:52rem; padding:clamp(1.4rem,4vw,3rem) 0 2rem; }
.directory-hero h1 { margin-bottom:1rem; }
.directory-hero>p:not(.eyebrow) { color:var(--muted); font-size:.95rem; line-height:1.7; }
.letter-nav { position:sticky; top:4.5rem; z-index:10; display:flex; flex-wrap:wrap; gap:.35rem; padding:.7rem; border:1px solid var(--line); border-radius:.8rem; background:rgba(255,255,255,.95); }
.letter-nav a { display:grid; width:2rem; height:2rem; place-items:center; border-radius:.45rem; color:var(--forest); font-size:.7rem; font-weight:800; text-decoration:none; }
@media (hover: hover) and (pointer: fine) {
.letter-nav a:hover { background:var(--forest-soft); } }
.city-directory { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; margin-top:1rem; align-items:start; }
.city-group { scroll-margin-top:8.5rem; padding:1rem; border:1px solid var(--line); border-radius:.85rem; background:var(--paper); }
.city-group h2 { margin:0 0 .65rem; color:var(--forest); font-size:.95rem; }
.city-group ul { display:grid; gap:.5rem; margin:0; padding:0; list-style:none; }
.city-group li { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:.1rem .35rem; padding:.35rem; border-radius:.55rem; }
@media (hover: hover) and (pointer: fine) {
.city-group li:hover { background:var(--forest-soft); } }
.city-group a { display:inline-flex; min-height:2.25rem; align-items:center; border-radius:.4rem; text-decoration:none; }
.city-group .brewery-name { grid-column:1/-1; }
.city-group .brewery-address { overflow:hidden; color:var(--muted); font-size:.63rem; text-decoration:underline; text-overflow:ellipsis; white-space:nowrap; }
.city-group .brewery-call { justify-content:flex-end; color:var(--forest); font-size:.62rem; font-weight:800; }
.city-group strong { font-size:.72rem; }
.static-footer { display:grid; gap:.65rem; padding:2rem clamp(1rem,4vw,3.5rem); border-top:1px solid var(--line); background:var(--paper); color:var(--muted); font-size:.67rem; }
.static-footer p { margin:0; }
@media (max-width:52rem) { .city-directory { grid-template-columns:repeat(2,minmax(0,1fr)); } .profile-layout { grid-template-columns:1fr; } }
@media (max-width:38rem) { .static-header { align-items:flex-start; } .static-brand small { display:none; } .static-header nav { justify-content:flex-end; } .static-header nav a { font-size:.66rem; } .profile-hero { grid-template-columns:1fr; } .profile-logo { width:7rem; height:7rem; } .profile-actions { display:grid; } .button { width:100%; } .beer-list,.city-directory { grid-template-columns:1fr; } h1 { font-size:2rem; } }
@media (prefers-reduced-motion:reduce) { * { scroll-behavior:auto!important; transition:none!important; } }