/* Self-hosted fonts (OFL, latin subset) */
@font-face { font-family: "Oswald"; src: url("../../assets/fonts/oswald-var.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Work Sans"; src: url("../../assets/fonts/work-sans-var.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }
/* Brass & Blade: SAMPLE site by Godelic. Fictional business. v2 structure: "the working shop's day".
   Palette: Charcoal #14110F · Bone #F2EBDD · Brass #C9A24B · Oxblood #7A1F26
   Extra: Oak #5B3A22 · Walnut #2A2420 · Felt #141414 · Letters #F4F1EA · Ink #5A4E3C · Lamp green #7FD18B · Lamp amber #E0A526
   Fonts: Oswald (headings, uppercase) + Work Sans (body)
   Parts: pole rail nav · letter-board hero · chair plates (flip) · styles gallery · price board · appointment book + queue · shop wall */
:root { --char: #14110F; --bone: #F2EBDD; --brass: #C9A24B; --ox: #7A1F26; --panel: #1E1A17; --muted: #C9BFAE; --walnut: #2A2420; --ink: #5A4E3C; --p: 0; }
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 110px; -webkit-text-size-adjust: 100%; }
body { margin: 0; padding-top: 40px; padding-bottom: 72px; background: var(--char); color: var(--bone); font: 17px/1.6 "Work Sans", system-ui, sans-serif; }
h1, h2, h3, h4, .brand { font-family: "Oswald", "Arial Narrow", sans-serif; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; line-height: 1.05; margin: 0 0 .4em; }
h1 { font-size: clamp(52px, 15vw, 120px); letter-spacing: .02em; }
h2 { font-size: clamp(32px, 7vw, 52px); }
h2::after { content: ""; display: block; width: 56px; height: 3px; background: var(--brass); margin-top: 12px; }
h3 { font-size: 22px; }
p { margin: 0 0 1em; }
a { color: var(--brass); }
:focus-visible { outline: 3px solid var(--brass); outline-offset: 3px; }
svg { display: block; max-width: 100%; }
.wrap { max-width: 1080px; margin: 0 auto; padding: 0 20px; }
.tiny { font-size: 14px; color: var(--muted); margin-top: 12px; }
.tag { display: inline-block; font-size: 13px; text-transform: uppercase; letter-spacing: .14em; color: var(--brass); border: 1px solid var(--brass); padding: 2px 10px; }
.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.no-js-only { display: none; }
html:not(.js) .no-js-only { display: block; }
html:not(.js) .sim { display: none; }

/* ---- Buttons: square, brass ---- */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 12px 22px; font-family: "Oswald", sans-serif; font-weight: 600; font-size: 17px; text-transform: uppercase; letter-spacing: .08em; text-decoration: none; border: 2px solid var(--brass); cursor: pointer; }
.btn-brass { background: var(--brass); color: var(--char); }
.btn-brass:hover { background: #D9B868; }
.btn-line { color: var(--bone); background: transparent; }
.btn-line:hover { background: var(--bone); color: var(--char); border-color: var(--bone); }
.btn-ox { background: var(--ox); color: var(--bone); border-color: var(--char); box-shadow: 3px 3px 0 var(--char); }
.btn-ox:hover { background: #8E2830; }
.btns { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }


/* ---- Header: brass plate tabs, pole progress strip ---- */
.top { position: sticky; top: 40px; z-index: 50; background: var(--char); border-bottom: 1px solid var(--brass); }
.top-in { position: relative; display: flex; align-items: center; justify-content: space-between; min-height: 58px; gap: 12px; }
.top .brand { display: inline-flex; align-items: center; min-height: 44px; font-size: 24px; color: var(--bone); text-decoration: none; margin: 0; }
.top .brand span { color: var(--brass); }
.menu-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 14px; background: transparent; color: var(--bone); border: 1px solid var(--brass); font: 600 15px/1 "Oswald", sans-serif; text-transform: uppercase; letter-spacing: .1em; cursor: pointer; }
.menu-btn[aria-expanded="true"] { background: var(--brass); color: var(--char); }
.menu-btn svg { width: 20px; height: 20px; }
.menu-btn .x, .menu-btn[aria-expanded="true"] .bars { display: none; }
.menu-btn[aria-expanded="true"] .x { display: block; }
.nav ul { list-style: none; margin: 0; padding: 0; }
.nav a { display: flex; align-items: center; min-height: 48px; padding: 8px 20px; color: var(--bone); text-decoration: none; font: 600 17px/1.2 "Oswald", sans-serif; text-transform: uppercase; letter-spacing: .1em; border-left: 4px solid transparent; }
.nav a:hover { background: var(--walnut); }
.nav a[aria-current="page"] { color: var(--brass); border-left-color: var(--brass); background: var(--walnut); }
.nav .nav-cta a { color: var(--char); background: var(--brass); border-left-color: var(--brass); }
.nav .nav-cta a:hover { background: #D9B868; }
.js .nav { display: none; position: absolute; left: 0; right: 0; top: 100%; background: var(--char); border: 1px solid var(--brass); border-top: 0; box-shadow: 0 14px 26px rgba(0,0,0,.6); z-index: 5; }
.js .nav.open { display: block; }
html:not(.js) .menu-btn { display: none; }
html:not(.js) .top { position: static; }
html:not(.js) .top-in { flex-wrap: wrap; }
html:not(.js) .nav ul { display: flex; flex-wrap: wrap; }
.demo-row { display: flex; justify-content: center; padding: 0 0 6px; }
.demo-row .sim-pill { font-size: 11px; padding: 4px 12px; }
.pole { height: 6px; background: var(--walnut); position: relative; overflow: hidden; }
.pole-fill { position: absolute; inset: 0; transform-origin: left; transform: scaleX(var(--p, 0)); background: repeating-linear-gradient(45deg, var(--ox) 0 10px, var(--bone) 10px 20px, #2C5AA0 20px 24px, var(--bone) 24px 34px); }
@media (min-width: 900px) {
  .menu-btn { display: none; }
  .js .nav, .nav { display: block; position: static; background: none; border: 0; box-shadow: none; }
  .nav ul { display: flex; align-items: center; gap: 2px; }
  .nav a { min-height: 44px; padding: 6px 14px; font-size: 16px; border-left: 0; border-bottom: 3px solid transparent; }
  .nav a[aria-current="page"] { background: transparent; border-bottom-color: var(--brass); }
  .nav .nav-cta { margin-left: 10px; }
  .nav .nav-cta a { border: 2px solid var(--brass); }
  .nav .nav-cta a[aria-current="page"] { border-bottom-color: var(--bone); }
}

/* ---- Inner page banner ---- */
.banner { padding: 40px 0 32px; background: #2B1A0F repeating-linear-gradient(90deg, rgba(255,255,255,.025) 0 3px, rgba(0,0,0,.08) 3px 9px); border-bottom: 1px solid var(--brass); }
.banner .kick { margin: 0 0 8px; font: 600 13px/1 "Oswald", sans-serif; text-transform: uppercase; letter-spacing: .3em; color: var(--brass); }
.banner h1 { font-size: clamp(40px, 10vw, 76px); margin: 0 0 .25em; }
.banner p { max-width: 36em; margin: 0; color: var(--muted); font-size: 18px; }
.sec { padding: 52px 0; }
.sec-alt { background: var(--panel); border-top: 1px solid #3A322B; border-bottom: 1px solid #3A322B; }
.sec p { max-width: 40em; }
.more { margin: 24px 0 0; }
.more .btn { margin-right: 10px; }
.two { display: grid; gap: 32px; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 860px) { .sec { padding: 72px 0; } .two { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; } }

/* ---- Home: doors (highlight cards) ---- */
.doors { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }
.doors a { display: block; height: 100%; padding: 20px 20px 18px; color: var(--bone); text-decoration: none; background: var(--walnut); border: 2px solid #8A6A22; box-shadow: inset 0 0 0 3px var(--walnut), inset 0 0 0 4px #8A6A22; }
.doors a:hover { background: #342C26; }
.doors .d-no { display: block; font: 600 12px/1 "Oswald", sans-serif; letter-spacing: .3em; color: var(--brass); text-transform: uppercase; }
.doors .d-name { display: block; margin: 8px 0 6px; font: 600 26px/1.1 "Oswald", sans-serif; text-transform: uppercase; letter-spacing: .05em; }
.doors .d-txt { display: block; color: var(--muted); font-size: 16px; }
.doors .d-go { display: inline-block; margin-top: 10px; font: 600 14px/1 "Oswald", sans-serif; text-transform: uppercase; letter-spacing: .14em; color: var(--brass); }
@media (min-width: 640px) { .doors { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .doors { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Home: three-photo strip */
.strip { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 18px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.strip a { display: block; text-decoration: none; color: var(--bone); }
.strip img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border: 3px solid var(--brass); background: var(--walnut); }
.strip span { display: block; margin-top: 8px; font: 600 15px/1.2 "Oswald", sans-serif; text-transform: uppercase; letter-spacing: .08em; }
@media (max-width: 559px) { .strip { gap: 8px; } .strip span { font-size: 13px; } }

/* Home: book band */
.band .btns { justify-content: flex-start; margin-top: 18px; }
.band .btn-line { color: var(--bone); border-color: var(--bone); }
.band .btn-line:hover { background: var(--bone); color: var(--char); }
.band .btn-brass { color: var(--char); }

/* ---- Services page ---- */
.svc-list { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }
.svc { padding: 18px 20px; background: #FFFDF7; color: var(--char); border: 2px solid var(--char); box-shadow: inset 0 0 0 4px #FFFDF7, inset 0 0 0 5px var(--ox), 0 8px 18px rgba(0,0,0,.4); }
.svc h3 { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; color: var(--ox); font-size: 24px; margin-bottom: .3em; }
.svc h3 .p { color: var(--char); }
.svc .dur { display: block; font: 600 12px/1 "Oswald", sans-serif; text-transform: uppercase; letter-spacing: .24em; color: var(--ink); margin-bottom: 10px; }
.svc p { margin: 0; font-size: 16px; }
@media (min-width: 700px) { .svc-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.addons { list-style: none; margin: 20px 0 0; padding: 0; max-width: 34em; }
.addons li { display: flex; gap: 12px; justify-content: space-between; padding: 12px 0; border-bottom: 1px dotted var(--muted); }
.addons .p { font-weight: 700; color: var(--brass); white-space: nowrap; }
.facts { margin: 18px 0 0; padding-left: 1.2em; max-width: 36em; }
.facts li { margin-bottom: 8px; }
.tips { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); counter-reset: tip; }
.tips li { counter-increment: tip; padding: 18px 20px 16px; border: 1px solid #3A322B; background: var(--walnut); }
.tips li::before { content: "Tip " counter(tip); display: block; margin-bottom: 6px; font: 600 12px/1 "Oswald", sans-serif; letter-spacing: .3em; text-transform: uppercase; color: var(--brass); }
.tips strong { display: block; margin-bottom: 4px; font: 600 20px/1.2 "Oswald", sans-serif; text-transform: uppercase; letter-spacing: .05em; }
.tips p { margin: 0; font-size: 16px; color: var(--muted); }
@media (min-width: 760px) { .tips { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---- Footer ---- */
.foot { background: #0C0A09; padding: 44px 0 32px; border-top: 3px solid var(--brass); }
.foot .brand { font-size: 26px; color: var(--brass); }
.foot-grid { display: grid; gap: 28px; grid-template-columns: minmax(0, 1fr); }
.foot h2 { font-size: 20px; color: var(--bone); margin-bottom: .6em; }
.foot h2::after { content: none; }
.foot ul { list-style: none; margin: 0; padding: 0; }
.foot li a { display: inline-block; padding: 6px 0; color: var(--bone); }
.foot p { margin: 0 0 8px; }
.foot .btn { min-height: 48px; margin-top: 6px; }
.foot-hours { margin: 0; }
.foot-hours div { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; border-bottom: 1px dotted #5A4E3C; }
.foot-hours dt { color: var(--muted); }
.foot-hours dd { margin: 0; font-weight: 600; }
.social { display: flex; gap: 10px; margin-top: 12px; }
.social a { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; color: var(--brass); border: 1px solid var(--brass); }
.social a:hover { background: var(--brass); color: var(--char); }
.social svg { width: 22px; height: 22px; }
@media (min-width: 700px) { .foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .foot-grid { grid-template-columns: 1.3fr 1.2fr 1.2fr .8fr; gap: 40px; } }
.toast-host .sim-toast { position: fixed; left: 16px; right: 16px; bottom: 92px; max-width: 420px; margin: 0 auto; z-index: 1200; }
@media (min-width: 768px) { .toast-host .sim-toast { bottom: 24px; } }

/* ---- 404 ---- */
.nf { padding: 64px 0 80px; text-align: center; }
.nf .big { margin: 0; font: 600 clamp(90px, 28vw, 200px)/1 "Oswald", sans-serif; color: var(--brass); letter-spacing: .04em; }
.nf .lead { max-width: 30em; margin: 0 auto 24px; color: var(--muted); font-size: 19px; }

/* ---- 1 · Hero: the "now serving" letter board ---- */
.hero { position: relative; overflow: hidden; background: #0C0A09; border-bottom: 1px solid #3A322B; }
.hero-bg { display: block; position: absolute; left: 0; right: 0; top: 0; height: 64%; -webkit-mask-image: linear-gradient(#000 30%, transparent); mask-image: linear-gradient(#000 30%, transparent); }
.hero-bg img { width: 100%; height: 100%; object-fit: cover; display: block; filter: brightness(.4) contrast(1.05); }
.hero-grain, .hero-sheen { position: absolute; inset: 0; pointer-events: none; }
.hero-grain { background: repeating-radial-gradient(circle at 30% 30%, rgba(255,255,255,.03) 0 1px, transparent 1px 3px); }
.hero-sheen { background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,.08) 48%, transparent 56%); animation: sheen 9s ease-in-out infinite alternate; }
@keyframes sheen { from { transform: translateX(-28%); } to { transform: translateX(28%); } }
.hero.is-off .hero-sheen { animation-play-state: paused; }
.hero-in { position: relative; z-index: 2; padding-top: 16px; padding-bottom: 32px; text-align: center; }
.sign { margin: 0 auto; max-width: 560px; line-height: 0; }
.sign-svg { width: 100%; height: auto; overflow: visible; }
.sign-text { font-family: "Oswald", "Arial Narrow", sans-serif; font-weight: 600; font-size: 66px; letter-spacing: 4px; text-transform: uppercase; fill: var(--bone); stroke: var(--brass); stroke-width: 1px; paint-order: stroke; }

/* Felt board with oak frame and brass screws (hero board and price list) */
.felt { --fr: 10px; position: relative; margin: 0; border: var(--fr) solid #5B3A22; border-image: linear-gradient(135deg, #6E4527, #4A2E1A) 1; background-color: #141414; box-shadow: 0 10px 30px rgba(0,0,0,.5); }
.felt::before { content: ""; position: absolute; inset: calc(var(--fr) * -1); pointer-events: none; background-repeat: no-repeat; background-image:
  radial-gradient(circle at 5px 5px, #D8B65E 0 2px, #3A2412 2.5px 3.5px, transparent 4px),
  radial-gradient(circle at calc(100% - 5px) 5px, #D8B65E 0 2px, #3A2412 2.5px 3.5px, transparent 4px),
  radial-gradient(circle at 5px calc(100% - 5px), #D8B65E 0 2px, #3A2412 2.5px 3.5px, transparent 4px),
  radial-gradient(circle at calc(100% - 5px) calc(100% - 5px), #D8B65E 0 2px, #3A2412 2.5px 3.5px, transparent 4px); }
@media (min-width: 640px) { .felt { --fr: 14px; } .felt::before { background-image:
  radial-gradient(circle at 7px 7px, #D8B65E 0 2.5px, #3A2412 3px 4.5px, transparent 5px),
  radial-gradient(circle at calc(100% - 7px) 7px, #D8B65E 0 2.5px, #3A2412 3px 4.5px, transparent 5px),
  radial-gradient(circle at 7px calc(100% - 7px), #D8B65E 0 2.5px, #3A2412 3px 4.5px, transparent 5px),
  radial-gradient(circle at calc(100% - 7px) calc(100% - 7px), #D8B65E 0 2.5px, #3A2412 3px 4.5px, transparent 5px); } }

.lboard { max-width: 560px; margin: 14px auto 0; padding: 16px 10px; background-image: linear-gradient(180deg, transparent 0 30px, #232323 30px 32px); background-size: 100% 32px; background-position: 0 16px; }
.bl { margin: 0; font: 500 clamp(13px, 4.5vw, 24px)/32px "Oswald", sans-serif; letter-spacing: .08em; color: #F4F1EA; text-transform: uppercase; }
.bw { display: inline-block; white-space: nowrap; }
.lboard.is-ready .ch { display: inline-block; opacity: 0; }
.lboard.is-set .ch { animation: drop .32s cubic-bezier(.3, 1.4, .5, 1) both; animation-delay: calc(var(--i, 0) * 18ms); }
@keyframes drop { from { opacity: 0; transform: translateY(-16px) rotate(-5deg); } to { opacity: 1; transform: none; } }

/* Chair lights: lamp + initials + a word (never colour only) */
.lights { list-style: none; margin: 18px auto 0; padding: 0; max-width: 560px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.light { display: grid; grid-template-columns: auto auto; grid-template-rows: auto auto; justify-content: center; align-items: center; gap: 2px 8px; height: 100%; padding: 10px 6px; background: var(--walnut); border: 2px solid #8A6A22; box-shadow: inset 0 0 0 3px var(--walnut), inset 0 0 0 4px #8A6A22; }
.lamp { width: 14px; height: 14px; border-radius: 50%; }
.lamp-free { background: #7FD18B; box-shadow: 0 0 12px 2px rgba(127,209,139,.7); animation: lamp 3.2s ease-in-out infinite alternate; }
.lamp-busy { background: #E0A526; box-shadow: 0 0 10px 1px rgba(224,165,38,.55); }
@keyframes lamp { from { box-shadow: 0 0 6px 1px rgba(127,209,139,.4); } to { box-shadow: 0 0 16px 4px rgba(127,209,139,.9); } }
.hero.is-off .lamp-free { animation-play-state: paused; }
.l-ini { font: 600 20px/1 "Oswald", sans-serif; letter-spacing: .08em; color: var(--brass); }
.l-word { grid-column: 1 / 3; font-size: 14px; line-height: 1.25; font-weight: 600; color: var(--bone); }
.sub { font-size: 19px; color: var(--muted); max-width: 30em; margin: 20px auto 16px; }
.hero .tiny { max-width: 36em; margin-left: auto; margin-right: auto; }
@media (min-width: 800px) { .hero-in { padding-top: 40px; padding-bottom: 64px; } .lboard { margin-top: 24px; padding: 16px 28px; } .lights { margin-top: 24px; } }

/* Two stripe dividers only: under the hero and above the footer */
.stripe { height: 18px; background: repeating-linear-gradient(135deg, var(--ox) 0 14px, var(--char) 14px 28px); border-top: 1px solid var(--brass); border-bottom: 1px solid var(--brass); }

/* ---- 2 · The chairs: brass plates that flip ---- */
.chairs { padding: 56px 0; }
.plates { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); align-items: start; }
.flip { --fh: 96px; position: relative; height: var(--fh); perspective: 900px; transition: height .4s ease; }
.chair.is-open .flip { height: max(var(--fh), var(--bh, 0px)); }
.flip-in { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .6s cubic-bezier(.3, .9, .3, 1); }
.chair.is-open .flip-in { transform: rotateY(180deg); }
.plate, .plate-back { position: absolute; left: 0; top: 0; width: 100%; -webkit-backface-visibility: hidden; backface-visibility: hidden; color: var(--char); background: linear-gradient(135deg, #E2C277, var(--brass) 45%, #B58E37); border: 2px solid #8A6A22; box-shadow: inset 0 0 0 4px #D9B868, inset 0 0 0 5px #8A6A22, 0 6px 14px rgba(0,0,0,.45); }
.plate { height: 100%; display: grid; grid-template-columns: auto 1fr; gap: 0 16px; align-items: center; padding: 14px 18px; text-align: left; font: inherit; cursor: pointer; transition: filter .2s ease, visibility 0s linear .3s; }
.plate:hover { filter: brightness(1.07); }
.plate:focus-visible { outline: 3px solid var(--bone); outline-offset: 4px; }
.plate-ini { grid-row: 1 / 3; font: 600 42px/1 "Oswald", sans-serif; letter-spacing: .06em; padding-right: 16px; border-right: 2px solid rgba(20,17,15,.45); }
.plate-name { font: 600 20px/1.2 "Oswald", sans-serif; text-transform: uppercase; letter-spacing: .08em; align-self: end; }
.plate-spec { font-size: 15px; font-weight: 600; align-self: start; }
.plate-back { min-height: 100%; padding: 18px 20px 14px; transform: rotateY(180deg); visibility: hidden; transition: visibility 0s linear .3s; }
.chair.is-open .plate-back { visibility: visible; }
.chair.is-open .plate { visibility: hidden; }
.plate-back p { margin: 0 0 8px; font-size: 15px; line-height: 1.45; font-weight: 500; }
.pb-head { display: flex; align-items: center; gap: 10px; font-size: 20px; margin: 0 0 10px; padding-bottom: 8px; border-bottom: 2px solid rgba(20,17,15,.45); }
.pb-ini { font-size: 24px; letter-spacing: .06em; }
.pb-head:focus { outline: none; }
.pb-head:focus-visible { outline: 3px solid var(--char); outline-offset: 3px; }
.pb-next { font-weight: 700 !important; }
.pb-book { display: flex; align-items: center; justify-content: center; min-height: 48px; margin-top: 10px; background: var(--char); color: var(--bone); border: 2px solid var(--char); font: 600 17px/1.2 "Oswald", sans-serif; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; }
.pb-book:hover { background: var(--ox); border-color: var(--ox); }
.pb-close { display: block; margin: 6px auto 0; min-height: 44px; padding: 8px 12px; background: none; border: 0; color: var(--char); font: 600 15px/1.2 "Work Sans", sans-serif; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.plate-back :focus-visible { outline: 3px solid var(--char); outline-offset: 2px; }
.pb-book:focus-visible { outline-color: var(--bone); box-shadow: 0 0 0 5px var(--char); }
.own-photos { margin: 14px 0 0; font-size: 15px; font-style: italic; color: var(--muted); }
@media (min-width: 700px) {
  .chairs { padding: 72px 0; }
  .plates { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
  .flip { --fh: 210px; }
  .plate { grid-template-columns: 1fr; justify-items: center; text-align: center; align-content: center; gap: 6px; }
  .plate-ini { grid-row: auto; font-size: 64px; padding: 0 0 8px; border-right: 0; border-bottom: 2px solid rgba(20,17,15,.45); }
  .plate-name { align-self: auto; font-size: 24px; }
  .plate-spec { align-self: auto; }
}
/* No JS: show the back of every plate as a normal card */
html:not(.js) .flip { height: auto; }
html:not(.js) .flip-in { position: static; }
html:not(.js) .plate { display: none; }
html:not(.js) .plate-back { position: static; transform: none; visibility: visible; }
html:not(.js) .pb-close { display: none; }

/* ---- 3 · Styles: gallery of six cuts, brass-framed plates with a ticket-style caption ---- */
.styles { padding: 56px 0; background: var(--panel); border-top: 1px solid #3A322B; border-bottom: 1px solid #3A322B; }
.styles-intro { max-width: 34em; margin-top: 18px; }
.style-list { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 28px 18px; grid-template-columns: minmax(0, 1fr); }
.plate-fig { margin: 0; background: #FFFDF7; color: var(--char); border: 2px solid var(--char); box-shadow: inset 0 0 0 4px #FFFDF7, inset 0 0 0 5px var(--ox), 0 10px 24px rgba(0,0,0,.45); padding: 10px 10px 0; height: 100%; display: flex; flex-direction: column; }
.zoom { display: block; position: relative; border: 3px solid var(--brass); background: var(--walnut); cursor: zoom-in; }
.zoom img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
.zoom::after { content: "Enlarge"; position: absolute; right: 0; bottom: 0; padding: 4px 10px; background: var(--char); color: var(--brass); font: 600 13px/1.2 "Oswald", sans-serif; text-transform: uppercase; letter-spacing: .16em; }
.zoom:focus-visible { outline: 3px solid var(--ox); outline-offset: 3px; }
.plate-fig figcaption { display: flex; flex-direction: column; gap: 2px; padding: 12px 8px 16px; }
.st-no { font: 600 12px/1 "Oswald", sans-serif; text-transform: uppercase; letter-spacing: .3em; color: var(--ink); }
.st-name { font: 600 clamp(26px, 7vw, 32px)/1.1 "Oswald", sans-serif; text-transform: uppercase; letter-spacing: .04em; color: var(--ox); }
.st-say { font-size: 16px; font-weight: 500; margin-top: 4px; }
.zoombox { position: fixed; inset: 0; margin: auto; width: min(92vw, 560px); height: fit-content; max-height: 92vh; padding: 10px; background: #FFFDF7; color: var(--char); border: 3px solid var(--brass); overflow: auto; }
.zoombox:not([open]) { display: none; }
.zoombox::backdrop { background: rgba(10,8,7,.85); }
.zoombox form { text-align: right; margin: 0 0 8px; }
.zb-x { min-height: 44px; padding: 0 16px; background: var(--char); color: var(--bone); border: 2px solid var(--brass); font: 600 15px/1 "Oswald", sans-serif; text-transform: uppercase; letter-spacing: .12em; cursor: pointer; }
.zb-x:focus-visible { outline: 3px solid var(--ox); outline-offset: 2px; }
.zb-img { display: block; width: 100%; height: auto; max-height: 70vh; object-fit: contain; background: var(--walnut); }
.zb-cap { margin: 8px 0 0; font: 600 22px/1.2 "Oswald", sans-serif; text-transform: uppercase; letter-spacing: .06em; color: var(--ox); }
@media (min-width: 560px) { .style-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 860px) { .styles { padding: 80px 0; } .style-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 28px; } .style:nth-child(3n+2) { margin-top: 36px; } }

/* ---- 4 · Prices: smaller felt list on the oak band ---- */
.prices { padding: 48px 0; background: #2B1A0F repeating-linear-gradient(90deg, rgba(255,255,255,.025) 0 3px, rgba(0,0,0,.08) 3px 9px); border-bottom: 1px solid var(--brass); }
.prices-in { display: grid; gap: 32px; align-items: center; grid-template-columns: minmax(0, 1fr); }
.board { padding: 32px 14px 0; background-image: repeating-linear-gradient(180deg, transparent 0 30px, #232323 30px 32px); }
.board h2 { font-size: 26px; line-height: 32px; margin: 0 0 32px; color: #F4F1EA; letter-spacing: .14em; }
.board h2::after { content: none; }
.plist { list-style: none; margin: 0; padding: 0; }
.plist li { display: flex; align-items: flex-start; gap: 8px; min-height: 32px; font: 500 17px/32px "Oswald", sans-serif; text-transform: uppercase; letter-spacing: .12em; color: #F4F1EA; }
.plist li:last-child { margin-bottom: 32px; }
.no { flex: none; min-width: 3.2em; font-size: 12px; line-height: 32px; color: var(--brass); letter-spacing: .1em; }
.item { flex: 1 1 auto; min-width: 0; }
.amt { flex: none; margin-left: auto; color: #F4F1EA; text-align: right; }
.plist li:nth-child(even) .item { transform: rotate(.4deg); }
.plist li:nth-child(3n) .item { transform: rotate(-.4deg); }
.clip { margin: 0; width: 100%; box-sizing: border-box; border: 10px solid var(--walnut); box-shadow: inset 0 0 0 2px var(--brass), 0 8px 22px rgba(0,0,0,.5); background: var(--walnut); transform: rotate(-1.5deg); max-width: 260px; justify-self: center; }
.clip img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; }
@media (min-width: 640px) { .board { padding: 32px 28px 0; } .plist li { font-size: 21px; } .no { font-size: 13px; } .board h2 { font-size: 32px; } }
@media (min-width: 800px) { .prices { padding: 64px 0; } .prices-in { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 56px; } .clip { max-width: 300px; } }

/* ---- 5 · Book: the shop's appointment book ---- */
.band { background: var(--ox) repeating-linear-gradient(90deg, rgba(0,0,0,.14) 0 2px, transparent 2px 30px); padding: 56px 0; }
.band h2::after { background: var(--bone); }
.band a { color: #FFE3B0; }
.band :focus-visible { outline-color: var(--bone); }
.book-in { display: grid; gap: 28px; align-items: start; grid-template-columns: minmax(0, 1fr); }
.book-intro p { max-width: 30em; }
.walkin { margin-top: 22px; padding: 16px 18px 6px; border: 2px dashed var(--bone); }
.walkin h2 { font-size: 22px; }
.walkin h2::after { content: none; }
.book-intro h1 { font-size: clamp(40px, 9vw, 64px); }
.book-intro h1::after { content: ""; display: block; width: 56px; height: 3px; background: var(--bone); margin-top: 12px; }
.band .facts { margin-top: 20px; }
@media (min-width: 900px) { .book-in { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 48px; } .book-intro { position: sticky; top: 120px; } }

.sim { --s-fg: var(--char); --s-acc: var(--ox); --s-acc-fg: var(--bone); --s-line: #CFC5B1; --s-line-strong: #6F6350; --s-soft: var(--ink); --s-price: var(--ox); --s-focus: var(--ox); --s-input: #FFFDF7;
  position: relative; padding: 8px 14px 14px 46px; color: var(--char); font-size: 16px; line-height: 1.45; text-align: left;
  background: repeating-linear-gradient(180deg, transparent 0 27px, #D9D2C3 27px 28px), var(--bone);
  box-shadow: 0 14px 34px rgba(0,0,0,.45), inset 0 0 0 1px #CFC5B1; }
.sim[hidden] { display: none; }
.sim::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 30px; pointer-events: none; background:
  radial-gradient(circle at 15px 12%, var(--bone) 0 5px, #6A511A 5.5px 7px, var(--brass) 7.5px 10px, transparent 10.5px),
  radial-gradient(circle at 15px 37%, var(--bone) 0 5px, #6A511A 5.5px 7px, var(--brass) 7.5px 10px, transparent 10.5px),
  radial-gradient(circle at 15px 63%, var(--bone) 0 5px, #6A511A 5.5px 7px, var(--brass) 7.5px 10px, transparent 10.5px),
  radial-gradient(circle at 15px 88%, var(--bone) 0 5px, #6A511A 5.5px 7px, var(--brass) 7.5px 10px, transparent 10.5px),
  linear-gradient(90deg, #E4D9C0, #D6C9AA); background-repeat: no-repeat; box-shadow: inset -1px 0 0 #B8A981; }
.sim::after { content: ""; position: absolute; left: 36px; top: 0; bottom: 0; width: 2px; background: var(--ox); opacity: .75; pointer-events: none; }
.sim :focus-visible { outline: 3px solid var(--ox); outline-offset: 2px; }
.sim-bar { display: flex; align-items: center; padding: 4px 0 10px; }
.sim-pill { margin: 0; background: var(--char); color: var(--bone); font: 700 12px/1.25 system-ui, -apple-system, "Segoe UI", sans-serif; letter-spacing: .06em; text-transform: uppercase; padding: 6px 12px; border: 1.5px solid var(--brass); }
.sim-screen { position: relative; padding: 10px 0 8px; }
.sim-screen p { margin: 0 0 10px; }
/* Index-tab headings: the tab shape lives on a pseudo-element, so the focus outline on the heading is never clipped */
.sim-screen h3 { position: relative; isolation: isolate; display: inline-block; margin: 0 0 14px -4px; padding: 6px 22px 6px 14px; font-size: 20px; color: var(--bone); }
.sim-screen h3::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--ox); clip-path: polygon(0 0, 100% 0, calc(100% - 10px) 100%, 0 100%); }
.sim-screen h3:focus { outline: none; }
.sim-screen h3:focus-visible { outline: 3px dashed var(--ox); outline-offset: 5px; }
.sim-btn { display: flex; width: 100%; align-items: center; justify-content: center; min-height: 48px; margin: 10px 0 0; padding: 10px 16px; border: 2px solid var(--ox); background: var(--ox); color: var(--bone); font: 600 16px/1.2 "Oswald", sans-serif; text-transform: uppercase; letter-spacing: .1em; box-shadow: 3px 3px 0 var(--char); cursor: pointer; }
.sim-btn:hover { filter: brightness(1.1); }
.sim-btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--char); }
.sim-btn:disabled { opacity: .45; cursor: not-allowed; filter: none; transform: none; }
.sim-btn[hidden], .sim-link[hidden] { display: none; }
.sim-btn-alt { background: transparent; color: var(--char); border-color: var(--char); box-shadow: none; }
.sim-link { display: block; margin: 12px auto 0; min-height: 44px; padding: 8px 12px; background: none; border: 0; color: var(--char); font: 600 15px/1.2 "Work Sans", sans-serif; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.sim-cta { display: flex; align-items: center; justify-content: center; text-align: center; min-height: 48px; margin: 14px 0 0; padding: 10px 14px; background: #6D3FE0; color: #fff; font: 700 15px/1.25 system-ui, -apple-system, "Segoe UI", sans-serif; text-decoration: none; box-shadow: 0 0 18px rgba(112, 48, 240, .35); }
.sim-cta:hover { background: #5A2FC8; color: #fff; }
.sim-disclaimer { font-size: 14px; color: var(--ink); border-top: 1px dashed var(--ink); padding-top: 10px; margin-top: 14px !important; }
.sim-label { display: block; margin: 14px 0 6px; font: 600 15px/1.3 "Oswald", sans-serif; text-transform: uppercase; letter-spacing: .1em; }
.sim-input { width: 100%; font: inherit; font-size: 16px; color: var(--char); background: #FFFDF7; border: 1.5px solid var(--s-line-strong); padding: 10px 12px; }
.sim-hint { font-size: 13px; color: var(--ink); margin-top: 4px !important; }
.sim-total { display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; align-items: baseline; font-size: 17px; border-top: 2px solid var(--char); padding-top: 10px; margin-top: 12px !important; }
.sim-total strong { font-size: 20px; color: var(--ox); }
.sim-toast { position: absolute; left: 50px; right: 18px; bottom: 22px; z-index: 5; margin: 0; padding: 10px 14px; background: var(--char); color: var(--bone); border: 1px solid var(--brass); font: 600 14px/1.35 system-ui, sans-serif; text-align: center; opacity: 0; transform: translateY(10px); pointer-events: none; transition: opacity .2s ease, transform .2s ease; }
.sim-toast.show { opacity: 1; transform: none; }

/* "Book a time / Walk in" switch and pre-filled chips */
.b-mode { display: grid; grid-template-columns: 1fr 1fr; margin: 0 0 12px; border: 2px solid var(--char); }
.b-mode[hidden], .b-chips[hidden] { display: none; }
.b-mode-btn { min-height: 46px; padding: 6px 8px; background: transparent; color: var(--char); border: 0; font: 600 16px/1.2 "Oswald", sans-serif; text-transform: uppercase; letter-spacing: .1em; cursor: pointer; }
.b-mode-btn + .b-mode-btn { border-left: 2px solid var(--char); }
.b-mode-btn[aria-pressed="true"] { background: var(--char); color: var(--bone); }
.sim .b-mode-btn:focus-visible { outline-offset: -5px; }
.sim .b-mode-btn[aria-pressed="true"]:focus-visible { outline-color: var(--bone); }
.b-chips { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.b-chip { display: inline-flex; align-items: center; padding: 0 4px 0 10px; border: 1.5px dashed var(--char); background: rgba(255,253,247,.7); font-size: 14px; font-weight: 600; }
.b-chip-x { min-height: 44px; min-width: 44px; padding: 0 8px; background: none; border: 0; color: var(--ox); font: 700 14px/1 "Work Sans", sans-serif; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* Services: ledger rows (name · duration · price), pressed = hand-drawn circle */
.b-services, .b-barbers { display: grid; gap: 4px; }
.b-card { position: relative; display: grid; grid-template-columns: 1fr auto auto; gap: 0 14px; align-items: center; text-align: left; min-height: 52px; padding: 8px 10px; background: transparent; color: var(--char); border: 0; border-bottom: 1px dotted var(--char); font: inherit; cursor: pointer; }
.b-card:hover { background: rgba(122,31,38,.08); }
.b-card-name { font-family: "Oswald", sans-serif; text-transform: uppercase; letter-spacing: .08em; font-size: 18px; }
.b-card-meta { font-size: 14px; color: var(--ink); }
.b-card-price { font-weight: 700; color: var(--ox); min-width: 3.6em; text-align: right; }
.b-card[aria-pressed="true"] { font-weight: 700; }
.b-card[aria-pressed="true"]::after { content: ""; position: absolute; inset: -3px -6px; pointer-events: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 60' preserveAspectRatio='none'%3E%3Cpath d='M14 36C8 14 70 5 112 6c58 1 88 8 84 26-3 17-58 24-100 23C46 54 8 52 14 36z' fill='none' stroke='%237A1F26' stroke-width='2.6' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }
.sim .b-card:focus-visible { outline-offset: 0; }
/* Barbers: round brass plates */
.b-barbers { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.b-card.b-barber { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 4px; padding: 10px 6px; border-bottom: 0; }
.b-barber .b-av { width: 72px; height: 72px; display: flex; align-items: center; justify-content: center; border: 2px solid #8A6A22; border-radius: 50%; font: 600 24px/1 "Oswald", sans-serif; color: var(--char); background: conic-gradient(from 20deg, #E8CC85, var(--brass), #A98430, #E8CC85, var(--brass), #A98430, #E8CC85); box-shadow: inset 0 0 0 3px rgba(255,255,255,.18); }
.b-barber .b-card-name { font-size: 17px; }
.b-card.b-barber[aria-pressed="true"] { background: rgba(122,31,38,.08); }
.b-card.b-barber[aria-pressed="true"]::after { content: none; }
.b-card.b-barber[aria-pressed="true"] .b-av { box-shadow: 0 0 0 3px var(--bone), 0 0 0 6px var(--ox); }
@media (min-width: 560px) { .b-barbers { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* Day and time: ledger grid */
.b-days { display: grid; grid-template-columns: repeat(4, 1fr); margin-bottom: 14px; border: 1px solid var(--char); }
.b-day, .b-slot { min-height: 46px; background: transparent; color: var(--char); border: 0; box-shadow: inset -1px -1px 0 var(--char); font: 600 15px/1.2 "Work Sans", sans-serif; cursor: pointer; padding: 4px; }
.b-day small { display: block; font-size: 12px; font-weight: 400; }
.b-day:disabled { color: var(--ink); background: repeating-linear-gradient(45deg, transparent 0 5px, rgba(20,17,15,.1) 5px 6px); cursor: not-allowed; }
.b-slots { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--char); border-right: 0; border-bottom: 0; }
@media (min-width: 420px) { .b-slots { grid-template-columns: repeat(4, 1fr); } }
.b-slot { background: rgba(255,253,247,.7); }
.b-slot:disabled { color: var(--ink); background: transparent; text-decoration: line-through 2px var(--ox); cursor: not-allowed; }
.b-day[aria-pressed="true"], .b-slot[aria-pressed="true"] { background: var(--ox); color: var(--bone); }
.sim .b-day:focus-visible, .sim .b-slot:focus-visible { outline: 3px solid var(--char); outline-offset: -5px; }
.sim .b-day[aria-pressed="true"]:focus-visible, .sim .b-slot[aria-pressed="true"]:focus-visible { outline-color: var(--bone); }

/* Walk in: the queue strip (three ticket stubs ahead of you) */
.q-title { margin: 0 0 8px; font-size: 16px; letter-spacing: .14em; color: var(--ink); }
.queue { list-style: none; margin: 0 0 6px; padding: 0; display: flex; gap: 8px; }
.q-stub { flex: 1 1 0; min-width: 0; padding: 10px 4px 8px; text-align: center; background: #FFFDF7; border: 2px solid var(--char); box-shadow: inset 0 0 0 3px #FFFDF7, inset 0 0 0 4px var(--ox);
  -webkit-mask: radial-gradient(circle 7px at 0 50%, #0000 97%, #000) left / 51% 100% no-repeat, radial-gradient(circle 7px at 100% 50%, #0000 97%, #000) right / 51% 100% no-repeat;
  mask: radial-gradient(circle 7px at 0 50%, #0000 97%, #000) left / 51% 100% no-repeat, radial-gradient(circle 7px at 100% 50%, #0000 97%, #000) right / 51% 100% no-repeat; }
.q-stub strong { display: block; font: 600 20px/1.1 "Oswald", sans-serif; letter-spacing: .06em; text-transform: uppercase; color: var(--ox); }
.q-stub span { display: block; font-size: 13px; line-height: 1.3; color: var(--ink); }

/* Done: tear-off appointment card. After the tear the card has a visible ragged edge with a dark cut line. */
.ticket { position: relative; max-width: 300px; margin: 6px auto 16px; color: var(--char); }
.t-card { position: relative; background: #FFFDF7; border: 2px solid var(--char); border-bottom: 0; padding: 20px 22px 14px; box-shadow: inset 0 0 0 4px #FFFDF7, inset 0 0 0 5px var(--ox); }
.ticket p { margin: 0 0 8px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 12px; }
.ticket p[hidden] { display: none; }
.ticket p span { font-size: 12px; text-transform: uppercase; letter-spacing: .1em; color: var(--ink); }
.ticket strong { text-align: right; }
.ticket .t-head { display: block; text-align: center; font: 600 16px/1.2 "Oswald", sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--ox); border-bottom: 1px solid var(--char); padding-bottom: 8px; margin-bottom: 12px; }
.ticket .t-ref { display: block; margin: 12px 0 0; font: 600 18px/1.2 "Oswald", sans-serif; letter-spacing: .1em; color: var(--char); border-top: 1px dashed var(--ink); padding-top: 8px; }
.t-stub { position: relative; z-index: 1; min-height: 52px; display: flex; align-items: center; justify-content: center; background: #FFFDF7; border: 2px solid var(--char); border-top: 2px dashed var(--char); padding: 14px 10px 10px; text-align: center; font: 600 17px/1.2 "Oswald", sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--char); box-shadow: inset 0 0 0 4px #FFFDF7, inset 0 0 0 5px var(--ox);
  -webkit-mask: radial-gradient(circle 8px at 0 0, #0000 98%, #000) top left / 51% 100% no-repeat, radial-gradient(circle 8px at 100% 0, #0000 98%, #000) top right / 51% 100% no-repeat;
  mask: radial-gradient(circle 8px at 0 0, #0000 98%, #000) top left / 51% 100% no-repeat, radial-gradient(circle 8px at 100% 0, #0000 98%, #000) top right / 51% 100% no-repeat;
  transform-origin: 0 0; transition: transform .6s cubic-bezier(.3, 1.4, .5, 1); }
.ticket.torn .t-stub { transform: translate(14px, 28px) rotate(7deg); }
/* 28px x 14px teeth, outlined by drop-shadows on the wrapper (a mask would cut the outline away) */
.ticket.torn .t-wrap { filter: drop-shadow(0 2px 0 var(--char)) drop-shadow(1px 0 0 var(--char)) drop-shadow(-1px 0 0 var(--char)) drop-shadow(0 6px 5px rgba(20,17,15,.35)); }
.ticket.torn .t-card { -webkit-mask: linear-gradient(#000 0 0) top / 100% calc(100% - 14px) no-repeat, conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 28px 14px repeat-x; mask: linear-gradient(#000 0 0) top / 100% calc(100% - 14px) no-repeat, conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 28px 14px repeat-x; }
.ticket.torn { margin-bottom: 56px; }

/* ---- 6 · Visit: the shop wall, the door sign and Find us ---- */
.visit { padding: 56px 0 64px; }
.tiles { list-style: none; padding: 0; margin: 28px 0 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; justify-items: center; }
.tiles li { width: 100%; max-width: 300px; aspect-ratio: 4 / 5; border: 10px solid var(--walnut); box-shadow: inset 0 0 0 2px var(--brass), 0 10px 20px rgba(0,0,0,.55); background: var(--walnut); transition: transform .3s ease; }
.tiles li:nth-child(1) { transform: rotate(-1.5deg); }
.tiles li:nth-child(2) { transform: rotate(1deg); }
.tiles li:nth-child(3) { transform: rotate(-.5deg); }
.tiles li:hover, .tiles li:focus-within { transform: rotate(0); }
.tiles .lb { height: 100%; }
.visit-grid { display: grid; gap: 40px; margin-top: 48px; grid-template-columns: minmax(0, 1fr); align-items: start; }
.door-strings { width: 200px; height: auto; margin: 0 auto; }
.door { background: var(--bone); color: var(--char); border: 3px solid var(--walnut); box-shadow: inset 0 0 0 3px var(--bone), inset 0 0 0 4px var(--ox), 0 12px 26px rgba(0,0,0,.5); padding: 26px 24px 22px; text-align: center; }
.door-open { margin: 0 0 6px; font: 600 14px/1 "Oswald", sans-serif; letter-spacing: .4em; text-transform: uppercase; color: var(--ox); }
.door h3 { font-size: clamp(32px, 7vw, 40px); margin-bottom: .3em; }
.door h3::after { content: ""; display: block; width: 56px; height: 3px; background: var(--ox); margin: 12px auto 0; }
.door .tag { color: var(--ox); border-color: var(--ox); }
table { width: 100%; border-collapse: collapse; font-size: 18px; margin-top: 16px; text-align: left; }
th, td { padding: 14px 0; border-bottom: 1px solid var(--ink); text-align: left; }
th { font-family: "Oswald", sans-serif; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
td { text-align: right; color: var(--ink); font-weight: 600; }
tr:last-child th, tr:last-child td { border-bottom: 0; }
.find h3 { font-size: clamp(32px, 7vw, 40px); }
.find h3::after { content: ""; display: block; width: 56px; height: 3px; background: var(--brass); margin-top: 12px; }
.map-ph { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 220px; text-align: center; font-weight: 600; background: repeating-linear-gradient(45deg, #1E1A17 0 10px, #24201C 10px 20px); border: 1px solid var(--brass); color: var(--brass); }
.map-ph svg { width: 40px; height: 40px; }
@media (min-width: 700px) { .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; align-items: start; } .visit { padding: 72px 0; } }
@media (min-width: 860px) { .visit-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; } }

/* ---- Footer ---- */
.foot { background: #0C0A09; padding: 40px 0 32px; border-top: 3px solid var(--brass); }
.foot .brand { font-size: 26px; color: var(--brass); }
.gd-credits { margin: 16px 0 0; font-size: 14px; }
.gd-credits a { color: var(--muted); text-underline-offset: 3px; display: inline-block; padding: 12px 0; }
.gd-disclaimer { flex: 1 1 100%; max-width: 46em; margin: 0; font-size: 13px; line-height: 1.5; color: #C8C4D0; }

/* ---- Mobile action bar ---- */
.m-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 900; display: grid; grid-template-columns: 1fr 1fr 1.3fr; gap: 6px; padding: 8px 8px calc(8px + env(safe-area-inset-bottom)); background: var(--char); border-top: 1px solid var(--brass); }
.m-bar a, .m-bar button { cursor: pointer; background: transparent; display: flex; align-items: center; justify-content: center; min-height: 48px; border: 1px solid var(--bone); color: var(--bone); font: 600 15px/1.15 "Oswald", sans-serif; text-transform: uppercase; letter-spacing: .06em; text-decoration: none; text-align: center; padding: 4px 6px; }
.m-bar a.go { background: var(--brass); border-color: var(--brass); color: var(--char); }
@media (min-width: 768px) { .m-bar { display: none; } body { padding-bottom: 0; } }

/* ---- Shared Godelic sample ribbon, footer note, lightbox ---- */
.gd-ribbon {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000; height: 40px;
  display: flex; align-items: center; justify-content: center;
  background: #0A0714; color: #EEEAFB; border-bottom: 1px solid #2E2450;
  box-shadow: 0 1px 12px rgba(112, 48, 240, .35);
  font: 600 14px/1.2 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; letter-spacing: 0;
}
.gd-ribbon a {
  display: inline-flex; align-items: center; min-height: 44px; color: #EEEAFB; padding: 12px 12px; text-decoration: underline;
  text-decoration-color: #9B6BFF; text-decoration-thickness: 2px; text-underline-offset: 4px;
}
.gd-ribbon a:hover { color: #C9B8FF; }
.gd-ribbon a:focus-visible { outline: 3px solid #C9B8FF; outline-offset: -3px; }
.gd-ribbon picture { display: block; flex: none; margin-right: 8px; }
.gd-ribbon .gd-mark { display: block; width: auto; height: 20px; max-width: none; }
@media (max-width: 380px) { .gd-ribbon { font-size: 13px; } .gd-ribbon a { padding: 8px 6px; } .gd-ribbon .gd-mark { height: 16px; } }
.tap { display: inline-block; min-height: 44px; line-height: 44px; vertical-align: middle; }
.gd-skip { min-height: 44px; box-sizing: border-box; display: inline-flex; align-items: center; position: absolute; left: 12px; top: -80px; z-index: 1100; background: #0A0714; color: #EEEAFB; padding: 10px 14px; border-radius: 8px; font: 600 15px system-ui, sans-serif; }
.gd-skip:focus { top: 48px; outline: 3px solid #C9B8FF; outline-offset: 2px; }
.gd-sample-note { border-top: 1px dashed currentColor; margin-top: 28px; padding-top: 20px; display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; justify-content: space-between; }
.gd-sample-note p { margin: 0; }
.gd-cta {
  display: inline-flex; align-items: center; min-height: 48px; padding: 10px 18px; border-radius: 999px;
  background: #6D3FE0; color: #FFFFFF; font: 600 15px/1.2 system-ui, -apple-system, "Segoe UI", sans-serif; text-decoration: none;
  border: 1.5px solid #6D3FE0; box-shadow: 0 0 18px rgba(112, 48, 240, .4);
}
.gd-cta:hover { background: #5A2FC8; border-color: #5A2FC8; color: #FFFFFF; }
.gd-cta:focus-visible { outline: 3px solid #9B6BFF; outline-offset: 3px; }
.lb { display: block; position: relative; overflow: hidden; }
.lb img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.lb:hover img { transform: scale(1.04); }
.lbox { border: 0; padding: 0; background: transparent; max-width: 100vw; max-height: 100vh; overflow: visible; color: #fff; }
.lbox::backdrop { background: rgba(8, 6, 12, .9); }
.lbox figure { margin: 0; }
.lbox img { display: block; max-width: min(90vw, 1100px); max-height: 78vh; width: auto; height: auto; border-radius: 10px; }
.lbox figcaption { text-align: center; font: 600 14px/1.4 system-ui, sans-serif; padding: 10px 0 0; }
.lb-close, .lb-nav { position: fixed; z-index: 2; width: 48px; height: 48px; border-radius: 50%; border: 2px solid #fff; background: rgba(0,0,0,.6); color: #fff; font: 400 30px/1 system-ui, sans-serif; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0 0 4px; }
.lb-close { top: 52px; right: 12px; }
.lb-nav { top: 50%; margin-top: -24px; }
.lb-prev { left: 8px; } .lb-next { right: 8px; }
.lb-close:focus-visible, .lb-nav:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

/* ---- Reduced motion: every animation and scroll effect has a still fallback ---- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .pole-fill { background-position: 0 0 !important; }
  .lboard .ch { opacity: 1 !important; }
  .flip-in, .chair.is-open .flip-in { transform: none; }
  .plate-back { transform: none; }
  .t-stub { transform: translate(0, 8px); }
  .ticket.torn .t-stub { transform: translate(8px, 8px); }
  .lb:hover img, .stops a:hover .stud, .stops a[aria-current="true"] .stud { transform: none; }
  .stop-tab { transform: translate(0, -50%); }
}

/* Tap area: ribbon link is at least 44px tall without changing the 40px bar */
/* Tap area: the ribbon (fixed, 40px) is the containing block; the link's hit area covers it plus 4px, so 44px tall */
.gd-ribbon a { position: static; }
.gd-ribbon a::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 44px; }