/* N048 Ironbark Barbers - desktop. Structure: a compass (the chair in the middle, the menu as a ring around it). Palette: bone #EFE7DA / slate teal #17303A / barber red #C8402F. */
body{background:var(--c1)}
.hero{position:relative;min-height:max(100svh,860px);display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--grid-gap);padding:calc(var(--s8) + 30px) var(--gutter) var(--s6);max-width:1680px;margin-inline:auto;align-items:center}
.hero-copy{grid-column:1 / span 4;grid-row:1;display:grid;gap:var(--s4);position:relative;z-index:2;align-self:start;padding-top:var(--s6)}
.title{font-size:clamp(3.6rem,1rem + 5.4vw,7.6rem)}
.compass{grid-column:5 / span 5;grid-row:1;position:relative;aspect-ratio:1;max-height:min(80svh,760px);justify-self:center;width:100%}
.hero-stage{position:absolute;inset:6%}
.gesture{left:50%;bottom:-6px;translate:-50% 0;white-space:nowrap}
.ring{list-style:none;margin:0;padding:0;position:absolute;inset:0;border-radius:50%;border:1px dashed var(--line-strong)}
.rs{position:absolute;left:var(--x);top:var(--y);translate:-50% -50%}
.rs button{background:color-mix(in oklab,var(--c1) 88%,transparent);white-space:nowrap}
@media (hover:hover) and (pointer:fine){.rs button:hover{color:var(--ink)}}
.ticket{grid-column:10 / span 3;grid-row:1;position:relative;z-index:2}

.title{font:800 clamp(4rem,1.4rem + 6.6vw,9rem)/.82 var(--f-display);letter-spacing:var(--track-display);color:var(--ink)}
.title .serif{font-weight:400;font-style:italic;letter-spacing:-.03em;color:var(--c3)}
.gesture{position:absolute;display:flex;align-items:center;gap:8px;color:var(--ink-3);transition:opacity var(--dur) var(--ease-out);pointer-events:none;z-index:3}
.gesture .icon{width:16px;height:16px}
.hero-stage.has-turned .gesture{opacity:0}
.ticket{display:grid;gap:var(--s2);align-content:start;padding:var(--s4);border:1px solid var(--line);border-radius:var(--radius);background:color-mix(in oklab,var(--c1) 82%,transparent);box-shadow:var(--spec)}
.tk-k{color:var(--c3)}
.tk-h{font:700 clamp(1.7rem,1rem + 1.4vw,2.5rem)/1.05 var(--f-display);letter-spacing:var(--track-h)}
.tk-row{display:grid;grid-template-columns:1fr 1fr;margin:var(--s2) 0 0;border-top:1px solid var(--line)}
.tk-row div{padding-top:var(--s2)}.tk-row dt{color:var(--ink-3)}.tk-row dd{margin:4px 0 0;font:700 1.3rem/1 var(--f-display)}
.tk-btns{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s2)}
.ticket.flash .tk-h{animation:tk .48s var(--ease-out)}@keyframes tk{from{opacity:0;transform:translateY(8px)}}
.rs button{display:grid;gap:2px;text-align:center;padding:8px 10px;border-radius:var(--radius-sm);color:var(--ink-2);min-height:var(--tap);transition:color var(--dur-fast) var(--ease-out),background var(--dur-fast) var(--ease-out)}
.rs-n{font:600 .98rem/1.15 var(--f-body)}.rs-t{color:var(--ink-3)}
.rs.is-on button{color:var(--ink);background:color-mix(in oklab,var(--c3) 12%,var(--c1))}
.rs.is-on .rs-n{color:var(--c3)}
.rs button:focus-visible{outline:2px solid var(--c3);outline-offset:2px}
.menu{background:var(--c2);color:var(--c1)}
.menu .tag,.menu .body{color:var(--on-dark-2)}.menu .h2{color:var(--c1)}.menu .h2 .serif{font-style:italic;font-weight:400;color:color-mix(in oklab,var(--c1) 60%,var(--c3))}
.mn-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line-dark)}
.mn-row{display:grid;align-items:baseline;gap:var(--s3);padding:var(--s4) 0;border-bottom:1px solid var(--line-dark)}
.mn-row h3{font:700 1.45rem/1.1 var(--f-display);letter-spacing:var(--track-h);color:var(--c1)}
.mn-no,.mn-t{color:var(--on-dark-2)}

.mn-in{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--grid-gap)}
.mn-head{grid-column:1 / span 4;display:grid;gap:var(--s3);align-content:start}
.mn-list{grid-column:6 / span 7}
.mn-row{grid-template-columns:3rem 14rem 1fr 6rem}.mn-t{text-align:right}
@media (max-width:1100px){.hero-copy{grid-column:1 / span 4}.compass{grid-column:5 / span 8}.ticket{grid-column:1 / span 6;grid-row:2}.mn-head,.mn-list{grid-column:1 / -1}}