/* Sites by Leo starter kit: the plumbing, not the look.
   It sets tokens, type basics, buttons, header, hours, form, footer and the phone bar.
   It has NO section layouts (no cards, steps, galleries, review boxes, hero) on purpose: those come from the shop,
   written fresh for each site in its own CSS below these rules. See standards/design.md, "Clean, not generated". */
:root{
  /* Ramen Ryoma (BRIEF.md, from their own posters): poster red, the deeper red of the circle behind the bowl,
     the gold clouds, the paper cream of their menu posters and the charcoal of their logo stamp. */
  --red:#8E1015;         /* poster red: cream text on it 9.6:1 */
  --red-deep:#6A0B0F;
  --pop:#D7261E;         /* the red of WE ARE OPEN and the price bursts: white bold on it 4.9:1 */
  --gold:#F2B233;
  --bg:#FBF4E8;          /* poster cream */
  --surface:#FFFDF8;
  --ink:#231F1E;         /* logo charcoal */
  --muted:#5E5550;       /* 6.9:1 on --bg */
  --line:#E7DAC6;
  --accent:#8E1015;      /* main buttons on cream */
  --on-accent:#FFFFFF;
  --display:"Bebas Neue",Impact,"Arial Narrow",sans-serif;
  --body:"Figtree",system-ui,sans-serif;
  --display-weight:400;
  --radius:18px;         /* every photo except the edge-to-edge hero */
  --radius-btn:999px;
  /* order.js */
  --o-accent:#8E1015;--o-on-accent:#fff;--o-ink:#231F1E;--o-muted:#5E5550;--o-bg:#FFFDF8;--o-line:#E7DAC6;--o-font:"Figtree",system-ui,sans-serif;--o-bottom:16px;
  /* Fixed scale: don't change per client */
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--s7:48px;--s8:72px;--s9:112px;
  --max:1200px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-underline-offset:.2em;text-decoration-thickness:1px}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important}}
.wrap{max-width:var(--max);margin:0 auto;padding-inline:20px}
@media (min-width:900px){.wrap{padding-inline:40px}}

/* Type: three sizes do almost everything (h1, h2, body). Big contrast between them, few weights. */
h1,h2,h3{font-family:var(--display);font-weight:var(--display-weight);line-height:1.05;letter-spacing:-.015em;margin:0;text-wrap:balance}
h1{font-size:clamp(42px,9vw,96px)}
h2{font-size:clamp(30px,5vw,56px)}
h3{font-size:clamp(19px,2vw,22px);line-height:1.25;letter-spacing:0}
p{margin:0;max-width:34em;text-wrap:pretty}
.small{font-size:14px;color:var(--muted)}
section{padding-block:var(--s8)}
@media (min-width:900px){section{padding-block:var(--s9)}}

/* Buttons: one filled main button per screen. Anything else is a plain text link, not a second pill. */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:12px 24px;border-radius:var(--radius-btn);font:inherit;font-weight:600;font-size:16px;text-decoration:none;border:0;background:var(--accent);color:var(--on-accent);cursor:pointer;transition:opacity .15s}
.btn:hover{opacity:.88}
.btn-main{background:var(--accent);color:var(--on-accent)}
.btn-quiet{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--line)}

/* Header: brand left, two links max. */
.site-head{position:sticky;top:0;z-index:30;background:var(--bg)}
.site-head.scrolled{box-shadow:0 1px 0 var(--line)}
.site-head .wrap{height:64px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{font-family:var(--display);font-weight:var(--display-weight);font-size:22px;text-decoration:none;white-space:nowrap}
.brand img{height:36px;width:auto}
.site-head nav{display:flex;gap:24px;align-items:center;font-size:15px}
.site-head nav a:not(.btn){text-decoration:none}
.site-head nav a:not(.btn):hover{text-decoration:underline}
@media (max-width:720px){.site-head .hide-sm{display:none}}

/* Specials banner (every site, Leo 14 Oct 2026): the owner writes it in my.sitesbyleo.com.au and it shows straight away.
   Hidden until there's a special. One line in the shop's colour; restyle to the site, keep it quiet and above the header. */
.special{background:var(--accent);color:var(--on-accent);font-size:15px;font-weight:600;line-height:1.4;padding-block:10px}
.special[hidden]{display:none}
.special p{max-width:none}

/* Gallery page (every site): their own photos, big. Restyle the grid to the site; use the owner's and the best customer photos (credited), never stock. */
.gallery{display:grid;grid-template-columns:repeat(2,1fr);gap:6px;margin-top:var(--s6)}
.gallery img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--radius)}
.gallery .wide{grid-column:1/-1}.gallery .wide img{aspect-ratio:3/2}
@media (min-width:900px){.gallery{grid-template-columns:repeat(3,1fr);gap:10px}}

/* Open now: a plain line of text, not a pill or a pulsing dot. */
.open-now{font-size:15px;font-weight:600}
.open-now.closed{color:var(--muted)}

/* Hours */
.hours{width:100%;max-width:420px;border-collapse:collapse;font-size:15px;margin-top:var(--s4)}
.hours td{padding:8px 0;border-bottom:1px solid var(--line)}
.hours td:last-child{text-align:right;font-variant-numeric:tabular-nums}
.hours tr.today td{font-weight:700}
address{font-style:normal}

/* Form: no box around it unless the design calls for one. */
.form{display:grid;gap:var(--s4);max-width:560px;margin-top:var(--s5)}
.form label{display:grid;gap:6px;font-size:15px;font-weight:600}
.form label small{font-weight:400;color:var(--muted)}
.form input:not([type=checkbox]):not([type=radio]),.form select,.form textarea{font:inherit;font-size:16px;padding:12px 14px;border:1px solid var(--line);border-radius:var(--radius-btn);background:var(--surface);color:var(--ink);width:100%}
.form input:focus,.form select:focus,.form textarea:focus{outline:2px solid var(--ink);outline-offset:1px}
.form textarea{min-height:120px;resize:vertical}
.form .btn{justify-self:start}
.form .btn:disabled{opacity:.6}
.form-status{margin:0;font-size:15px}
.form-status.err{color:#B3261E}
.hp{position:absolute;left:-9999px;opacity:0;height:0;width:0}

/* Language toggle */
.lang{display:inline-flex;gap:2px;font-size:13px;font-weight:600}
.lang button{border:0;background:transparent;padding:6px 8px;cursor:pointer;font:inherit;color:var(--muted)}
.lang button[aria-pressed="true"]{color:var(--ink);text-decoration:underline;text-underline-offset:.3em}

/* Footer */
.site-foot{padding-block:var(--s7);font-size:14px;color:var(--muted)}
.site-foot .wrap{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}

/* Phone bar: appears once the first screen's main button has scrolled away (kit.js). */
.mbar{display:none}
@media (max-width:720px){
  .mbar:not([hidden]){display:grid;grid-template-columns:1fr auto;gap:8px;position:fixed;left:0;right:0;bottom:0;z-index:40;padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:var(--bg);box-shadow:0 -1px 0 var(--line)}
  body{padding-bottom:76px}
}

/* ---- Menu kit (templates/menu/menu.css) ---- */
/* Sites by Leo menu: starting styles, built on the starter kit tokens (--bg, --surface, --ink, --muted,
   --line, --accent, --display, --body, --radius). Append to the client's kit.css, then restyle to their
   brand (headings, price font, dotted leaders, bar colour). Keep the structure: sticky bar, search, count,
   photo per category, name + description left, price right. */
.menu-head .lede{margin-top:12px}
.jump-bar{position:sticky;top:var(--head-h,64px);z-index:15;background:var(--ink);padding-block:10px}
.jump{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none}
.jump::-webkit-scrollbar{display:none}
.jump a{flex:none;text-decoration:none;font-weight:700;font-size:14.5px;padding:9px 14px;border-radius:999px;border:1.5px solid rgba(255,255,255,.25);color:#fff}
.jump a:hover{border-color:var(--accent)}
.menu .wrap{max-width:820px;display:grid;gap:44px}
.msearch input{width:100%;min-height:50px;border:2px solid var(--ink);border-radius:999px;padding:12px 20px;font:500 16px var(--body);background:var(--surface);color:var(--ink)}
.msearch input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 20%,transparent)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
#mcount{margin-top:-30px;font-size:14px;color:var(--muted)}
#menu{display:grid;gap:44px}
.mcat{scroll-margin-top:130px}
.mcat h2,.mcat h3{font-family:var(--display);font-size:clamp(32px,5vw,44px);margin:0;padding-bottom:10px;border-bottom:3px solid var(--ink)}
/* groups (optional, e.g. Food and Drinks): a bigger heading over its categories */
.mgroup{scroll-margin-top:130px;padding-top:12px}
.mgroup h2{font-family:var(--display);font-size:clamp(44px,8vw,72px);line-height:1}
.mgroup p{color:var(--muted);font-size:15px;margin-top:6px}
.jump a.jg{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.mph{width:100%;height:auto;aspect-ratio:16/7;object-fit:cover;border-radius:var(--radius);margin-top:14px}
.mnote{color:var(--muted);font-size:15.5px;margin:10px 0 0}
.mlist{list-style:none;margin:8px 0 0;padding:0}
.mlist li{display:flex;align-items:baseline;gap:10px;padding:13px 0;border-bottom:1px solid var(--line)}
.mlist li div{min-width:0;flex:0 1 auto;max-width:78%}
.mlist b{font-weight:700;font-size:17.5px}
.idesc{display:block;font-size:14px;line-height:1.45;color:var(--muted);margin-top:3px}
.sz{font-size:13px;color:var(--muted);font-weight:600}
.diet{margin-left:6px;font-size:11px;font-weight:700;text-decoration:none;border:1px solid var(--line);border-radius:4px;padding:1px 5px;color:var(--muted);vertical-align:2px}
.liked{display:block;font-size:12px;font-weight:700;color:var(--accent);text-transform:uppercase;letter-spacing:.05em;margin-top:2px}
.dots{flex:1;border-bottom:2px dotted var(--line);transform:translateY(-4px);min-width:20px}
.mlist .p{font:700 22px/1 var(--body);color:var(--accent);font-variant-numeric:tabular-nums;white-space:nowrap}
.mlist .p.ask{font-size:14px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.mnone{padding:24px;background:var(--surface);border:1px dashed var(--line);border-radius:var(--radius);text-align:center}
@media (max-width:520px){.mlist li div{max-width:72%}.idesc{font-size:13.5px}}

/* ---- Ramen Ryoma: their posters ---- */
h1,h2{letter-spacing:.01em;line-height:.92}
h2{font-size:clamp(44px,6vw,76px)}
h3{font-family:var(--body);font-weight:800}
.lede{font-size:clamp(17px,1.5vw,19px)}
.btn{font-weight:800;letter-spacing:.01em}

/* Header: the poster carries on up behind it */
.site-head{background:var(--red);color:#FBF4E8}
.site-head.scrolled{box-shadow:0 1px 0 rgba(0,0,0,.25)}
.site-head .wrap{height:72px}
.brand{display:flex;align-items:center;gap:12px;font-family:var(--display);font-size:28px;letter-spacing:.04em;color:#FBF4E8}
.brand img{width:48px;height:48px;border-radius:50%}
.site-head .btn-main{background:#FBF4E8;color:var(--red);min-height:44px;padding:10px 20px}
.site-head :focus-visible{outline-color:#FBF4E8}
@media (max-width:720px){.brand span{display:none}}

/* Hero: one big photo edge to edge (taste.md, "weak heroes"), the headline on poster red beside it. No frame, no fade. */
.hero{background:var(--red);color:#FBF4E8;display:grid;padding-block:0}
.hero :focus-visible{outline-color:#FBF4E8}
.hero-photo{margin:0}
.hero-photo img{display:block;width:100%;aspect-ratio:39/41;object-fit:cover;object-position:50% 55%}
.hero-copy{padding:var(--s6) 20px var(--s7)}
.hero h1{font-size:clamp(76px,21vw,176px);line-height:.84;color:#FBF4E8}
.hero .lede{margin-top:var(--s5);color:#FBF4E8;max-width:30em}
.cta{margin-top:var(--s5);display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px}
.hero .btn-main{background:var(--gold);color:var(--ink);font-size:18px;min-height:54px;padding:14px 28px}
.ue{color:#FBF4E8;font-weight:600}
.hours-line{margin-top:var(--s4);font-size:15px;color:#F3D9C9}
/* Only the menu page's heading uses these (the katakana and one gold cloud). */
.kata{position:absolute;writing-mode:vertical-rl;font-family:"Dela Gothic One",var(--display);font-size:clamp(22px,3vw,34px);letter-spacing:.12em;color:#FBF4E8;opacity:.9}
.cloud{position:absolute;color:var(--gold)}
@media (min-width:900px){
  /* text column starts on the page's left edge (.wrap), the photo runs to the window's right edge */
  .hero{grid-template-columns:minmax(0,1fr) minmax(0,1fr);min-height:min(calc(100vh - 72px),820px)}
  .hero-photo{order:2;position:relative}
  .hero-photo img{position:absolute;inset:0;height:100%;aspect-ratio:auto}
  .hero-copy{align-self:center;padding:var(--s8) var(--s7) var(--s8) max(20px,calc((100vw - var(--max))/2 + 20px))}
}

/* Team katsu or team karaage */
.team{padding-top:var(--s8)}
@media (min-width:900px){.team{padding-top:calc(var(--s9) + 24px)}}
.team-head{display:grid;gap:var(--s4)}
.team-head p{font-size:18px}
.team-grid{margin-top:var(--s6);display:grid;gap:var(--s6)}
.dish{display:grid;gap:var(--s4)}
.dish img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--radius)}
.dish h3{font-size:24px}
.dish p{margin-top:6px;color:var(--muted)}
.buy{display:flex;flex-wrap:wrap;align-items:center;gap:14px 18px;margin-top:var(--s4)}
.vs{font-family:var(--display);font-size:56px;line-height:1;color:var(--pop);text-align:center}
@media (max-width:899px){.team-grid{grid-template-columns:1fr 1fr;gap:var(--s4)}.vs{display:none}.dish h3{font-size:18px}.dish p{font-size:14.5px;line-height:1.45}.dish .buy{gap:10px}.dish .burst{min-width:64px;height:64px;font-size:23px}.dish .add{min-height:44px;padding:10px 16px;font-size:14.5px}}
/* The price burst from their NEW SIDES poster */
.burst{display:inline-grid;place-items:center;min-width:86px;height:86px;padding:0 12px;background:var(--pop);color:#fff;font:400 30px/1 var(--display);letter-spacing:.02em;
  clip-path:polygon(50% 0,59% 8%,71% 4%,75% 15%,88% 15%,87% 28%,98% 34%,92% 45%,100% 55%,90% 63%,94% 75%,82% 79%,79% 92%,67% 90%,58% 100%,50% 92%,41% 100%,33% 90%,21% 92%,18% 79%,6% 75%,10% 63%,0 55%,8% 45%,2% 34%,13% 28%,12% 15%,25% 15%,29% 4%,41% 8%)}
.add{display:inline-flex;align-items:center;min-height:48px;padding:12px 22px;border-radius:999px;background:var(--accent);color:#fff;font-weight:800;text-decoration:none}
.add:hover{background:var(--red-deep)}
@media (min-width:900px){
  .team-head{grid-template-columns:1fr 1fr;align-items:end;gap:var(--s7)}
  .team-grid{grid-template-columns:1fr auto 1fr;align-items:center;gap:var(--s6)}
  .dish{grid-template-columns:1fr 1fr;align-items:end;gap:var(--s5)}
}

/* The deals: lunch on the gold burst, the bento + ramen set beside it */
.deals{padding-top:var(--s7)}
.deals-grid{display:grid;gap:var(--s5)}
.lunch{position:relative;background:var(--ink);color:#FBF4E8;border-radius:var(--radius);padding:var(--s6);padding-top:calc(var(--s6) + 112px);margin-top:22px}
.lunch p{color:#E9DFD2;margin-top:var(--s3)}
.lunch h2{color:#FBF4E8}
.star{position:absolute;top:-22px;left:var(--s5);width:156px;height:156px;display:grid;place-content:center;text-align:center;background:var(--gold);color:var(--ink);transform:rotate(-8deg);
  font:800 12px/1.05 var(--body);text-transform:uppercase;letter-spacing:.03em;
  clip-path:polygon(50% 0,58% 12%,72% 5%,74% 20%,89% 18%,85% 32%,99% 38%,89% 50%,99% 62%,85% 68%,89% 82%,74% 80%,72% 95%,58% 88%,50% 100%,42% 88%,28% 95%,26% 80%,11% 82%,15% 68%,1% 62%,11% 50%,1% 38%,15% 32%,11% 18%,26% 20%,28% 5%,42% 12%)}
.star b{display:block;font:400 54px/0.9 var(--display);letter-spacing:0}
.add-light{background:var(--gold);color:var(--ink)}
.add-light:hover{background:#FFC857}
.lunch :focus-visible{outline-color:#FBF4E8}
.both{display:grid;gap:var(--s4)}
.both img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius)}
.both p{margin-top:var(--s3);color:var(--muted)}
.both h2{font-size:clamp(40px,4.6vw,60px)}
@media (min-width:900px){
  .deals-grid{grid-template-columns:5fr 7fr;gap:var(--s6);align-items:stretch}
  .lunch{padding:var(--s7);padding-top:calc(var(--s7) + 80px);display:flex;flex-direction:column;justify-content:flex-end}
  .both{grid-template-columns:1fr 1fr;align-items:center;gap:var(--s5)}
  .both img{aspect-ratio:4/5}
}

/* Their receipt post, printing the Google reviews. The torn bottom edge is a zig-zag mask. */
.said{padding-top:var(--s8)}
.said-grid{display:grid;gap:var(--s7)}
.receipt{position:relative;max-width:420px;width:100%;justify-self:center;background:#fff;color:#2A2522;padding:var(--s6) var(--s5) var(--s7);
  font:500 15px/1.5 ui-monospace,"Cascadia Mono",Menlo,Consolas,monospace;
  -webkit-mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) 50% / 18px 100%;
  mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) 50% / 18px 100%}
.r-head{font:800 21px/1.15 var(--body);text-transform:uppercase;text-align:center;letter-spacing:.01em}
.receipt dl{margin:var(--s5) 0 0;padding-top:var(--s3);border-top:1.5px dashed #9C918A}
.receipt dl div{display:flex;justify-content:space-between;gap:12px}
.receipt dd{margin:0}
.receipt blockquote{margin:var(--s4) 0 0;padding-top:var(--s4);border-top:1.5px dashed #9C918A}
.receipt blockquote p{font:600 17px/1.45 var(--body)}
.receipt cite{display:block;margin-top:6px;font-style:normal;color:#6A615B}
.receipt cite::before{content:"\2014\00a0"}
.r-foot{margin-top:var(--s4);padding-top:var(--s4);border-top:1.5px dashed #9C918A;text-align:center}
.barcode{display:block;height:44px;margin-top:var(--s4);background:repeating-linear-gradient(90deg,#2A2522 0 2px,#0000 2px 4px,#2A2522 4px 7px,#0000 7px 8px,#2A2522 8px 9px,#0000 9px 12px)}
.index h2{max-width:9em}
.index p{margin-top:var(--s4);font-size:18px}
.cats{list-style:none;margin:var(--s5) 0;padding:0;display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line)}
.cats a{display:flex;justify-content:space-between;align-items:center;padding:14px 4px;border-bottom:1px solid var(--line);font-weight:700;text-decoration:none}
.cats a::after{content:"\2192";color:var(--pop)}
.cats li:nth-child(odd) a{margin-right:16px}
.cats a:hover{color:var(--red)}
@media (min-width:900px){.said-grid{grid-template-columns:5fr 7fr;align-items:center;gap:var(--s8)}.receipt{transform:rotate(-1.5deg)}}

/* Visit: charcoal, like their logo stamp */
.visit{background:var(--ink);color:#FBF4E8;--line:rgba(251,244,232,.18);--muted:#D3C8BA;margin-top:var(--s8)}
.visit h2{color:#FBF4E8;max-width:10em}
.visit-grid{display:grid;gap:var(--s6)}
.visit address{margin-top:var(--s4);font-size:19px}
.visit .links{margin-top:var(--s3);font-weight:700}
.visit .open-now{margin-top:var(--s5);color:var(--gold)}
.visit .hours tr.today td{color:#fff}
.visit .deliver{margin-top:var(--s5)}
.visit :focus-visible{outline-color:#FBF4E8}
.visit-photo{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius)}
.map-box{position:relative;min-height:300px;border-radius:var(--radius);overflow:hidden;background:#2F2A28}
.map-card{position:absolute;inset:auto 16px 16px;font-size:15px}
.map{position:absolute;inset:0;width:100%;height:100%;border:0}
@media (min-width:900px){
  .visit-grid{grid-template-columns:5fr 7fr;grid-template-rows:auto 1fr;gap:var(--s5) var(--s7)}
  .visit-copy{grid-row:1/3}
  .visit-photo{aspect-ratio:16/9}
}

.site-foot{background:var(--ink);color:#D3C8BA;border-top:1px solid rgba(251,244,232,.12)}
.site-foot .wrap{align-items:center}
.site-foot img{border-radius:50%}
.tagline{font-family:var(--display);font-size:28px;letter-spacing:.04em;color:#FBF4E8}
.mbar .btn-main{background:var(--red)}

/* ---- Menu page ---- */
.menu-hero{background:var(--red);color:#FBF4E8;padding-block:var(--s5) var(--s7);overflow:hidden}
.menu-hero .wrap{position:relative}
.menu-hero h1{font-size:clamp(96px,18vw,180px);line-height:.84;color:#FBF4E8}
.menu-hero .lede{margin-top:var(--s3);color:#FBF4E8;max-width:30em}
.menu-hero .kata{top:0;right:20px}
.menu-hero .cloud{position:absolute;right:8%;bottom:-52px;width:240px;height:120px}
@media (max-width:720px){.menu-hero .cloud,.menu-hero .kata{display:none}}
.jump-bar{background:var(--ink)}
.jump a{border-color:rgba(251,244,232,.3)}
.jump a:hover,.jump a.on{border-color:var(--gold);color:var(--gold)}
.menu{padding-top:var(--s6)}
.mcat h2,.mcat h3{font-size:clamp(40px,6vw,60px);line-height:.95;border-bottom:3px solid var(--red)}
.mph{border-radius:var(--radius)}
.mlist .p{font:400 26px/1 var(--display);letter-spacing:.02em;color:var(--red)}
.mlist .p.ask{font:700 13px/1 var(--body);color:var(--red)}
.o-add{border-color:var(--red);color:var(--red);font-weight:800}
.o-add:hover{background:var(--red);color:#fff}
.o-q{border-color:var(--red);color:var(--red)}

/* The order ticket: their receipt again */
.o-ticket{background:#fff;border:0;border-radius:0;box-shadow:0 10px 30px -18px rgba(0,0,0,.5);padding:18px 18px 34px;
  -webkit-mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) 50% / 16px 100%;
  mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) 50% / 16px 100%}
.o-head h3{font:400 34px/1 var(--display);letter-spacing:.02em}
.o-bar>button{background:var(--red)}
.o-bar-b{color:var(--red)}