/* Approved mockup (demos-concept/concept.py, RESTO, phone 390 px), as drawn; --pad and the media queries widen it. */
:root{--brick:#6e1f14;--brick2:#88281a;--paper:#f8f1e1;--mustard:#e3ae35;--char:#241812;--rose:#f0c6b2;--pad:18px}
body{background:var(--brick);color:var(--paper);font-family:"Figtree",sans-serif}
a{text-decoration:none}
:focus-visible{outline:2px solid var(--mustard);outline-offset:3px}
.ticket :focus-visible,.menu :focus-visible{outline-color:var(--char)}

/* Concept bar: a strip at the top at every width, as on the other concept sites. */
.concept,[dir] .concept{position:static;translate:none;justify-content:center;block-size:auto;max-inline-size:none;padding:7px 20px;border-radius:0;background:var(--paper);backdrop-filter:none;box-shadow:none;color:var(--brick);font:600 11px/1.4 "Figtree",sans-serif;letter-spacing:.12em;text-transform:uppercase;white-space:normal;text-align:center}
.concept:hover,.concept:focus-visible{color:var(--brick);text-decoration:underline}
.concept:focus-visible{outline-color:var(--brick);outline-offset:-4px}

.hero{position:relative;height:620px;overflow:hidden}
.hero .ph{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero .shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(36,24,18,.35) 0%,rgba(36,24,18,0) 22%,rgba(110,31,20,0) 48%,rgba(110,31,20,.97) 100%)}
.top{position:absolute;top:18px;left:var(--pad);right:var(--pad);display:flex;justify-content:space-between;align-items:center;color:#fff}
.top b{font:400 19px/1 "Young Serif",serif} .top a{position:relative;font:600 12px/1 "Figtree",sans-serif;border:1.5px solid rgba(255,255,255,.7);border-radius:30px;padding:8px 12px;color:#fff}
.top a::after{content:"";position:absolute;inset:-8px -4px}
.tx{position:absolute;left:var(--pad);right:var(--pad);bottom:20px}
.tx small{display:block;font:500 13px/1.3 "Figtree",sans-serif;color:var(--mustard);margin-bottom:8px;text-shadow:0 1px 10px rgba(0,0,0,.6)}
h1{font:400 50px/.98 "Young Serif",serif;margin:0;letter-spacing:-.01em}
.tx p{font:400 15px/1.5 "Figtree",sans-serif;color:var(--rose);margin:12px 0 0;max-width:330px}
.cta{display:flex;gap:10px;padding:18px var(--pad) 0}
.btn{flex:1;text-align:center;padding:15px 8px;border-radius:40px;font:600 14px/1 "Figtree",sans-serif}
.btn.main{background:var(--mustard);color:var(--char)} .btn.alt{border:1.5px solid rgba(240,198,178,.6)}
.ticket{margin:30px 22px 0;background:var(--paper);color:var(--char);padding:26px 18px 20px;font-family:"Courier Prime","Courier New",monospace;transform:rotate(-1.2deg);
 -webkit-mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) bottom/14px 51% repeat-x,conic-gradient(from 135deg at top,#0000,#000 1deg 89deg,#0000 90deg) top/14px 51% repeat-x;
 mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) bottom/14px 51% repeat-x,conic-gradient(from 135deg at top,#0000,#000 1deg 89deg,#0000 90deg) top/14px 51% repeat-x}
.ticket h2{font:700 16px/1.2 "Courier Prime","Courier New",monospace;text-align:center;margin:4px 0 2px}
.ticket .t{text-align:center;font-size:12px;margin:0 0 14px;color:#6e5a4c}
.ln{display:flex;gap:6px;align-items:baseline;font-size:13px;padding:6px 0}
.ln b{white-space:nowrap} .ln i{flex:1;border-bottom:1.5px dotted #a99481;transform:translateY(-4px)} .ln em{font-style:normal;white-space:nowrap}
.left{display:inline-block;background:var(--mustard);font:700 11.5px/1 "Courier Prime","Courier New",monospace;padding:4px 7px;margin:0 0 6px 22px}
.left.low{background:#c84f35;color:#fff}
.dash{border-top:1.5px dashed #a99481;margin:12px 0}
.send{display:block;background:var(--char);color:var(--paper);text-align:center;padding:14px;font:600 14px/1 "Figtree",sans-serif;margin-top:12px}
.send{position:relative} .send::after{content:"";position:absolute;inset:-1px 0}
.note{font:400 13.5px/1.5 "Figtree",sans-serif;color:var(--rose);margin:16px 24px 0;text-align:center}
.band{margin-top:34px;height:250px;position:relative}
.band .ph{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.band p{position:absolute;left:var(--pad);right:var(--pad);bottom:16px;margin:0;font:400 24px/1.15 "Young Serif",serif;color:#fff;text-shadow:0 1px 18px rgba(0,0,0,.5)}
.menu{background:var(--paper);color:var(--char);padding:30px var(--pad) 26px}
h2{font:400 34px/1 "Young Serif",serif;margin:0 0 6px}
.sub{font:400 14px/1.5 "Figtree",sans-serif;color:#7d6758;margin:0 0 4px}
.menu h3{font:400 20px/1 "Young Serif",serif;color:var(--brick);margin:24px 0 2px}
.dish{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid #e8dcc4}
.dish b{display:block;font:600 15.5px/1.25 "Figtree",sans-serif} .dish span{display:block;font:400 13px/1.4 "Figtree",sans-serif;color:#7d6758;margin-top:2px}
.dish i{font:400 15px/1.25 "Young Serif",serif;font-style:normal;white-space:nowrap}
.rev{margin:30px var(--pad) 0;display:flex;gap:16px;align-items:center}
.rev b{font:400 54px/1 "Young Serif",serif;color:var(--mustard)} .rev span{font:400 14px/1.45 "Figtree",sans-serif;color:var(--rose)}
.rev q{quotes:none;display:block;font:italic 400 15px/1.45 "Figtree",sans-serif;color:#fff;margin-top:4px}
section{padding:30px var(--pad) 0}
.addr{font:500 15px/1.5 "Figtree",sans-serif;margin:0 0 10px}
table{width:100%;border-collapse:collapse;font:400 14px "Figtree",sans-serif} td{padding:9px 0;border-top:1px solid rgba(240,198,178,.25)} td+td{text-align:right;font-weight:600}
footer{margin-top:32px;background:var(--char);padding:24px var(--pad) 26px}
footer b{display:block;font:400 26px/1 "Young Serif",serif} footer span{display:block;margin-top:6px;font:400 13px/1.5 "Figtree",sans-serif;color:var(--rose)}
.cf{margin:18px 0 0;font:400 11px/1.5 "Figtree",sans-serif;color:#958174}

/* Tablets: the same page, the text held to a readable column. */
@media (min-width:600px){
:root{--pad:max(32px,(100% - 640px)/2)}
.ticket{margin:30px auto 0;max-width:460px}
.note{max-width:460px;margin-inline:auto}
.tx p{max-width:440px}
h1{font-size:60px}
}

/* From 900 px: the photo across the screen, the ticket pinned beside the title, the menu in three columns. */
@media (min-width:900px){
:root{--pad:max(40px,(100% - 1100px)/2)}
.hero{height:min(680px,calc(100vh - 32px));min-height:560px}
.hero .ph{object-position:50% 62%}
.hero .shade{background:linear-gradient(180deg,rgba(36,24,18,.45) 0%,rgba(36,24,18,0) 24%,rgba(110,31,20,0) 42%,rgba(110,31,20,.97) 100%)}
.top{top:24px}
.top b{font-size:24px}
.tx{bottom:48px;right:calc(var(--pad) + 520px)}
h1{font-size:clamp(58px,6.2vw,80px)}
.tx p{font-size:17px;max-width:470px}
.deck{display:grid;grid-template-columns:minmax(0,1fr) 440px;grid-template-areas:"cta order" "rev order";grid-template-rows:auto 1fr;column-gap:80px;padding:0 var(--pad);align-items:start}
.order{grid-area:order;position:relative;z-index:1;margin-top:-300px}
.cta{grid-area:cta;padding:24px 0 0;max-width:470px}
.btn{padding:18px 8px;font-size:15px}
.ticket{margin:0;max-width:none;padding:30px 24px 24px}
.ln{font-size:14px}
.note{margin:18px 0 0;max-width:none}
.rev{grid-area:rev;margin:36px 0 0;max-width:560px}
.band{margin-top:64px;height:420px}
.band p{bottom:32px;font-size:38px;max-width:820px}
.menu{padding:64px var(--pad) 56px}
h2{font-size:48px;margin-bottom:10px}
.sub{font-size:16px}
.groups{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 48px;margin-top:12px}
.menu h3{font-size:24px;margin-top:28px}
section{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 80px;align-items:start;padding-top:64px}
section h2,.addr{grid-column:1}
section table{grid-column:2;grid-row:1 / span 2;font-size:15px}
.addr{font-size:17px}
footer{margin-top:64px;padding-block:36px 40px}
footer b{font-size:32px}
}