:root {
     --accent: #4caf78;
     --accent-lt: #6dcf98;
     --accent-dk: #205c3a;
 }

 .brewery-hero {
     background:
         radial-gradient(ellipse 80% 70% at 70% 50%, rgba(44, 110, 60, .15) 0%, transparent 60%),
         radial-gradient(ellipse 50% 60% at 10% 30%, rgba(20, 60, 20, .2) 0%, transparent 55%),
         #090704;
 }

 .b-title {
     color: var(--accent-lt);
 }

 .brewery-section {
     padding: 5rem 0;
 }

 .brewery-section+.brewery-section {
     border-top: 1px solid var(--border);
 }

 .lore-block {
     max-width: 750px;
 }

 .lore-block p {
     color: var(--cream-dim);
     font-size: 1.08rem;
     line-height: 1.85;
     margin-bottom: 1.2rem;
 }

 .section-crest {
     width: 200px;
     height: 200px;
     border: 2px solid var(--accent);
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 5rem;
     margin: 0 auto 2rem;
     background: var(--bg-card);
     box-shadow: 0 0 60px rgba(76, 175, 120, .12);
     position: relative;
 }

 .section-crest::before {
     content: '';
     position: absolute;
     inset: 8px;
     border: 1px solid rgba(76, 175, 120, .3);
     border-radius: 50%;
 }

 .manifesto-block {
     border-left: 3px solid var(--accent);
     padding: 1.5rem 2rem;
     background: rgba(76, 175, 120, .04);
     max-width: 700px;
     margin: 2rem auto;
 }

 .manifesto-block p {
     font-style: italic;
     font-size: 1.1rem;
     color: var(--cream);
     line-height: 1.8;
 }

 .ingredients-grid {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     gap: 1px;
     background: var(--border);
     border: 1px solid var(--border);
     margin-top: 3rem;
 }

 .ingredient-item {
     background: var(--bg-card);
     padding: 2rem 1.5rem;
     text-align: center;
     transition: background var(--transition);
 }

 .ingredient-item:hover {
     background: var(--bg-card2);
 }

 .ingredient-icon {
     font-size: 2.5rem;
     display: block;
     margin-bottom: .8rem;
 }

 .ingredient-name {
     font-family: var(--font-heading);
     font-size: .82rem;
     letter-spacing: .1em;
     text-transform: uppercase;
     color: var(--accent);
     display: block;
     margin-bottom: .3rem;
 }

 .ingredient-desc {
     font-size: .82rem;
     color: var(--cream-dim);
 }

 /* Beer cards */
 .beers-grid {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
     gap: 1.5px;
     background: var(--border);
     border: 1px solid var(--border);
     margin-top: 3rem;
 }

 .beer-card {
     background: var(--bg-card);
     padding: 2.5rem 2rem;
     position: relative;
     overflow: hidden;
     transition: background var(--transition);
     cursor: pointer;
 }

 .beer-card:hover {
     background: var(--bg-card2);
 }

 .beer-card::after {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     height: 3px;
     background: var(--accent);
     transform: scaleX(0);
     transition: transform .4s;
 }

 .beer-card:hover::after {
     transform: scaleX(1);
 }

 .beer-card-hint {
     position: absolute;
     top: 1rem;
     right: 1rem;
     font-family: var(--font-heading);
     font-size: .6rem;
     letter-spacing: .15em;
     text-transform: uppercase;
     color: var(--accent-dk);
     transition: color var(--transition);
 }

 .beer-card:hover .beer-card-hint {
     color: var(--accent);
 }

 .beer-style {
     font-family: var(--font-heading);
     font-size: .68rem;
     letter-spacing: .25em;
     text-transform: uppercase;
     color: var(--accent);
     margin-bottom: .6rem;
 }

 .beer-name {
     font-family: var(--font-heading);
     font-size: 1.4rem;
     color: var(--cream);
     margin-bottom: .8rem;
 }

 .beer-desc {
     font-size: .92rem;
     color: var(--cream-dim);
     line-height: 1.7;
     margin-bottom: 1.2rem;
 }

 .beer-specs {
     display: flex;
     gap: 1rem;
     flex-wrap: wrap;
 }

 .beer-spec {
     font-family: var(--font-heading);
     font-size: .7rem;
     letter-spacing: .1em;
     text-transform: uppercase;
     color: var(--cream-dim);
     border: 1px solid var(--border);
     padding: .2rem .6rem;
 }

 .beer-spec strong {
     color: var(--accent);
 }

 .bitterness-row {
     display: flex;
     align-items: center;
     gap: .8rem;
     margin-top: 1rem;
 }

 .bitterness-label {
     font-family: var(--font-heading);
     font-size: .62rem;
     letter-spacing: .12em;
     text-transform: uppercase;
     color: var(--cream-dim);
     white-space: nowrap;
 }

 .bitterness-track {
     flex: 1;
     height: 4px;
     background: rgba(76, 175, 120, .12);
     border-radius: 2px;
     overflow: hidden;
 }

 .bitterness-fill {
     height: 100%;
     border-radius: 2px;
     background: linear-gradient(to right, var(--accent-dk), var(--accent));
 }

 .bitterness-value {
     font-family: var(--font-heading);
     font-size: .68rem;
     color: var(--accent);
     min-width: 2.5rem;
     text-align: right;
 }

 /* Modal */
 .modal-overlay {
     display: none;
     position: fixed;
     inset: 0;
     z-index: 500;
     background: rgba(4, 3, 2, .88);
     backdrop-filter: blur(8px);
     padding: 2rem 1rem;
     overflow-y: auto;
     align-items: flex-start;
     justify-content: center;
 }

 .modal-overlay.open {
     display: flex;
 }

 .modal {
     background: var(--bg-card);
     border: 1px solid var(--border-lt);
     max-width: 720px;
     width: 100%;
     margin: auto;
     position: relative;
     animation: modalIn .35s cubic-bezier(.4, 0, .2, 1);
 }

 @keyframes modalIn {
     from {
         opacity: 0;
         transform: translateY(30px)
     }

     to {
         opacity: 1;
         transform: translateY(0)
     }
 }

 .modal-close {
     position: absolute;
     top: 1.2rem;
     right: 1.2rem;
     width: 36px;
     height: 36px;
     border: 1px solid var(--border);
     background: transparent;
     color: var(--cream-dim);
     font-size: 1.2rem;
     cursor: pointer;
     display: flex;
     align-items: center;
     justify-content: center;
     transition: all var(--transition);
     z-index: 1;
 }

 .modal-close:hover {
     border-color: var(--accent);
     color: var(--accent);
 }

 .modal-accent-bar {
     height: 4px;
     background: linear-gradient(to right, var(--accent-dk), var(--accent-lt));
 }

 .modal-header {
     padding: 2rem 2.5rem 1.5rem;
     border-bottom: 1px solid var(--border);
 }

 .modal-style {
     font-family: var(--font-heading);
     font-size: .7rem;
     letter-spacing: .3em;
     text-transform: uppercase;
     color: var(--accent);
     margin-bottom: .4rem;
 }

 .modal-name {
     font-family: var(--font-heading);
     font-size: clamp(1.6rem, 4vw, 2.4rem);
     color: var(--cream);
     line-height: 1.1;
 }

 .modal-specs-row {
     display: flex;
     flex-wrap: wrap;
     gap: .8rem;
     padding: 1.2rem 2.5rem;
     border-bottom: 1px solid var(--border);
     background: rgba(0, 0, 0, .2);
 }

 .modal-spec-box {
     display: flex;
     flex-direction: column;
     align-items: center;
     padding: .6rem 1.2rem;
     border: 1px solid var(--border);
     background: var(--bg-card2);
     min-width: 80px;
 }

 .modal-spec-label {
     font-family: var(--font-heading);
     font-size: .6rem;
     letter-spacing: .2em;
     text-transform: uppercase;
     color: var(--cream-dim);
 }

 .modal-spec-val {
     font-family: var(--font-display);
     font-size: 1.2rem;
     color: var(--accent-lt);
     margin-top: .2rem;
 }

 .modal-body {
     padding: 2rem 2.5rem;
 }

 .modal-section-title {
     font-family: var(--font-heading);
     font-size: .72rem;
     letter-spacing: .25em;
     text-transform: uppercase;
     color: var(--accent);
     margin-bottom: .8rem;
     margin-top: 1.8rem;
     display: flex;
     align-items: center;
     gap: .8rem;
 }

 .modal-section-title::after {
     content: '';
     flex: 1;
     height: 1px;
     background: linear-gradient(to right, var(--border), transparent);
 }

 .modal-section-title:first-child {
     margin-top: 0;
 }

 .modal-desc {
     color: var(--cream-dim);
     font-size: 1rem;
     line-height: 1.8;
 }

 .modal-hist {
     border-left: 3px solid var(--accent-dk);
     padding: .8rem 1.2rem;
     background: rgba(76, 175, 120, .04);
     font-style: italic;
     color: var(--cream-dim);
     font-size: .95rem;
     line-height: 1.75;
 }

 .modal-profile-row {
     display: flex;
     align-items: center;
     gap: 1rem;
     margin-bottom: .6rem;
 }

 .modal-profile-key {
     font-family: var(--font-heading);
     font-size: .65rem;
     letter-spacing: .15em;
     text-transform: uppercase;
     color: var(--cream-dim);
     width: 110px;
     flex-shrink: 0;
 }

 .modal-profile-track {
     flex: 1;
     height: 5px;
     background: rgba(76, 175, 120, .1);
     border-radius: 3px;
     overflow: hidden;
 }

 .modal-profile-fill {
     height: 100%;
     border-radius: 3px;
     background: linear-gradient(to right, var(--accent-dk), var(--accent-lt));
     transition: width .6s ease;
 }

 .modal-profile-badge {
     font-family: var(--font-heading);
     font-size: .65rem;
     letter-spacing: .1em;
     color: var(--accent);
     min-width: 120px;
     text-align: right;
 }

 .modal-pair-cols {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 1.2rem;
 }

 .modal-pair-sub {
     font-family: var(--font-heading);
     font-size: .65rem;
     letter-spacing: .15em;
     text-transform: uppercase;
     color: var(--gold-lt);
     margin-bottom: .5rem;
     display: block;
 }

 .modal-pair-list {
     list-style: none;
     display: flex;
     flex-direction: column;
     gap: .3rem;
 }

 .modal-pair-list li {
     font-size: .88rem;
     color: var(--cream-dim);
     padding-left: 1rem;
     position: relative;
 }

 .modal-pair-list li::before {
     content: '·';
     position: absolute;
     left: 0;
     color: var(--accent);
 }

 .modal-footer {
     padding: 1.5rem 2.5rem;
     border-top: 1px solid var(--border);
     display: flex;
     justify-content: flex-end;
     gap: 1rem;
 }

 @media(max-width:768px) {
     .ingredients-grid {
         grid-template-columns: repeat(2, 1fr);
     }
 }

 @media(max-width:600px) {

     .modal-header,
     .modal-body,
     .modal-footer,
     .modal-specs-row {
         padding-left: 1.2rem;
         padding-right: 1.2rem;
     }

     .modal-pair-cols {
         grid-template-columns: 1fr;
     }

     .modal-profile-key {
         width: 80px;
     }

     .modal-profile-badge {
         min-width: 80px;
         font-size: .6rem;
     }
 }