:root{
 color-scheme:dark light;
 --bg:#0c0a08;
 --surface:#17120e;
 --surface-soft:#211a13;
 --text:#f1e4d1;
 --muted:#c5b49d;
 --bronze:#c7a477;
 --line:#715b42;
 --paper-shadow:#0008;
 --pattern-opacity:.055;
 --status:#cbd6a9;
 --button-bg:#ddbe95;
 --button-text:#21180f;
 --logo-bg:#0c0a08}

@media(prefers-color-scheme:light){
 :root{
 --bg:#eae0ce;
 --surface:#f5eddd;
 --surface-soft:#e9dcc5;
 --text:#30271e;
 --muted:#675642;
 --bronze:#705231;
 --line:#b19a78;
 --paper-shadow:#60462820;
 --pattern-opacity:.085;
 --status:#405527;
 --button-bg:#715234;
 --button-text:#fff4e2}
}

*,*::before,*::after{
 box-sizing:border-box}
html{
 font-size:100%;
 scroll-padding-block:1rem}
body{
 margin:0;
 background:var(--bg);
 color:var(--text);
 font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
 line-height:1.6;
 padding:1rem 12px;
 padding-block:max(1rem,env(safe-area-inset-top)) max(1rem,env(safe-area-inset-bottom));
 padding-inline:max(12px,env(safe-area-inset-left)) max(12px,env(safe-area-inset-right));
 overflow-wrap:break-word}
a{
 color:inherit;
 text-decoration:none}
button,summary{
 font:inherit;
 color:inherit}
button{
 cursor:pointer}
button,a,summary{
 -webkit-tap-highlight-color:transparent}
a:focus-visible,button:focus-visible,summary:focus-visible{
 outline:3px solid var(--bronze);
 outline-offset:4px}
img{
 max-inline-size:100%;
 display:block}
h1,h2,p{
 margin:0}
h1,h2{
 font-family:Georgia,"Times New Roman",serif;
 font-weight:500;
 line-height:1.2}
h1{
 font-size:clamp(1.85rem,1.5rem + 1.9vw,2.7rem);
 letter-spacing:.015em}
h2{
 font-size:clamp(1.5rem,1.2rem + .85vw,1.95rem)}
[hidden]{
 display:none!important}
.skip{
 position:fixed;
 inset-block-start:-8rem;
 inset-inline-start:1rem;
 padding:1rem;
 background:var(--surface);
 z-index:5}
.skip:focus{
 inset-block-start:1rem}
.pattern{
 position:fixed;
 inset:0;
 overflow:hidden;
 pointer-events:none;
 z-index:-1}
.pattern::before{
 content:"";
 position:absolute;
 inset:-240px;
 background:url("/assets/barber-monogram.svg") repeat;
 background-size:240px 240px;
 opacity:var(--pattern-opacity);
 animation:barber-drift 44s linear infinite}
@keyframes barber-drift{
 to{
 transform:translate3d(240px,240px,0)}
}
.sheet{
 position:relative;
 max-inline-size:650px;
 margin-inline:auto;
 padding:28px 18px 18px;
 background:var(--surface);
 border:1px solid var(--line);
 box-shadow:0 8px 36px var(--paper-shadow)}
.sheet::before{
 content:"";
 position:absolute;
 inset:5px;
 border:1px solid var(--line);
 opacity:.55;
 pointer-events:none}
.sheet::after{
 content:"";
 position:absolute;
 inset:10px;
 background:linear-gradient(var(--bronze),var(--bronze)) top left/22px 1px no-repeat,linear-gradient(var(--bronze),var(--bronze)) top left/1px 22px no-repeat,linear-gradient(var(--bronze),var(--bronze)) top right/22px 1px no-repeat,linear-gradient(var(--bronze),var(--bronze)) top right/1px 22px no-repeat,linear-gradient(var(--bronze),var(--bronze)) bottom left/22px 1px no-repeat,linear-gradient(var(--bronze),var(--bronze)) bottom left/1px 22px no-repeat,linear-gradient(var(--bronze),var(--bronze)) bottom right/22px 1px no-repeat,linear-gradient(var(--bronze),var(--bronze)) bottom right/1px 22px no-repeat;
 pointer-events:none}
.hub-header{
 text-align:center;
 margin-block-end:28px}
.brand{
 display:block;
 max-inline-size:460px;
 margin:0 auto 24px;
 padding:16px 9px;
 background:var(--logo-bg);
 border:1px solid var(--line);
 box-shadow:inset 0 0 0 4px var(--logo-bg),inset 0 0 0 5px #8c71514d}
.brand img{
 inline-size:100%;
 block-size:auto}
.eyebrow{
 font-size:.72rem;
 font-weight:600;
 letter-spacing:.15em;
 text-transform:uppercase;
 color:var(--bronze);
 margin-block-end:9px}
.location{
 font-size:1rem;
 line-height:1.6;
 color:var(--muted);
 max-inline-size:34ch;
 margin:12px auto 17px}
.badge{
 display:inline-block;
 font-size:.79rem;
 font-weight:650;
 letter-spacing:.09em;
 text-transform:uppercase;
 border-block:1px solid var(--line);
 padding:7px 13px}
.actions{
 display:grid;
 gap:12px}
.action,.directions summary{
 min-block-size:72px;
 display:flex;
 align-items:center;
 gap:14px;
 padding:13px 16px;
 border:1px solid var(--line);
 background:var(--surface-soft);
 font-weight:650;
 font-size:1.04rem;
 line-height:1.4;
 transition:border-color .15s,background-color .15s}
.action>svg,.directions summary>svg{
 inline-size:23px;
 block-size:23px;
 flex:0 0 23px;
 stroke:currentColor;
 fill:none;
 stroke-width:1.5}
.action>span:last-child:not(:only-child){
 margin-inline-start:auto}
.action small,.directions small{
 display:block;
 color:var(--muted);
 font-size:.77rem;
 font-weight:450;
 margin-block-start:3px}
.action--primary{
 background:var(--button-bg);
 color:var(--button-text);
 border-color:var(--button-bg)}
.action--primary small{
 color:inherit;
 opacity:.9}
.contact-pair{
 display:grid;
 grid-template-columns:1fr 1fr;
 gap:12px}
.contact-pair .action{
 padding-inline:12px;
 gap:10px;
 font-size:.96rem}
.contact-pair .action>span:last-child{
 margin-inline-start:0}
.action:hover,.direction-links a:hover,.social-grid a:hover{
 border-color:var(--bronze)}
.directions summary{
 cursor:pointer;
 list-style:none}
.directions summary::-webkit-details-marker,.mini-faq summary::-webkit-details-marker{
 display:none}
.indicator{
 margin-inline-start:auto;
 flex:0 0 18px;
 text-align:center;
 color:var(--bronze);
 font-weight:400}
.indicator::before{
 content:"+"}
details[open]>summary .indicator::before{
 content:"−"}
.direction-links{
 display:grid;
 grid-template-columns:1fr 1fr;
 gap:10px;
 padding:12px 0 2px}
.direction-links a{
 display:flex;
 align-items:center;
 justify-content:space-between;
 padding:12px;
 min-block-size:48px;
 border:1px solid var(--line);
 font-size:.88rem}
.section{
 margin-block-start:36px;
 padding-block-start:26px;
 border-block-start:1px solid var(--line)}
.section>.eyebrow{
 margin-block-end:9px}
.section h2{
 margin-block-end:20px}
.hours{
 margin:0}
.hours>div{
 display:grid;
 grid-template-columns:minmax(74px,.8fr) minmax(0,1.4fr);
 gap:10px;
 padding:12px 8px;
 border-block-end:1px solid var(--line);
 font-size:.96rem;
 line-height:1.5}
.hours dt{
 font-weight:550}
.hours dd{
 margin:0;
 text-align:end;
 font-variant-numeric:tabular-nums}
.hours dd span{
 display:block}
.hours small{
 font-size:.65rem;
 letter-spacing:.1em;
 color:var(--bronze);
 display:block;
 text-transform:uppercase;
 margin-block-start:3px}
.hours .is-today{
 background:var(--surface-soft);
 border-inline-start:2px solid var(--bronze)}
.hours .is-today dt::after{
 content:" · " attr(data-today);
 display:block;
 font-size:.7rem;
 color:var(--bronze)}
.hours-note,.freshness,.opening-status{
 font-size:.8rem;
 color:var(--muted);
 margin-block:14px}
.opening-status{
 color:var(--status)}
address{
 font-style:normal;
 font-size:.95rem;
 line-height:1.7;
 margin-block-start:23px;
 color:var(--muted)}
.social-intro,.spoken{font-size:.92rem;line-height:1.7;color:var(--muted)}
.social-intro{margin-block:-5px 20px;max-inline-size:52ch}
.spoken{margin:0 auto 18px;max-inline-size:48ch;font-size:.8rem}
.social-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:14px}
.social-card{position:relative;display:grid;grid-template-columns:30px minmax(0,1fr);align-content:start;gap:10px 12px;padding:20px 16px;min-block-size:120px;border:1px solid var(--line);background:var(--surface-soft);transition:border-color .15s,background-color .15s}
.social-card svg{inline-size:28px;block-size:28px;fill:currentColor}
.social-card-name{font-size:1.2rem;font-weight:650;align-self:center}
.social-card small{grid-column:1/-1;color:var(--muted);font-size:.91rem;line-height:1.6;padding-inline-end:15px}
.social-card-arrow{position:absolute;inset-inline-end:12px;inset-block-end:14px;color:var(--bronze);font-size:.9rem}
.social-card:hover{border-color:var(--bronze);background:var(--surface)}
.language-selector{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:0 auto 22px;max-inline-size:360px;border-block:1px solid var(--line)}
.language-selector a{display:flex;justify-content:center;align-items:center;min-block-size:48px;min-inline-size:48px;font-size:.84rem;padding-inline:3px}
.language-selector a[aria-current]{font-weight:700;color:var(--bronze);box-shadow:inset 0 -2px var(--bronze)}
.secondary-actions{margin-block-start:30px}
[dir=rtl] h2{font-family:system-ui,sans-serif;line-height:1.5}
[dir=rtl] .eyebrow,[dir=rtl] .badge{letter-spacing:normal}
@media(min-width:380px){.social-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.social-card{grid-template-columns:minmax(0,1fr);min-block-size:175px}.social-card small{grid-column:auto}}
@media(min-width:600px){.social-card{padding:24px;min-block-size:180px}}
.mini-faq details{
 border-block-end:1px solid var(--line);
 margin-block:6px}
.mini-faq summary{
 display:flex;
 align-items:center;
 gap:18px;
 cursor:pointer;
 list-style:none;
 font-size:clamp(1rem,.93rem + .35vw,1.15rem);
 font-weight:600;
 line-height:1.5;
 padding-block:17px;
 min-block-size:56px}
.mini-faq details p{
 font-size:.98rem;
 line-height:1.7;
 padding-block:0 20px;
 color:var(--muted);
 max-inline-size:52ch}
.prices{
 list-style:none;
 padding:0;
 margin:0 0 20px}
.prices li{
 display:flex;
 justify-content:space-between;
 gap:14px;
 padding-block:5px;
 font-size:.96rem}
.prices strong{
 white-space:nowrap;
 font-weight:550}
.text-link{
 display:inline-flex;
 align-items:center;
 min-block-size:48px;
 gap:10px;
 color:var(--bronze);
 font-size:.95rem;
 font-weight:550;
 margin-block-start:15px}
.share-area{
 text-align:center;
 margin-block:25px 5px}
.share-button{
 padding:12px 18px;
 border:1px solid var(--line);
 background:transparent;
 min-block-size:48px;
 font-size:.92rem}
.share-status,.share-fallback{
 font-size:.85rem;
 color:var(--muted);
 margin-block:8px}
.share-fallback{
 display:block;
 overflow-wrap:anywhere;
 text-decoration:underline}
.hub-footer{
 display:grid;
 justify-items:center;
 gap:6px;
 border-block-start:1px solid var(--line);
 margin-block-start:28px;
 padding-block-start:14px;
 text-align:center;
 color:var(--muted)}
.hub-footer a{
 min-block-size:48px;
 display:inline-flex;
 align-items:center;
 font-size:.83rem}
.footer-socials{
 display:grid;
 grid-template-columns:repeat(4,minmax(0,1fr));
 inline-size:100%;
 max-inline-size:360px;
 gap:4px}
.footer-socials a{
 min-inline-size:48px;
 flex-direction:column;
 justify-content:center;
 gap:4px;
 padding-block:6px;
 font-size:.75rem}
.footer-socials svg{
 inline-size:24px;
 block-size:24px;
 fill:currentColor}
.footer-utility{
 display:flex;
 flex-wrap:wrap;
 justify-content:center;
 gap:0 18px}
.footer-copyright{
 font-size:.75rem;
 margin-block:4px 0}
.hub-footer .footer-credit{
 font-size:.78rem}
.sheet--reviews{
 max-inline-size:600px}
.sheet--reviews .hub-header{
 margin-block-end:24px}
.review-intro{
 text-align:center;
 color:var(--muted);
 font-size:clamp(1.04rem,1rem + .25vw,1.15rem);
 line-height:1.8;
 max-inline-size:40ch;
 margin:0 auto 28px}
.review-actions{
 display:grid;
 gap:14px}
.review-actions a{
 display:flex;
 justify-content:space-between;
 align-items:center;
 min-block-size:80px;
 border:1px solid var(--bronze);
 padding:18px 22px;
 font-size:1.3rem;
 font-family:Georgia,serif;
 background:var(--surface-soft)}
.review-actions small{
 font:450 .8rem system-ui,sans-serif;
 display:block;
 color:var(--muted);
 margin-block-start:5px}
.review-note{
 text-align:center;
 font-size:.84rem;
 color:var(--muted);
 margin-block-start:22px}
.back-link{
 font-size:.9rem}

@media(min-width:600px){
 body{
 padding-block:36px}
.sheet{
 padding:40px 42px 24px}
.sheet::after{
 inset:15px}
.brand{
 margin-block-end:30px}
.section{
 margin-block-start:42px}
.actions{
 gap:14px}
.action,.directions summary{
 padding-inline:22px;
 min-block-size:78px}
.contact-pair .action{
 padding-inline:18px;
 font-size:1rem}
.hours>div{
 font-size:1.05rem}

.eyebrow{
 font-size:.78rem}
.sheet--reviews{
 margin-block:2vh}
}

@media(prefers-reduced-motion:reduce){
 *,*::before,*::after{
 animation:none!important;
 transition:none!important;
 scroll-behavior:auto!important}
}