@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,600;1,400&family=Poiret+One&display=swap');
:root{--ink:#0e0a04;--paper:#f5ecd4;--gold:#c9a24a;--gold-d:#8a6a1e;--burgundy:#5a1020;--cream:#fbf6e3}
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--paper);color:var(--ink);font-family:'Cormorant Garamond',Georgia,serif;font-size:18px;line-height:1.5;min-height:100%}
body{background-image:radial-gradient(ellipse at top,#fbf6e3,#f5ecd4 40%,#e8dcb2)}
a{color:inherit;text-decoration:none}
.deco-line{height:6px;background:linear-gradient(90deg,transparent,var(--gold) 20%,var(--ink) 50%,var(--gold) 80%,transparent);margin:0 auto;max-width:1200px}
.nav{max-width:1200px;margin:0 auto;padding:22px 28px;display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
.logo{font-family:'Poiret One',serif;font-size:26px;letter-spacing:.18em;text-transform:uppercase;position:relative}
.logo::after{content:"& Cie";display:block;font-family:'Cormorant Garamond',serif;font-style:italic;font-size:14px;letter-spacing:.1em;text-transform:none;color:var(--gold-d)}
.nav ul{display:flex;gap:28px;list-style:none;font-size:13px;letter-spacing:.25em;text-transform:uppercase}
.nav ul a{padding:6px 0;border-bottom:1px solid transparent}
.nav ul a:hover{border-color:var(--gold)}
.wrap{max-width:1200px;margin:0 auto;padding:40px 28px 80px}
/* hero */
.hero{text-align:center;padding:60px 20px 80px;position:relative}
.hero .flourish{font-family:'Poiret One',serif;font-size:40px;color:var(--gold);letter-spacing:.4em;display:block;margin-bottom:18px}
.hero h1{font-family:'Poiret One',serif;font-size:clamp(44px,8vw,96px);letter-spacing:.06em;text-transform:uppercase;line-height:.95}
.hero h1 em{display:block;font-family:'Cormorant Garamond',serif;font-style:italic;font-size:.4em;letter-spacing:.15em;color:var(--burgundy);margin-top:16px;text-transform:none}
.hero p{max-width:620px;margin:28px auto 0;font-style:italic;font-size:19px;color:#3a2b10}
.hero::before,.hero::after{content:"◆";position:absolute;top:60px;color:var(--gold);font-size:22px}
.hero::before{left:20px}.hero::after{right:20px}
/* section title */
.st{text-align:center;margin:40px 0 32px;position:relative}
.st::before,.st::after{content:"";display:inline-block;width:60px;height:1px;background:var(--gold);vertical-align:middle;margin:0 18px}
.st h2{display:inline-block;font-family:'Poiret One',serif;font-size:22px;letter-spacing:.3em;text-transform:uppercase;vertical-align:middle}
/* grid */
.beers{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:28px}
.beer{background:var(--cream);border:1px solid var(--gold);padding:22px 22px 26px;position:relative;transition:transform .3s}
.beer::before,.beer::after{content:"";position:absolute;width:16px;height:16px;border:1px solid var(--gold-d)}
.beer::before{top:6px;left:6px;border-right:none;border-bottom:none}
.beer::after{bottom:6px;right:6px;border-left:none;border-top:none}
.beer:hover{transform:translateY(-3px)}
.beer .glass{height:150px;display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse at 50% 30%,#f5d97a,#8a6a1e 70%,#3a2408);margin-bottom:18px;position:relative;border-bottom:2px solid var(--gold)}
.beer .glass span{font-family:'Poiret One',serif;font-size:48px;color:rgba(14,10,4,.7);letter-spacing:.1em}
.beer h3{font-family:'Poiret One',serif;font-size:22px;letter-spacing:.08em;text-transform:uppercase}
.beer .sub{font-style:italic;color:var(--gold-d);margin:4px 0 10px;font-size:16px}
.beer .row{display:flex;justify-content:space-between;align-items:center;padding-top:10px;border-top:1px solid rgba(138,106,30,.35);font-size:14px;letter-spacing:.08em;text-transform:uppercase}
.beer .stars{color:var(--gold-d);letter-spacing:.1em}
/* footer */
footer{text-align:center;padding:50px 20px 30px;margin-top:60px;border-top:1px solid var(--gold);color:var(--gold-d);font-size:13px;letter-spacing:.25em;text-transform:uppercase}
footer .flourish{font-size:26px;color:var(--gold);letter-spacing:.3em;margin-bottom:14px}
/* detail page */
.crumb{font-size:12px;letter-spacing:.25em;text-transform:uppercase;color:var(--gold-d);margin-bottom:20px}
.detail{display:grid;grid-template-columns:1fr 1.3fr;gap:48px;align-items:start}
@media(max-width:760px){.detail{grid-template-columns:1fr}.hero::before,.hero::after{display:none}}
.poster{aspect-ratio:3/4;background:radial-gradient(ellipse at 50% 30%,#f5d97a,#8a6a1e 60%,#1a0d02);display:flex;flex-direction:column;justify-content:space-between;padding:30px;border:2px solid var(--gold);position:relative;color:var(--cream)}
.poster::before,.poster::after{content:"";position:absolute;inset:8px;border:1px solid rgba(245,236,212,.4);pointer-events:none}
.poster .top{font-family:'Poiret One',serif;letter-spacing:.3em;text-align:center;font-size:12px}
.poster .mid{text-align:center}
.poster .mid h1{font-family:'Poiret One',serif;font-size:44px;letter-spacing:.05em;line-height:1;text-transform:uppercase}
.poster .mid em{display:block;font-style:italic;font-family:'Cormorant Garamond',serif;margin-top:10px;font-size:18px}
.poster .bot{text-align:center;font-family:'Poiret One',serif;letter-spacing:.2em;font-size:13px}
.info h1{font-family:'Poiret One',serif;font-size:44px;letter-spacing:.06em;text-transform:uppercase;line-height:1}
.info .sub{font-style:italic;color:var(--gold-d);font-size:22px;margin:6px 0 22px}
.info .abv{display:flex;gap:24px;padding:16px 0;border-top:1px solid var(--gold);border-bottom:1px solid var(--gold);margin-bottom:22px}
.info .abv div{flex:1;text-align:center}
.info .abv b{display:block;font-family:'Poiret One',serif;font-size:28px;color:var(--burgundy)}
.info .abv span{font-size:11px;letter-spacing:.25em;text-transform:uppercase;color:var(--gold-d)}
.info p{margin-bottom:16px;font-size:18px}
.prices{margin-top:30px}
.prices h3{font-family:'Poiret One',serif;letter-spacing:.2em;text-transform:uppercase;font-size:16px;margin-bottom:12px;padding-bottom:6px;border-bottom:1px solid var(--gold)}
.prices .pr{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px dotted rgba(138,106,30,.5)}
.prices .pr em{font-style:italic;color:var(--gold-d)}
.prices .pr b{font-family:'Poiret One',serif;color:var(--burgundy)}
.reviews{margin-top:40px}
.review{background:var(--cream);border:1px solid var(--gold);padding:20px 22px;margin-bottom:16px;position:relative}
.review::before{content:"“";position:absolute;top:-10px;left:14px;background:var(--cream);padding:0 8px;font-family:'Cormorant Garamond',serif;font-size:50px;color:var(--gold);line-height:1}
.review .who{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-d);margin-top:10px}
/* brewery */
.brew-hero{text-align:center;padding:50px 20px;border:1px solid var(--gold);background:var(--cream);margin-bottom:40px;position:relative}
.brew-hero h1{font-family:'Poiret One',serif;font-size:48px;letter-spacing:.06em;text-transform:uppercase}
.brew-hero .loc{font-style:italic;color:var(--gold-d);margin-top:8px;font-size:18px}
.brew-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin:40px 0}
@media(max-width:640px){.brew-stats{grid-template-columns:repeat(2,1fr)}}
.brew-stats div{text-align:center;border:1px solid var(--gold);padding:20px 10px;background:var(--cream)}
.brew-stats b{display:block;font-family:'Poiret One',serif;font-size:32px;color:var(--burgundy)}
.brew-stats span{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-d)}
/* map */
.map-shell{display:grid;grid-template-columns:320px 1fr;gap:24px;margin-top:20px;min-height:560px}
@media(max-width:760px){.map-shell{grid-template-columns:1fr}}
.map-side{background:var(--cream);border:1px solid var(--gold);padding:22px}
.map-side h2{font-family:'Poiret One',serif;letter-spacing:.2em;text-transform:uppercase;font-size:18px;margin-bottom:16px;border-bottom:1px solid var(--gold);padding-bottom:8px}
.poi{padding:14px 0;border-bottom:1px dotted rgba(138,106,30,.5)}
.poi h4{font-family:'Poiret One',serif;font-size:17px;letter-spacing:.06em;text-transform:uppercase}
.poi span{font-style:italic;font-size:14px;color:var(--gold-d)}
.fake-map{position:relative;background:
 repeating-linear-gradient(45deg,#f5ecd4,#f5ecd4 20px,#efe3c0 20px,#efe3c0 21px),
 radial-gradient(ellipse at center,#fbf6e3,#e8dcb2);
 border:2px solid var(--gold);min-height:560px;overflow:hidden}
.fake-map::before{content:"PARIS · HOUBLON & CIE · PLAN";position:absolute;top:14px;left:50%;transform:translateX(-50%);font-family:'Poiret One',serif;font-size:13px;letter-spacing:.3em;background:var(--cream);padding:6px 16px;border:1px solid var(--gold-d)}
.pin{position:absolute;width:28px;height:28px;background:var(--burgundy);border:2px solid var(--gold);color:var(--cream);border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:'Poiret One',serif;font-size:14px;transform:translate(-50%,-50%);cursor:pointer}
.pin:hover{background:var(--gold);color:var(--ink)}