@import url('https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&family=VT323&family=Major+Mono+Display&display=swap');
:root{--bg:#1a0533;--bg2:#2a0a4a;--pink:#ff71ce;--cyan:#01cdfe;--purple:#b967ff;--yellow:#fffb96;--green:#05ffa1;--white:#faf5ff}
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--bg);color:var(--white);font-family:'Space Mono',ui-monospace,monospace;font-size:15px;line-height:1.6;min-height:100%;overflow-x:hidden}
body{
 background:
  linear-gradient(180deg,#1a0533 0%,#3d0a5e 35%,#7a1a8c 60%,#c42e9c 75%,#ff6bd1 90%,#fba768 100%);
 background-attachment:fixed;
 min-height:100vh;
 position:relative;
}
body::before{
 content:"";position:fixed;inset:0;pointer-events:none;z-index:1;
 background:
  linear-gradient(rgba(1,205,254,.12) 1px,transparent 1px),
  linear-gradient(90deg,rgba(1,205,254,.12) 1px,transparent 1px);
 background-size:50px 50px;
 transform:perspective(400px) rotateX(60deg) translateY(40%) scale(2.5);
 transform-origin:center bottom;
 mask-image:linear-gradient(180deg,transparent 40%,#000 70%);
 -webkit-mask-image:linear-gradient(180deg,transparent 40%,#000 70%);
}
body::after{
 content:"";position:fixed;inset:0;pointer-events:none;z-index:100;
 background:repeating-linear-gradient(0deg,transparent,transparent 3px,rgba(0,0,0,.15) 3px,rgba(0,0,0,.15) 4px);
}
a{color:inherit;text-decoration:none}
.top{position:relative;z-index:2;padding:20px 24px;display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;border-bottom:2px solid var(--pink);background:rgba(26,5,51,.6);backdrop-filter:blur(8px)}
.top .brand{font-family:'Major Mono Display','Space Mono',monospace;font-size:22px;letter-spacing:.1em;color:var(--cyan);text-shadow:2px 2px 0 var(--pink),-1px -1px 0 var(--yellow)}
.top nav{display:flex;gap:20px;font-size:13px;text-transform:uppercase;letter-spacing:.15em}
.top nav a{color:var(--white);padding:6px 12px;border:1px solid transparent;transition:.2s}
.top nav a:hover{border-color:var(--cyan);color:var(--cyan);text-shadow:0 0 8px var(--cyan)}
.wrap{position:relative;z-index:2;max-width:1200px;margin:0 auto;padding:50px 24px 80px}
/* hero */
.hero{text-align:center;padding:40px 0 60px;position:relative}
.hero .sun{width:220px;height:220px;border-radius:50%;background:linear-gradient(180deg,var(--yellow) 0%,#ff9c5a 40%,var(--pink) 75%,var(--purple) 100%);margin:0 auto 30px;position:relative;box-shadow:0 0 80px rgba(255,113,206,.6)}
.hero .sun::before{content:"";position:absolute;inset:0;border-radius:50%;background:repeating-linear-gradient(0deg,transparent,transparent 14px,rgba(26,5,51,.9) 14px,rgba(26,5,51,.9) 18px);mask:radial-gradient(circle at center,transparent 30%,#000 60%)}
.hero h1{font-family:'Major Mono Display','Space Mono',monospace;font-size:clamp(36px,8vw,88px);letter-spacing:.08em;line-height:1;color:var(--white);text-shadow:4px 4px 0 var(--pink),-3px -3px 0 var(--cyan),0 0 30px rgba(255,113,206,.6)}
.hero h1 small{display:block;font-family:'Space Mono',monospace;font-size:.18em;letter-spacing:.4em;color:var(--cyan);margin-top:18px;text-shadow:none}
.hero p{max-width:620px;margin:24px auto 0;color:var(--white);font-size:14px;opacity:.9}
/* section heading */
.sec{margin:50px 0 24px;padding:14px 20px;background:linear-gradient(90deg,rgba(255,113,206,.25),transparent);border-left:4px solid var(--cyan);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px}
.sec h2{font-family:'Major Mono Display',monospace;font-size:20px;letter-spacing:.1em;color:var(--yellow);text-shadow:2px 2px 0 var(--pink)}
.sec span{font-size:11px;letter-spacing:.3em;color:var(--cyan);text-transform:uppercase}
/* beer cards */
.beers{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:24px}
.beer{background:rgba(26,5,51,.75);border:2px solid var(--pink);padding:0;position:relative;transition:transform .3s,box-shadow .3s;display:block;overflow:hidden}
.beer:hover{transform:translate(-3px,-3px);box-shadow:6px 6px 0 var(--cyan)}
.beer .pic{height:170px;background:linear-gradient(180deg,var(--yellow),#ff9c5a 40%,var(--pink) 80%,var(--purple));position:relative;display:flex;align-items:center;justify-content:center;border-bottom:2px solid var(--pink)}
.beer .pic span{font-family:'VT323',monospace;font-size:90px;color:rgba(26,5,51,.6);letter-spacing:.1em;line-height:1}
.beer .pic::after{content:"";position:absolute;bottom:0;left:0;right:0;height:50%;background:repeating-linear-gradient(0deg,transparent,transparent 3px,rgba(0,0,0,.15) 3px,rgba(0,0,0,.15) 4px)}
.beer .body{padding:18px 18px 20px}
.beer h3{font-family:'Space Mono',monospace;font-size:16px;font-weight:700;color:var(--white);text-transform:uppercase;letter-spacing:.05em;text-shadow:1px 1px 0 var(--pink)}
.beer .sub{font-size:12px;color:var(--cyan);margin:4px 0 14px;text-transform:uppercase;letter-spacing:.1em}
.beer .foot{display:flex;justify-content:space-between;padding-top:12px;border-top:1px dashed var(--pink);font-size:12px}
.beer .foot b{color:var(--yellow)}
.beer .foot em{font-style:normal;color:var(--green)}
/* detail */
.crumb{font-size:11px;letter-spacing:.25em;text-transform:uppercase;color:var(--cyan);margin-bottom:20px}
.detail{display:grid;grid-template-columns:1fr 1.4fr;gap:40px;align-items:start}
@media(max-width:760px){.detail{grid-template-columns:1fr}}
.cover{aspect-ratio:3/4;background:linear-gradient(180deg,var(--yellow),#ff9c5a 30%,var(--pink) 60%,var(--purple) 90%);border:3px solid var(--cyan);box-shadow:8px 8px 0 var(--pink);position:relative;display:flex;flex-direction:column;justify-content:space-between;padding:30px;overflow:hidden}
.cover::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent,transparent 4px,rgba(0,0,0,.12) 4px,rgba(0,0,0,.12) 5px);pointer-events:none}
.cover .tag{font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.25em;color:var(--bg);text-transform:uppercase;position:relative}
.cover h1{font-family:'Major Mono Display',monospace;font-size:42px;letter-spacing:.02em;line-height:1;color:var(--bg);text-shadow:3px 3px 0 var(--cyan),-2px -2px 0 var(--white);text-align:center;margin:auto 0;position:relative}
.cover .foot{font-family:'VT323',monospace;font-size:24px;color:var(--bg);text-align:center;position:relative}
.info h1{font-family:'Major Mono Display',monospace;font-size:42px;line-height:1;letter-spacing:.03em;color:var(--white);text-shadow:3px 3px 0 var(--pink),-2px -2px 0 var(--cyan)}
.info .sub{color:var(--cyan);font-size:14px;text-transform:uppercase;letter-spacing:.15em;margin:10px 0 24px}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:26px}
@media(max-width:520px){.stats{grid-template-columns:repeat(2,1fr)}}
.stats div{background:rgba(26,5,51,.7);border:2px solid var(--cyan);padding:14px 8px;text-align:center}
.stats b{display:block;font-family:'VT323',monospace;font-size:32px;color:var(--yellow);line-height:1}
.stats span{font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--pink);display:block;margin-top:6px}
.prices,.reviews{margin-top:30px}
.prices h3,.reviews h3{font-family:'Major Mono Display',monospace;font-size:16px;letter-spacing:.1em;color:var(--yellow);margin-bottom:14px;padding:8px 12px;background:linear-gradient(90deg,rgba(255,113,206,.3),transparent);border-left:3px solid var(--cyan)}
.pr{display:flex;justify-content:space-between;padding:12px 14px;background:rgba(26,5,51,.6);border:1px solid var(--pink);margin-bottom:8px;font-size:13px}
.pr em{font-style:normal;color:var(--cyan);font-size:11px;display:block;text-transform:uppercase;letter-spacing:.1em}
.pr b{color:var(--yellow);font-size:16px;font-family:'VT323',monospace}
.review{padding:18px;background:rgba(26,5,51,.6);border:1px solid var(--pink);margin-bottom:12px}
.review p{font-size:14px}
.review .who{font-size:11px;color:var(--cyan);text-transform:uppercase;letter-spacing:.15em;margin-top:10px}
/* brewery */
.brew-hero{text-align:center;padding:50px 20px;border:3px solid var(--cyan);background:rgba(26,5,51,.7);box-shadow:10px 10px 0 var(--pink);margin-bottom:40px;position:relative}
.brew-hero h1{font-family:'Major Mono Display',monospace;font-size:52px;letter-spacing:.04em;color:var(--white);text-shadow:4px 4px 0 var(--pink),-3px -3px 0 var(--cyan)}
.brew-hero .loc{color:var(--cyan);margin-top:14px;text-transform:uppercase;letter-spacing:.15em;font-size:13px}
/* map */
.map-shell{display:grid;grid-template-columns:300px 1fr;gap:20px;margin-top:20px}
@media(max-width:760px){.map-shell{grid-template-columns:1fr}}
.map-side{background:rgba(26,5,51,.75);border:2px solid var(--pink);padding:20px}
.map-side h2{font-family:'Major Mono Display',monospace;font-size:16px;color:var(--yellow);margin-bottom:14px;letter-spacing:.1em}
.poi{padding:10px 0;border-bottom:1px dashed var(--pink);font-size:13px}
.poi b{display:block;color:var(--cyan);text-transform:uppercase;letter-spacing:.1em;font-size:12px}
.poi em{font-style:normal;color:var(--white);opacity:.8;font-size:11px}
.fake-map{background:linear-gradient(180deg,#1a0533 0%,#3d0a5e 60%,#c42e9c 100%);border:2px solid var(--cyan);position:relative;min-height:560px;overflow:hidden}
.fake-map::before{content:"";position:absolute;inset:0;
 background:
  linear-gradient(rgba(1,205,254,.3) 1px,transparent 1px),
  linear-gradient(90deg,rgba(1,205,254,.3) 1px,transparent 1px);
 background-size:40px 40px;
 transform:perspective(300px) rotateX(55deg) translateY(20%);
 transform-origin:center top}
.fake-map::after{content:"PARIS · 2087";position:absolute;top:14px;left:50%;transform:translateX(-50%);font-family:'Major Mono Display',monospace;font-size:14px;letter-spacing:.3em;color:var(--yellow);text-shadow:2px 2px 0 var(--pink)}
.pin{position:absolute;width:32px;height:32px;background:var(--yellow);border:2px solid var(--bg);color:var(--bg);font-family:'VT323',monospace;font-size:18px;font-weight:700;display:flex;align-items:center;justify-content:center;transform:translate(-50%,-50%) rotate(45deg);cursor:pointer;box-shadow:0 0 12px var(--yellow)}
.pin span{transform:rotate(-45deg)}
footer{position:relative;z-index:2;border-top:2px solid var(--pink);margin-top:60px;padding:24px;text-align:center;color:var(--cyan);font-family:'Major Mono Display',monospace;font-size:12px;letter-spacing:.3em;text-transform:uppercase;background:rgba(26,5,51,.6);backdrop-filter:blur(8px)}