/* Blue Fish, Port Ghalib — "Riviera".
   A grand terrace by the sea: ivory marble, deep navy, brushed gold.
   Photographs stand in arched frames with an offset gold line, plates stand in gold rings on the marble,
   cards carry a double gold rule, navy bands carry gold hairlines. Written for this restaurant only. */

:root {
  --ivory: #f7f2e8; --sand: #e9dfcd; --white: #fffdf8;
  --navy: #0b203b; --navy-2: #14325c; --navy-d: #081a31;
  --gold: #b08d4f; --gold-l: #d8c08a; --gold-t: #96743a; --gold-line: rgba(176, 141, 79, .45); --gold-hair: rgba(176, 141, 79, .22);
  --glass: #86aab4; --terra: #a2472f;
  --soft: #44546b; --muted: #6d7a8c;
  --on-navy: rgba(247, 242, 232, .78); --hair-navy: rgba(216, 192, 138, .28);
  --display: "Fraunces", "El Messiri", "Iowan Old Style", Georgia, serif;
  --text: "Mulish", "Almarai", "Helvetica Neue", Arial, sans-serif;
  --jp: "Shippori Mincho", "Hiragino Mincho ProN", serif;
  --pad: clamp(20px, 4.6vw, 76px);
  --max: 1240px;
  --top: 76px;
  --dock: 0px;
  --ease: cubic-bezier(.22, .7, .18, 1);
  --marble: url("/assets/img/look/marble-tile.webp");
  --plate-shadow: drop-shadow(0 22px 16px rgba(74, 52, 18, .26)) drop-shadow(0 3px 3px rgba(74, 52, 18, .22));
  --dirx: 1;
  --over-pad: clamp(12px, 2.2vh, 24px); --over-logo: clamp(66px, 10vh, 104px);     /* the header while it lies over the first photograph */
}
[dir="rtl"] { --dirx: -1; }

/* ---------------------------------------------------------------- base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--top) + 18px); overflow-x: hidden; }
@supports (overflow: clip) { html, body { overflow-x: clip !important; } }
html { scrollbar-color: var(--gold-l) var(--ivory); }
body { margin: 0; padding-bottom: calc(var(--dock) + env(safe-area-inset-bottom, 0px)); background: var(--ivory) var(--marble) center top / 1400px auto; color: var(--navy);
  font: 400 1rem/1.7 var(--text); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; }
body.is-locked { overflow: hidden; }
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, h4 { margin: 0; font-family: var(--display); font-weight: 400; line-height: 1.08; letter-spacing: -.012em; font-optical-sizing: auto; }
h1 em, h2 em { font-style: italic; font-weight: 300; }
p { margin: 0 0 1em; text-wrap: pretty; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; border-radius: 0; }
address { font-style: normal; }
[hidden] { display: none !important; }
::selection { background: var(--navy); color: var(--gold-l); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: fixed; z-index: 200; top: 10px; inset-inline-start: 10px; padding: 12px 18px; background: var(--navy); color: var(--gold-l); text-decoration: none; transform: translateY(-200%); }
.skip:focus { transform: none; }
.ic { width: 20px; height: 20px; flex: none; }
[dir="rtl"] .ic-arrow { transform: scaleX(-1); }
.ic.flip { transform: scaleX(-1); }
[dir="rtl"] .ic.flip { transform: none; }

.kick, .rb-l, .field > label, .field > .label { margin: 0; font: 700 .69rem/1.5 var(--text); letter-spacing: .26em; text-transform: uppercase; color: var(--gold-t); }
.navy .kick, .on-navy .kick { color: var(--gold-l); }
.lead { font-size: 1.06rem; color: var(--soft); }

/* the small gold ornament: hairline, lozenge, hairline */
.orn { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 18px auto 0; }
.orn i { width: clamp(40px, 7vw, 84px); height: 1px; background: linear-gradient(to left, var(--gold), rgba(176, 141, 79, 0)); }
.orn i:last-child { background: linear-gradient(to right, var(--gold), rgba(176, 141, 79, 0)); }
.orn b { width: 7px; height: 7px; border: 1px solid var(--gold); transform: rotate(45deg); }
.orn-s i { width: 34px; }
.orn-l { justify-content: flex-start; margin-inline: 0; }
.orn-l i:first-child { display: none; }
[dir="rtl"] .orn i { background: linear-gradient(to right, var(--gold), rgba(176, 141, 79, 0)); }
[dir="rtl"] .orn i:last-child { background: linear-gradient(to left, var(--gold), rgba(176, 141, 79, 0)); }

/* the gold palm frond, large and faint in the corners */
.palm { position: absolute; z-index: 0; width: clamp(260px, 34vw, 520px); height: auto; max-width: none; opacity: .5; pointer-events: none; user-select: none; transform: scaleX(calc(var(--m, 1) * var(--dirx))) rotate(var(--r, 0deg)); }
.navy .palm { opacity: .32; }

/* the double gold rule of every card */
.card2 { --card: var(--white); --lift: 0 0 0 0 transparent; background: var(--card);
  box-shadow: inset 0 0 0 1px var(--gold), inset 0 0 0 6px var(--card), inset 0 0 0 7px var(--gold-line), var(--lift); }

/* ---------------------------------------------------------------- buttons: slim rectangles, spaced capitals */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 52px; padding: 0 30px; font: 700 .7rem/1 var(--text); letter-spacing: .24em; text-transform: uppercase;
  text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color .45s var(--ease), color .45s var(--ease), box-shadow .45s var(--ease), transform .45s var(--ease); }
.btn .ic { width: 16px; height: 16px; transition: transform .45s var(--ease); }
.btn:hover .ic-arrow { transform: translateX(5px); }
[dir="rtl"] .btn:hover .ic-arrow { transform: scaleX(-1) translateX(5px); }
.btn-navy { background: var(--navy); color: var(--gold-l); box-shadow: inset 0 0 0 4px var(--navy), inset 0 0 0 5px rgba(216, 192, 138, .5); }
.btn-navy:hover { background: var(--navy-2); color: #fff; box-shadow: inset 0 0 0 4px var(--navy-2), inset 0 0 0 5px rgba(216, 192, 138, .9); }
.btn-gold { color: var(--navy); box-shadow: inset 0 0 0 1px var(--gold); background: rgba(255, 253, 248, .5); }
.btn-gold:hover { background: var(--gold); color: var(--white); }
.btn-gold.on-navy, .navy .btn-gold { color: var(--gold-l); background: none; box-shadow: inset 0 0 0 1px var(--gold-l); }
.btn-gold.on-navy:hover, .navy .btn-gold:hover { background: var(--gold-l); color: var(--navy); }
.btn-ivory { background: var(--ivory); color: var(--navy); box-shadow: inset 0 0 0 4px var(--ivory), inset 0 0 0 5px var(--gold-line); }
.btn-ivory:hover { background: var(--gold-l); box-shadow: inset 0 0 0 4px var(--gold-l), inset 0 0 0 5px rgba(11, 32, 59, .3); }
.btn-block { display: flex; width: 100%; }
.btn-sm { min-height: 42px; padding: 0 18px; font-size: .64rem; letter-spacing: .18em; }
.btn[disabled] { opacity: .45; cursor: not-allowed; }

/* a quiet text link with a gold line that draws */
.tlink { display: inline-flex; align-items: center; gap: 10px; padding: 6px 0; font: 700 .7rem/1.3 var(--text); letter-spacing: .2em; text-transform: uppercase; text-decoration: none; color: inherit;
  background: linear-gradient(var(--gold), var(--gold)) 0 100% / 100% 1px no-repeat; transition: background-size .5s var(--ease), color .3s; }
[dir="rtl"] .tlink { background-position: 100% 100%; }
.tlink:hover { background-size: 0 1px; color: var(--gold-t); }
.navy .tlink:hover, .on-navy .tlink:hover { color: var(--gold-l); }
.tlink .ic { width: 16px; height: 16px; }
.contact-links { display: flex; flex-wrap: wrap; gap: 14px 30px; }

/* ---------------------------------------------------------------- header */
.hdr { position: fixed; z-index: 60; inset: 0 0 auto 0; background: rgba(250, 246, 238, .93); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 var(--gold-line), 0 18px 40px -30px rgba(11, 32, 59, .4); }
.hdr-in { height: var(--top); display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 24px; padding-inline: var(--pad); }
.hdr-logo { justify-self: start; display: block; }
.hdr-logo img { height: 50px; width: auto; }
.hdr-nav { display: flex; align-items: center; gap: clamp(20px, 2.8vw, 44px); }
.hdr-nav a { position: relative; padding: 10px 0; font: 700 .69rem/1 var(--text); letter-spacing: .24em; text-transform: uppercase; text-decoration: none; white-space: nowrap; }
.hdr-nav a::after { content: ""; position: absolute; inset-inline: 0; bottom: 2px; height: 1px; background: var(--gold); transform: scaleX(0); transform-origin: 0 50%; transition: transform .5s var(--ease); }
[dir="rtl"] .hdr-nav a::after { transform-origin: 100% 50%; }
.hdr-nav a:hover::after, .hdr-nav a[aria-current]::after { transform: scaleX(1); }
.hdr-nav a[aria-current] { color: var(--gold-t); }
.hdr-nav .nav-res { display: none; }
.hdr-tools { justify-self: end; display: flex; align-items: center; gap: 6px; }
.hdr-bag, .hdr-burger { position: relative; width: 44px; height: 44px; display: grid; place-items: center; transition: color .3s; }
.hdr-bag:hover, .hdr-burger:hover { color: var(--gold-t); }
.hdr-burger { display: none; }
.badge { position: absolute; top: 3px; inset-inline-end: 1px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: var(--gold); color: var(--white); font: 700 .62rem/18px var(--text); text-align: center; }
.badge.bump { animation: bump .5s var(--ease); }
@keyframes bump { 40% { transform: scale(1.45); } }
.hdr-cta { min-height: 44px; padding: 0 24px; margin-inline-start: 10px; }

.lang { position: relative; }
.lang summary { list-style: none; display: flex; align-items: center; gap: 6px; height: 44px; padding: 0 10px; cursor: pointer; font: 700 .69rem/1 var(--text); letter-spacing: .2em; }
.lang summary::-webkit-details-marker { display: none; }
.lang summary .ic { width: 12px; height: 12px; color: var(--gold); transition: transform .35s var(--ease); }
.lang[open] summary .ic { transform: rotate(180deg); }
.lang-menu { position: absolute; z-index: 5; top: calc(100% + 8px); inset-inline-end: 0; min-width: 190px; padding: 12px; background: var(--white); color: var(--navy);
  box-shadow: inset 0 0 0 1px var(--gold), inset 0 0 0 5px var(--white), inset 0 0 0 6px var(--gold-line), 0 30px 50px -24px rgba(11, 32, 59, .45); animation: drop .35s var(--ease); }
@keyframes drop { from { opacity: 0; transform: translateY(-8px); } }
.lang-menu a { display: flex; align-items: baseline; gap: 14px; padding: 9px 12px; text-decoration: none; font-size: .92rem; transition: background-color .25s; }
.lang-menu a b { width: 24px; font: 700 .66rem/1 var(--text); letter-spacing: .14em; color: var(--gold-t); }
.lang-menu a:hover { background: var(--ivory); }
.lang-menu a[aria-current="true"] { background: var(--navy); color: var(--ivory); }
.lang-menu a[aria-current="true"] b { color: var(--gold-l); }

/* € · $ · LE beside the language: the prices in euros, dollars or Egyptian pounds. app.js shows it only once the
   restaurant system has sent its rates. Three symbols in a row, a small gold lozenge between them, a gold line under the chosen one. */
.cur { display: flex; align-items: center; height: 44px; padding-inline-end: 8px; margin-inline-end: 2px; border-inline-end: 1px solid var(--gold-line); }
.cur button { position: relative; height: 44px; min-width: 26px; padding: 0 8px; font: 700 .78rem/1 var(--text); letter-spacing: .06em; color: rgba(11, 32, 59, .52); transition: color .3s; }
.cur button:not([hidden]) ~ button:not([hidden])::before { content: ""; position: absolute; inset-inline-start: -2px; top: calc(50% - 2px); width: 3px; height: 3px; background: var(--gold); transform: rotate(45deg); opacity: .8; }
.cur button span { position: relative; display: block; padding: 6px 0; }
.cur button span::after { content: ""; position: absolute; inset-inline: -2px; bottom: 0; height: 1px; background: var(--gold); transform: scaleX(0); transition: transform .45s var(--ease); }
.cur button:hover { color: var(--gold-t); }
.cur button[aria-pressed="true"] { color: var(--navy); }
.cur button[aria-pressed="true"] span::after { transform: scaleX(1); }

/* Home. The first photograph carries its own header: white logo in the middle, the navigation in one line under it.
   It belongs to the photograph and scrolls away with it. The ivory bar waits above the screen and comes down
   over the last line of that header as it leaves, so a navigation is always in sight and nothing jumps. */
.hero-top { position: absolute; z-index: 3; inset: 0 0 auto 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 2px 0; padding: var(--over-pad) var(--pad) 0; color: #fff; }
.hero-logo { flex: 0 0 100%; display: flex; justify-content: center; }
.hero-logo img { height: var(--over-logo); width: auto; filter: drop-shadow(0 2px 14px rgba(8, 26, 49, .45)); }
.hero-top .hdr-nav .nav-res { display: block; }
.hero-top .hdr-nav a { text-shadow: 0 1px 10px rgba(8, 26, 49, .55); }
.hero-top .hdr-nav a::after { background: var(--gold-l); }
.hero-top .hdr-tools { justify-self: auto; margin-inline-start: clamp(16px, 2.2vw, 34px); padding-inline-start: clamp(8px, 1.4vw, 22px); border-inline-start: 1px solid rgba(216, 192, 138, .6); gap: 0; }
.hero-top .hdr-bag:hover, .hero-top .hdr-burger:hover, .hero-top .lang summary:hover { color: var(--gold-l); }
.hero-top .lang summary .ic { color: var(--gold-l); }
.hero-top .cur { border-inline-end-color: rgba(216, 192, 138, .6); }
.hero-top .cur button { color: rgba(255, 255, 255, .7); text-shadow: 0 1px 10px rgba(8, 26, 49, .55); }
.hero-top .cur button:hover, .hero-top .cur button[aria-pressed="true"] { color: #fff; }
.hero-top .cur button span::after { background: var(--gold-l); }
.hdr { transition: transform .55s var(--ease), visibility 0s; }
.hdr.is-away { transform: translateY(-104%); visibility: hidden; transition: transform .45s var(--ease), visibility 0s .45s; }

/* ---------------------------------------------------------------- phone navigation: an ivory sheet */
.navsheet { position: fixed; inset: 0; z-index: 120; display: flex; flex-direction: column; padding: 16px var(--pad) calc(26px + env(safe-area-inset-bottom, 0px)); overflow: hidden auto;
  background: var(--ivory) var(--marble) center / 1000px auto; animation: sheet-in .5s var(--ease); }
@keyframes sheet-in { from { opacity: 0; transform: translateY(-14px); } }
.navsheet-top { position: relative; display: flex; align-items: center; justify-content: space-between; padding-bottom: 14px; border-bottom: 1px solid var(--gold-line); }
.navsheet-top img { height: 50px; width: auto; }
.navsheet-x { width: 46px; height: 46px; display: grid; place-items: center; border: 1px solid var(--gold-line); border-radius: 50%; background: rgba(255, 253, 248, .7); }
.navsheet-nav { position: relative; display: grid; margin-bottom: auto; }
.navsheet-nav a { display: flex; align-items: baseline; gap: 18px; padding: 15px 0 14px; border-bottom: 1px solid var(--gold-line); text-decoration: none; font: 400 clamp(1.65rem, 7.2vw, 2.3rem)/1.12 var(--display);
  animation: rise .7s var(--ease) both; animation-delay: calc(var(--i) * 55ms + 100ms); }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } }
.navsheet-nav a i { width: 26px; font: 400 .82rem/1 var(--display); letter-spacing: .08em; color: var(--gold-t); }
.navsheet-nav a[aria-current] { font-style: italic; color: var(--gold-t); }
.navsheet-foot { position: relative; display: grid; gap: 18px; margin-top: 26px; }
.navsheet-langs { display: flex; flex-wrap: wrap; gap: 8px; }
.navsheet-langs a { display: inline-flex; align-items: baseline; gap: 8px; padding: 9px 12px; border: 1px solid var(--gold-line); background: rgba(255, 253, 248, .75); text-decoration: none; font-size: .84rem; }
.navsheet-langs a b { font: 700 .64rem/1 var(--text); letter-spacing: .12em; color: var(--gold-t); }
.navsheet-langs a[aria-current="true"] { background: var(--navy); border-color: var(--navy); color: var(--ivory); }
.navsheet-langs a[aria-current="true"] b { color: var(--gold-l); }
.navsheet-cur { display: grid; gap: 8px; }
.navsheet-cur-in { display: flex; flex-wrap: wrap; gap: 8px; }
.navsheet-cur button { display: inline-flex; align-items: baseline; gap: 8px; padding: 9px 12px; border: 1px solid var(--gold-line); background: rgba(255, 253, 248, .75); font-size: .84rem; transition: background-color .3s, color .3s; }
.navsheet-cur button b { font: 700 .74rem/1 var(--text); color: var(--gold-t); }
.navsheet-cur button[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: var(--ivory); }
.navsheet-cur button[aria-pressed="true"] b { color: var(--gold-l); }
.palm-nav { --m: -1; --r: -8deg; inset-inline-end: -110px; bottom: -70px; width: 420px; opacity: .55; }

/* two buttons at the foot of a phone screen */
.dock { display: none; }

/* ---------------------------------------------------------------- first screen */
.hero { position: relative; height: clamp(540px, 69vh, 860px); overflow: hidden; isolation: isolate; background: var(--navy); color: var(--white); }
.hero-pic { position: absolute; inset: 0; z-index: -1; }
.hero-pic img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; transform: translateY(calc(var(--sy, 0) * 60px)) scale(1.02); animation: hero-zoom 24s var(--ease) both; }
@keyframes hero-zoom { from { scale: 1.14; } to { scale: 1; } }
.hero-pic::after { content: ""; position: absolute; inset: 0; background:
  linear-gradient(180deg, rgba(8, 26, 49, .74) 0%, rgba(8, 26, 49, .56) 15%, rgba(8, 26, 49, .42) 30%, rgba(8, 26, 49, .16) 43%, rgba(8, 26, 49, 0) 55%, rgba(8, 26, 49, 0) 82%, rgba(8, 26, 49, .3) 100%); }
.hero-in { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; text-align: center; padding: calc(var(--over-pad) + var(--over-logo) + 40px + clamp(14px, 3.2vh, 34px)) var(--pad) 0; pointer-events: none; }
.hero-in > * { pointer-events: auto; }
.hero-title { font: 300 clamp(2.4rem, 4.35vw, 4.5rem)/1.08 var(--display); letter-spacing: -.018em; color: var(--white); text-shadow: 0 2px 30px rgba(8, 26, 49, .5); text-wrap: balance; animation: rise 1.4s .4s var(--ease) both; }
.hero-title em { font-weight: 300; color: #fff; }

/* tonight's sunset, with a small gold sun */
.sunline { display: inline-flex; align-items: center; flex-wrap: wrap; justify-content: flex-start; gap: 8px 14px; font: 700 .69rem/1.4 var(--text); letter-spacing: .22em; text-transform: uppercase; text-align: start; color: var(--gold-t); }
.sunline .ic { width: 26px; height: 26px; color: var(--gold); }
.sunline b { font: 400 1.25rem/1 var(--display); letter-spacing: .02em; margin-inline-start: 4px; color: var(--navy); font-variant-numeric: lining-nums; }
.sunline i { width: 1px; height: 16px; background: var(--gold-line); }
.sunline em { font-style: normal; background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; padding-bottom: 4px; transition: background-size .5s var(--ease); }
[dir="rtl"] .sunline em { background-position: 100% 100%; }
.sunline:hover em { background-size: 0 1px; }
.sunline.on-photo { margin-top: clamp(12px, 2.4vh, 24px); padding: 7px 20px 7px 16px; color: var(--gold-l); background: rgba(8, 26, 49, .46); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: inset 0 0 0 1px rgba(216, 192, 138, .45); animation: rise 1.4s .7s var(--ease) both; }
.sunline.on-photo .ic, .sunline.on-navy .ic { color: var(--gold-l); }
.sunline.on-photo b, .sunline.on-navy b { color: #fff; }
.sunline.on-photo i, .sunline.on-navy i { background: rgba(216, 192, 138, .6); }
.sunline.on-navy { color: var(--gold-l); margin: 6px 0 26px; }
.sunline:not(.on-photo) i { display: none; }
.sunline:not(.on-photo) em { margin-inline-start: 8px; }

/* the reservation bar over the lower edge of the photograph */
.under-hero { position: relative; z-index: 2; }
.resbar-wrap { position: relative; z-index: 3; width: min(var(--max), 100% - 2 * var(--pad)); margin: -54px auto 0; animation: rise 1.4s .6s var(--ease) both; }
.resbar { --lift: 0 40px 70px -40px rgba(8, 26, 49, .55); display: grid; grid-template-columns: 1.25fr 1fr .8fr 1.25fr auto; align-items: stretch; min-height: 108px; padding: 7px; }
.resbar-title { display: none; }
.rb-cell { position: relative; display: grid; align-content: center; gap: 7px; min-width: 0; padding: 12px 48px 12px clamp(18px, 2.4vw, 34px); cursor: pointer; transition: background-color .35s; }
[dir="rtl"] .rb-cell { padding: 12px clamp(18px, 2.4vw, 34px) 12px 48px; }
.rb-cell + .rb-cell::before, .rb-cell + .btn::before { content: ""; position: absolute; inset-inline-start: 0; top: 22%; height: 56%; width: 1px; background: var(--gold-line); }
.rb-cell:hover, .rb-cell:focus-within { background: var(--ivory); }
.rb-cell:focus-within { box-shadow: inset 0 -2px 0 var(--gold); }
.rb-l { cursor: pointer; }
.rb-v, .rb-cell select { font: 400 1.3rem/1.25 var(--display); color: var(--navy); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rb-cell input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; border: 0; padding: 0; min-height: 0; }
.rb-cell select { -webkit-appearance: none; appearance: none; width: 100%; min-height: 0; padding: 0; border: 0; background: none; cursor: pointer; outline: none; box-shadow: none; }
.rb-cell > .ic { position: absolute; inset-inline-end: 22px; top: calc(50% + 6px); width: 13px; height: 13px; color: var(--gold); pointer-events: none; transition: transform .35s var(--ease); }
.rb-cell:hover > .ic { transform: translateY(3px); }
.resbar .btn { align-self: center; margin-inline: clamp(14px, 1.8vw, 26px); padding: 0 clamp(30px, 3.6vw, 56px); min-height: 58px; }
.resbar .btn::before { inset-inline-start: calc(clamp(14px, 1.8vw, 26px) * -1); top: -8%; height: 116%; }

/* ---------------------------------------------------------------- the signatures: plates in gold rings on the marble */
.sig { position: relative; padding: 0 var(--pad) clamp(70px, 9vw, 130px); overflow: hidden; }
.sig-panel { position: relative; z-index: 1; width: min(var(--max), 100%); margin: 0 auto; padding: clamp(40px, 4.4vw, 62px) clamp(18px, 4vw, 70px) clamp(44px, 5vw, 70px);
  background: linear-gradient(rgba(255, 253, 248, .9), rgba(255, 253, 248, .74)); border: 1px solid var(--gold-line); border-top: 0; }
.sig-head { display: grid; justify-items: center; text-align: center; max-width: 620px; margin: 0 auto clamp(40px, 4.4vw, 58px); }
.sig-head .orn { margin-top: 14px; }
.sig-note { margin: clamp(40px, 5vw, 60px) auto 0; max-width: 46ch; text-align: center; font: italic 300 1.2rem/1.5 var(--display); color: var(--soft); }
.caps-title { font: 400 clamp(1.45rem, 2.7vw, 2.15rem)/1.25 var(--display); letter-spacing: .3em; text-transform: uppercase; color: var(--gold-t); margin-inline-end: -.3em; }
.shead-sub { margin: 18px 0 0; color: var(--soft); max-width: 54ch; }
.sig-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(44px, 5vw, 72px) clamp(18px, 3vw, 44px); }
.sigc { position: relative; display: grid; justify-items: center; align-content: start; text-align: center; }
.sigc-hit { position: absolute; inset: 0; z-index: 2; }
.sigc-ring { position: relative; width: min(100%, 290px); aspect-ratio: 1; display: grid; place-items: center; margin-bottom: 30px; }
.sigc-ring::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 50% 38%, #fff 0%, var(--ivory) 78%);
  box-shadow: 0 0 0 1px var(--gold), 0 36px 50px -34px rgba(74, 52, 18, .5); outline: 1px solid var(--gold-line); outline-offset: 9px; transition: outline-offset .9s var(--ease); }
.sigc-ring img { position: absolute; top: 50%; left: 50%; translate: -50% -50%; width: 90%; height: auto; max-width: none; filter: var(--plate-shadow); transition: transform 1.2s var(--ease), filter 1.2s var(--ease); }
/* each plate at its own size: the long fish plates reach over the ring */
.sigc-ring .p-ura-maki-special-philadelphia { width: 97%; }
.sigc-ring .p-ura-maki-special-pyramids { width: 121%; rotate: -8deg; }
.sigc-ring .p-fried-rolls-hot-halloween { width: 106%; }
.sigc-ring .p-sashimi-salmon { width: 93%; }
.sigc-ring .p-poke-bowl { width: 85%; }
.sigc-ring .p-ura-maki-special-rambo { width: 58%; rotate: 40deg; }
.sigc h3 { font-size: clamp(1.3rem, 2vw, 1.62rem); transition: color .4s; }
.sigc-desc { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; max-width: 34ch; margin: 10px 0 0; font-size: .88rem; line-height: 1.55; color: var(--soft); }
.sigc-desc:empty { display: none; }
.sigc-foot { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 16px 0 0; }
.sigc-foot span { font: 700 .64rem/1 var(--text); letter-spacing: .22em; text-transform: uppercase; color: var(--gold-t); }
.sigc-foot span::after { content: ""; display: inline-block; width: 18px; height: 1px; margin-inline-start: 14px; vertical-align: middle; background: var(--gold-line); }
.sigc-foot b { font: 400 1.3rem/1 var(--display); font-variant-numeric: lining-nums; }
.sigc-add { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--gold-line); color: var(--gold-t); transition: background-color .4s, color .4s, border-color .4s; }
.sigc-add .ic { width: 14px; height: 14px; }
@media (hover: hover) {
  .sigc:hover .sigc-ring img { transform: translateY(-12px) rotate(5deg) scale(1.035); filter: drop-shadow(0 40px 26px rgba(74, 52, 18, .2)) drop-shadow(0 4px 4px rgba(74, 52, 18, .18)); }
  .sigc:hover .sigc-ring::before { outline-offset: 14px; }
  .sigc:hover h3 { color: var(--gold-t); }
  .sigc:hover .sigc-add { background: var(--navy); border-color: var(--navy); color: var(--gold-l); }
}
.sig-more { display: flex; justify-content: center; margin: 26px 0 0; }
.palm-sig-a { --r: -6deg; inset-inline-start: -150px; top: 30%; }
.palm-sig-b { --m: -1; --r: 8deg; inset-inline-end: -170px; bottom: 6%; }

/* ---------------------------------------------------------------- shared section pieces */
.shead { position: relative; max-width: 720px; }
.shead h2, .welcome h2, .golden h2, .reserve h2, .delivery h2, .visit h2 { font-size: clamp(2.1rem, 4.2vw, 3.5rem); font-weight: 300; text-wrap: balance; }
.shead .kick, .welcome .kick, .golden .kick, .reserve .kick, .delivery .kick, .visit .kick { margin-bottom: 18px; }
.shead-c { margin-inline: auto; text-align: center; display: grid; justify-items: center; }
.navy { position: relative; background: radial-gradient(120% 100% at 85% 0%, var(--navy-2) 0%, var(--navy) 52%, var(--navy-d) 100%); color: var(--ivory); }
.navy::before { content: ""; position: absolute; z-index: 1; inset: 9px 0; border-block: 1px solid var(--hair-navy); pointer-events: none; }
.navy h2 em { color: var(--gold-l); }
.navy .shead-sub { color: var(--on-navy); }

/* a photograph in an arch, with its gold line set off from it */
.arch { position: relative; margin: 0; }
.arch-pic { position: relative; display: block; overflow: hidden; aspect-ratio: 4 / 5.1; border-radius: 999px 999px 0 0; background: var(--sand); }
.arch-pic img { width: 100%; height: 100%; object-fit: cover; transform: translateY(calc(var(--py, 0) * -16px)) scale(1.09); }
.arch-line { position: absolute; z-index: 1; inset: -13px; border: 1px solid var(--gold); border-radius: 999px 999px 0 0; pointer-events: none; transform: translate(calc(var(--py, 0) * 7px * var(--dirx)), calc(var(--py, 0) * 12px)); }
.round { position: absolute; z-index: 2; margin: 0; aspect-ratio: 1; border-radius: 50%; overflow: hidden; border: 7px solid var(--white); box-shadow: 0 0 0 1px var(--gold), 0 30px 44px -26px rgba(74, 52, 18, .6); background: var(--sand); }
.round img { width: 100%; height: 100%; object-fit: cover; }

/* ---------------------------------------------------------------- welcome */
.welcome { position: relative; padding: clamp(70px, 9vw, 140px) var(--pad) clamp(90px, 11vw, 170px); overflow: hidden; }
.welcome-in { position: relative; z-index: 1; width: min(var(--max), 100%); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 460px) minmax(0, 1fr); gap: clamp(54px, 9vw, 140px); align-items: center; }
.welcome-art { position: relative; padding: 13px; }
.welcome-art .round { width: 47%; inset-inline-end: -15%; bottom: -9%; }
.welcome-art .round img { object-position: 38% 50%; transform: scale(1.32); }
.welcome-text p:not(.kick) { color: var(--soft); max-width: 56ch; }
.welcome-text h2 { margin-bottom: 26px; }
.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 34px 0 38px; border-block: 1px solid var(--gold-line); }
.facts div { padding: 24px clamp(12px, 1.6vw, 24px) 22px; }
.facts div + div { border-inline-start: 1px solid var(--gold-line); }
.facts div:first-child { padding-inline-start: 0; }
.facts dt { font: 300 clamp(2.5rem, 4.4vw, 3.7rem)/1 var(--display); color: var(--gold); font-variant-numeric: lining-nums; }
.facts dd { margin: 10px 0 0; font-size: .8rem; line-height: 1.45; color: var(--soft); }
.palm-welcome { --m: -1; --r: 4deg; inset-inline-end: -120px; top: -40px; }

/* ---------------------------------------------------------------- the sushi counter: five ways, on navy */
.counter { padding: clamp(84px, 10vw, 150px) var(--pad); overflow: hidden; }
.counter-in { position: relative; z-index: 2; width: min(var(--max), 100%); margin: 0 auto; }
.styles { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: clamp(30px, 6vw, 110px); align-items: center; margin-top: clamp(34px, 4vw, 56px); }
.styles-list { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--hair-navy); }
.style { border-top: 1px solid var(--hair-navy); }
.style-btn { display: grid; grid-template-columns: 84px minmax(0, 1fr) auto 18px; align-items: baseline; gap: 6px 20px; width: 100%; padding: 22px 0; text-align: start; }
.style-jp { font: 500 1.3rem/1 var(--jp); color: var(--gold-l); opacity: .85; }
.style-name { font: 300 clamp(1.5rem, 2.7vw, 2.25rem)/1.1 var(--display); transition: color .4s, transform .6s var(--ease); }
.style-meta { font: 700 .64rem/1.4 var(--text); letter-spacing: .18em; text-transform: uppercase; color: rgba(247, 242, 232, .58); white-space: nowrap; }
.style-btn .ic { width: 14px; height: 14px; align-self: center; color: var(--gold-l); transition: transform .5s var(--ease); }
.style.is-on .style-btn .ic { transform: rotate(180deg); }
.style.is-on .style-name { font-style: italic; color: var(--gold-l); }
.style-more { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .7s var(--ease); }
.style.is-on .style-more { grid-template-rows: 1fr; }
.style-more > div { min-height: 0; overflow: hidden; padding-inline-start: 104px; }
.style-more p { margin: 0 0 14px; max-width: 50ch; color: var(--on-navy); }
.style-more .tlink { margin-bottom: 26px; color: var(--gold-l); }
.style-pic-m { display: none; }
@media (min-width: 900px) {      /* wide screens: the list keeps still, the words about the chosen style change below it */
  .styles-list { position: relative; padding-bottom: 168px; border-bottom: 0; }
  .style:last-child { border-bottom: 1px solid var(--hair-navy); }
  .style-more { position: absolute; inset: auto 0 0 0; height: 168px; display: block; opacity: 0; visibility: hidden; transition: opacity .5s ease, visibility 0s .5s; }
  .style.is-on .style-more { opacity: 1; visibility: visible; transition: opacity .8s .2s ease, visibility 0s; }
  .style-more > div { padding-top: 30px; overflow: visible; }
  .style-btn .ic { transform: rotate(calc(-90deg * var(--dirx))); opacity: .5; }
  .style.is-on .style-btn .ic { transform: rotate(calc(-90deg * var(--dirx))) translateY(6px); opacity: 1; }
  .style-btn:hover .style-name { color: var(--gold-l); }
}
.styles-stage { position: relative; aspect-ratio: 1; display: grid; place-items: center; }
.stage-ring { position: absolute; inset: 9%; border-radius: 50%; border: 1px solid rgba(216, 192, 138, .8); background: radial-gradient(circle at 50% 34%, rgba(255, 255, 255, .11), rgba(255, 255, 255, 0) 68%); outline: 1px solid rgba(216, 192, 138, .32); outline-offset: 13px; }
.style-pic { position: absolute; width: auto; height: auto; max-width: 84%; max-height: 84%; opacity: 0; transform: scale(.93) rotate(-7deg); filter: drop-shadow(0 34px 30px rgba(3, 12, 26, .6)); transition: opacity .7s ease, transform 1.3s var(--ease); }
.style-pic.is-on { opacity: 1; transform: none; }
.palm-counter { --m: -1; --r: 14deg; inset-inline-end: -140px; bottom: -150px; width: clamp(320px, 40vw, 600px); }

/* ---------------------------------------------------------------- golden hour */
.golden { position: relative; padding: clamp(84px, 10vw, 150px) var(--pad); overflow: hidden; }
.golden-in { position: relative; z-index: 1; width: min(var(--max), 100%); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 430px); gap: clamp(54px, 9vw, 140px); align-items: center; }
.golden-time { display: grid; justify-items: start; gap: 4px; margin: 6px 0 30px; }
.golden-time .ic { width: 44px; height: 44px; color: var(--gold); margin-bottom: -4px; }
.golden-time small { font: 700 .69rem/1.5 var(--text); letter-spacing: .26em; text-transform: uppercase; color: var(--gold-t); }
.golden-time b { font: 300 clamp(5.4rem, 13vw, 10.5rem)/.86 var(--display); letter-spacing: -.035em; font-variant-numeric: lining-nums; color: var(--navy); margin-inline-start: -.04em; }
.golden-text > p:not(.kick) { color: var(--soft); max-width: 50ch; margin: 22px 0 32px; }
.golden-art { position: relative; padding: 13px; }
.golden-art .arch-pic { aspect-ratio: 4 / 5.2; }
.palm-golden { --r: -4deg; inset-inline-start: -62%; bottom: -16%; width: 110%; opacity: .6; z-index: -1; }

/* ---------------------------------------------------------------- chef's selection */
.platter { position: relative; padding: clamp(80px, 10vw, 140px) var(--pad) clamp(90px, 11vw, 160px); overflow: hidden; }
.platter::before { content: ""; position: absolute; inset: 0 var(--pad) auto; height: 1px; background: linear-gradient(to right, rgba(176, 141, 79, 0), var(--gold-line) 20%, var(--gold-line) 80%, rgba(176, 141, 79, 0)); }
.platter-in { position: relative; z-index: 1; width: min(var(--max), 100%); margin: 0 auto; }
.platter-opts { display: grid; grid-template-columns: repeat(2, minmax(0, 370px)); justify-content: center; gap: clamp(22px, 3.4vw, 50px); margin-top: clamp(40px, 5vw, 64px); }
.pl { --lift: 0 40px 60px -44px rgba(74, 52, 18, .55); display: grid; justify-items: center; text-align: center; padding: 46px 28px 40px; transition: transform .8s var(--ease), box-shadow .8s var(--ease); }
.pl-name { font: 700 .69rem/1.5 var(--text); letter-spacing: .28em; text-transform: uppercase; color: var(--gold-t); }
.pl-n { margin-top: 12px; font: 300 clamp(5.4rem, 9.6vw, 8rem)/.92 var(--display); letter-spacing: -.03em; font-variant-numeric: lining-nums; }
.pl-u { font: italic 300 1.3rem/1.2 var(--display); color: var(--soft); }
.pl .orn { margin-top: 20px; }
.pl-p { margin: 18px 0 24px; font: 400 1.7rem/1 var(--display); font-variant-numeric: lining-nums; }
.pl-add { min-height: 48px; padding: 0 24px; }
@media (hover: hover) { .pl:hover, .rv .pl.reveal.is-in:hover { transform: translateY(-8px); --lift: 0 54px 70px -44px rgba(74, 52, 18, .6); } .pl:hover .pl-add { background: var(--navy-2); color: #fff; } }
.rv .pl.reveal.is-set { transition: transform .8s var(--ease), box-shadow .8s var(--ease); }
.platter-fish { position: absolute; z-index: 0; height: auto; filter: var(--plate-shadow); pointer-events: none; }
.pf-1 { width: clamp(130px, 15vw, 230px); inset-inline-start: clamp(-70px, -3vw, -20px); top: 22%; transform: rotate(calc(-16deg * var(--dirx))); }
.pf-2 { width: clamp(260px, 30vw, 460px); inset-inline-end: clamp(-150px, -8vw, -70px); bottom: 9%; transform: rotate(calc(-22deg * var(--dirx))); }

/* ---------------------------------------------------------------- delivery: the marina by day, a navy panel over one side */
.delivery { position: relative; isolation: isolate; display: flex; align-items: center; min-height: min(820px, 100vh); padding: clamp(56px, 7vw, 100px) var(--pad); overflow: hidden; background: var(--navy); }
.delivery-pic { position: absolute; inset: 0; z-index: -1; }
.delivery-pic img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 62%; }
[dir="rtl"] .delivery-pic img { object-position: 30% 62%; }
.delivery-pic::after { content: ""; position: absolute; inset: 0; background: linear-gradient(calc(90deg * var(--dirx)), rgba(8, 26, 49, .42), rgba(8, 26, 49, 0) 60%); }
.delivery-panel { position: relative; width: min(540px, 100%); margin-inline-start: max(0px, (100% - var(--max)) / 2); padding: clamp(34px, 4vw, 58px) clamp(26px, 3.6vw, 54px); background: var(--navy); color: var(--ivory);
  box-shadow: inset 0 0 0 1px var(--gold-l), inset 0 0 0 7px var(--navy), inset 0 0 0 8px var(--hair-navy), 0 50px 80px -40px rgba(3, 12, 26, .7); }
.delivery-panel .kick { color: var(--gold-l); }
.delivery-panel h2 { font-size: clamp(1.9rem, 3.4vw, 2.8rem); }
.delivery-panel h2 em { color: var(--gold-l); }
.delivery-panel > p:not(.kick) { color: var(--on-navy); margin: 18px 0 0; }
.steps { list-style: none; margin: 26px 0 0; padding: 0; border-bottom: 1px solid var(--hair-navy); }
.steps li { display: flex; align-items: baseline; gap: 20px; padding: 13px 0; border-top: 1px solid var(--hair-navy); }
.steps b { min-width: 24px; font: 300 1.9rem/1 var(--display); color: var(--gold-l); font-variant-numeric: lining-nums; }
.where-t { margin: 24px 0 12px !important; font: 700 .66rem/1.5 var(--text); letter-spacing: .24em; text-transform: uppercase; color: var(--gold-l) !important; }
.where { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.where li { display: inline-flex; align-items: center; gap: 8px; padding: 7px 13px; border: 1px solid var(--hair-navy); font-size: .82rem; }
.where .ic { width: 16px; height: 16px; color: var(--gold-l); }
.delivery-free { margin: 20px 0 26px !important; font-size: .84rem; }

/* ---------------------------------------------------------------- the terrace: an arcade of their photographs */
.place { position: relative; padding: clamp(84px, 10vw, 150px) 0 clamp(70px, 8vw, 120px); overflow: hidden; }
.place .shead { padding-inline: var(--pad); }
.arcade { display: flex; align-items: flex-end; gap: clamp(30px, 3.2vw, 50px); margin-top: clamp(30px, 4vw, 54px); padding: 34px max(var(--pad), (100% - var(--max)) / 2) 30px; overflow-x: auto; scrollbar-width: none; cursor: grab; }
.arcade::-webkit-scrollbar { display: none; }
.arcade.is-drag { cursor: grabbing; scroll-behavior: auto; }
@media (hover: none) { .arcade { scroll-snap-type: x proximity; } .arcade .arch { scroll-snap-align: center; } }
.arcade .arch { flex: none; width: clamp(196px, 19.5vw, 262px); }
.arcade .arch-tall .arch-pic { aspect-ratio: 5 / 8.3; }
.arcade .arch-short .arch-pic { aspect-ratio: 5 / 6.3; }
.arcade .arch-pic img { transition: scale 1.6s var(--ease); }
@media (hover: hover) { .arcade .arch:hover .arch-pic img, .rv .arcade .arch.reveal.is-in:hover .arch-pic img { scale: 1.06; } }
/* under the arcade: previous, a hairline, the Instagram link, a hairline, next */
.arcade-nav { display: flex; align-items: center; justify-content: center; gap: clamp(14px, 2vw, 26px); margin: clamp(22px, 2.6vw, 38px) 0 0; padding-inline: var(--pad); }
.arcade-nav > i { flex: 0 1 clamp(30px, 9vw, 150px); height: 1px; background: linear-gradient(to left, var(--gold-line), rgba(176, 141, 79, 0)); }
.arcade-nav > i:last-of-type { background: linear-gradient(to right, var(--gold-line), rgba(176, 141, 79, 0)); }
[dir="rtl"] .arcade-nav > i { transform: scaleX(-1); }
.arc-btn { flex: none; width: 50px; height: 50px; display: grid; place-items: center; color: var(--navy); background: rgba(255, 253, 248, .55); box-shadow: inset 0 0 0 1px var(--gold);
  transition: background-color .45s var(--ease), color .45s var(--ease), opacity .45s var(--ease); }
.arc-btn .ic { width: 18px; height: 18px; transition: transform .45s var(--ease); }
.arc-btn:not([aria-disabled="true"]):hover { background: var(--gold); color: var(--white); }
.arc-btn[data-arcade-go="1"]:not([aria-disabled="true"]):hover .ic { transform: translateX(3px); }
.arc-btn[data-arcade-go="-1"]:not([aria-disabled="true"]):hover .ic { transform: scaleX(-1) translateX(3px); }
[dir="rtl"] .arc-btn[data-arcade-go="1"]:not([aria-disabled="true"]):hover .ic { transform: scaleX(-1) translateX(3px); }
[dir="rtl"] .arc-btn[data-arcade-go="-1"]:not([aria-disabled="true"]):hover .ic { transform: translateX(3px); }
.arc-btn[aria-disabled="true"] { opacity: .32; cursor: default; }
.arcade-nav.is-still .arc-btn { visibility: hidden; }
/* where a finger drags the row there is no need for buttons */
@media (max-width: 899px), (hover: none) and (pointer: coarse) { .arc-btn, .arcade-nav > i { display: none; } }

/* ---------------------------------------------------------------- reservation, on navy */
.reserve { padding: clamp(84px, 10vw, 150px) var(--pad); overflow: hidden; }
.reserve-in { position: relative; z-index: 2; width: min(var(--max), 100%); margin: 0 auto; display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: clamp(40px, 7vw, 110px); align-items: center; }
.reserve-text > p:not(.kick) { color: var(--on-navy); max-width: 44ch; margin: 22px 0 0; }
.ticks { list-style: none; margin: 28px 0 26px; padding: 0; display: grid; gap: 0; border-bottom: 1px solid var(--gold-line); }
.ticks li { display: flex; align-items: center; gap: 14px; padding: 13px 0; border-top: 1px solid var(--gold-line); }
.ticks .ic { width: 16px; height: 16px; color: var(--gold); }
.navy .ticks, .navy .ticks li { border-color: var(--hair-navy); }
.navy .ticks .ic { color: var(--gold-l); }
.palm-reserve { --r: -10deg; inset-inline-start: -160px; bottom: -120px; width: clamp(320px, 40vw, 600px); }

/* ---------------------------------------------------------------- forms */
.slip { --lift: 0 50px 80px -46px rgba(3, 12, 26, .75); position: relative; color: var(--navy); padding: clamp(30px, 3.6vw, 52px) clamp(22px, 3.4vw, 50px); }
.slip-head { display: grid; justify-items: center; margin-bottom: 28px; text-align: center; }
.slip-head h3 { font: 300 clamp(1.6rem, 2.6vw, 2.1rem)/1.1 var(--display); }
.slip-grid { display: grid; gap: 0 16px; }
.slip-grid-3 { grid-template-columns: 1.3fr 1fr 1fr; }
.slip { container-type: inline-size; }
@container (max-width: 500px) {       /* a narrow card: the date takes a row of its own */
  .slip-grid-3 { grid-template-columns: 1fr 1fr; }
  .slip-grid-3 > .field:first-child { grid-column: 1 / -1; }
}
.slip-grid-2 { grid-template-columns: 1fr 1fr; }
.field { display: grid; align-content: start; gap: 8px; min-width: 0; margin: 0 0 18px; }
.field > label, .field > .label { display: block; font-size: .64rem; letter-spacing: .2em; }
.field .opt { font-weight: 500; letter-spacing: .04em; text-transform: none; color: var(--muted); }
input, textarea, select { width: 100%; min-width: 0; min-height: 52px; padding: 0 16px; border: 1px solid var(--gold-line); border-radius: 0; background: var(--ivory); color: var(--navy); font: 400 1rem/1.4 var(--text);
  outline: none; -webkit-appearance: none; appearance: none; transition: border-color .3s, box-shadow .3s, background-color .3s; }
textarea { min-height: 88px; padding: 14px 16px; resize: vertical; }
input::placeholder, textarea::placeholder { color: #9aa3b0; }
input:hover, textarea:hover { border-color: var(--gold); }
input:focus, textarea:focus, select:focus { border-color: var(--navy); background: #fff; box-shadow: 0 0 0 3px rgba(11, 32, 59, .09); }
input[type="date"], input[type="time"] { font-variant-numeric: lining-nums tabular-nums; }
input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }
input[type="number"] { -moz-appearance: textfield; }
input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; }
.field.has-err input, .field.has-err textarea, .field.has-err .picks { border-color: var(--terra); box-shadow: 0 0 0 3px rgba(162, 71, 47, .1); }
.field.has-err .picks { outline: 1px solid var(--terra); outline-offset: 6px; box-shadow: none; }
.field-err { margin: 0; font-size: .8rem; line-height: 1.4; color: var(--terra); }
.field-err:empty { display: none; }
.stepper { display: grid; grid-template-columns: 46px minmax(0, 1fr) 46px; border: 1px solid var(--gold-line); background: var(--ivory); transition: border-color .3s; }
.stepper:hover { border-color: var(--gold); }
.stepper input { min-height: 50px; padding: 0; border: 0; background: none; text-align: center; font: 400 1.35rem/1 var(--display); font-variant-numeric: lining-nums; box-shadow: none; }
.stepper button { display: grid; place-items: center; color: var(--gold-t); transition: background-color .3s, color .3s; }
.stepper button:hover { background: var(--navy); color: var(--gold-l); }
.stepper .ic { width: 14px; height: 14px; }
.picks { display: flex; flex-wrap: wrap; gap: 10px; }
.pick { position: relative; display: block; }
.pick input { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; opacity: 0; cursor: pointer; }
.pick span { display: flex; align-items: center; min-height: 48px; padding: 0 20px; border: 1px solid var(--gold-line); background: var(--ivory); font-size: .93rem; transition: background-color .35s, color .35s, border-color .35s; }
.pick input:hover + span { border-color: var(--gold); }
.pick input:checked + span { background: var(--navy); border-color: var(--navy); color: var(--gold-l); box-shadow: inset 0 0 0 3px var(--navy), inset 0 0 0 4px rgba(216, 192, 138, .45); }
.pick input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: 3px; }
.picks-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.pick-tile span { flex-direction: column; align-items: flex-start; justify-content: center; gap: 8px; min-height: 96px; height: 100%; padding: 16px; }
.pick-tile .ic { width: 24px; height: 24px; color: var(--gold); }
.pick-tile input:checked + span .ic { color: var(--gold-l); }
.pick-tile b { font-weight: 600; }
.pick-tile small { font-size: .76rem; line-height: 1.35; opacity: .8; }
.slip.is-done > :not(.form-done) { display: none; }
.form-done { display: grid; justify-items: center; gap: 14px; padding: 26px 0 10px; text-align: center; }
.done-ic { width: 70px; height: 70px; display: grid; place-items: center; border-radius: 50%; color: var(--gold); box-shadow: 0 0 0 1px var(--gold), 0 0 0 7px var(--white), 0 0 0 8px var(--gold-line); }
.done-ic .ic { width: 28px; height: 28px; }
.form-done h3 { font: 300 clamp(1.6rem, 2.6vw, 2.1rem)/1.15 var(--display); margin-top: 8px; }
.form-done p { color: var(--soft); max-width: 40ch; margin: 0 0 6px; }
/* the bot check (Cloudflare Turnstile): takes room only when it asks the guest something */
.bot-check { display: flex; justify-content: center; margin: 0 0 14px; }
.bot-check:empty { display: none; }
.form-fail { margin-top: 20px; padding: 20px 22px; border: 1px solid var(--terra); background: rgba(162, 71, 47, .06); }
.form-fail p { margin: 0 0 14px; color: var(--terra); font-weight: 600; }
.fail-links { display: flex; flex-wrap: wrap; gap: 10px; }
.fail-links .btn { min-height: 46px; padding: 0 20px; }
.co-fail { margin-top: 16px; padding: 18px 18px 16px; }
.co-fail .fail-links .btn { flex: 1 1 100%; }

/* ---------------------------------------------------------------- find us */
.visit { position: relative; padding: clamp(84px, 10vw, 150px) var(--pad); overflow: hidden; }
.visit-in { position: relative; z-index: 1; width: min(var(--max), 100%); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.18fr) minmax(0, .82fr); gap: clamp(50px, 8vw, 120px); align-items: center; }
.visit-map { padding: 13px; }
.map { position: relative; aspect-ratio: 4 / 3.1; background: var(--sand); outline: 1px solid var(--gold); outline-offset: 12px; }
.map > img { width: 100%; height: 100%; object-fit: cover; }
.map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.map-over { position: absolute; inset: 0; display: grid; place-items: center; padding: 24px 24px 64px; text-align: center; color: #fff; background: linear-gradient(rgba(8, 26, 49, .08), rgba(8, 26, 49, .3)); }
.map-over small { position: absolute; inset: auto 0 0 0; padding: 12px 18px; font-size: .78rem; line-height: 1.5; background: rgba(8, 26, 49, .82); color: var(--on-navy); }
.visit-info address { margin-top: 26px; font: 300 clamp(1.25rem, 2vw, 1.5rem)/1.5 var(--display); }
.visit-phone { display: inline-block; margin: 16px 0 14px; font: 300 clamp(1.9rem, 3.2vw, 2.7rem)/1.1 var(--display); font-variant-numeric: lining-nums; text-decoration: none; color: var(--navy);
  background: linear-gradient(var(--gold), var(--gold)) 0 100% / 0 1px no-repeat; transition: background-size .6s var(--ease); }
.visit-phone:hover { background-size: 100% 1px; }
.hours-ask { display: flex; align-items: center; gap: 12px; margin: 0; color: var(--soft); font-size: .95rem; }
.hours-ask .ic { width: 18px; height: 18px; color: var(--gold); }
.hours { border-collapse: collapse; margin-top: 10px; font-size: .93rem; }
.hours th { text-align: start; font-weight: 500; padding: 5px 26px 5px 0; }
.hours tr.is-today { color: var(--gold-t); font-weight: 700; }
.visit-links { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.palm-visit { --m: -1; --r: 6deg; inset-inline-end: -150px; bottom: -110px; }

/* ---------------------------------------------------------------- footer */
.ftr { padding: clamp(64px, 8vw, 104px) var(--pad) 0; overflow: hidden; background: linear-gradient(180deg, var(--navy) 0%, var(--navy-d) 100%); color: var(--on-navy); }
.ftr-in { position: relative; z-index: 2; width: min(var(--max), 100%); margin: 0 auto; }
.ftr a { text-decoration: none; transition: color .3s; }
.ftr a:hover { color: var(--gold-l); }
.ftr-brand { display: flex; align-items: center; gap: clamp(18px, 3vw, 44px); }
.ftr-brand i { flex: 1; height: 1px; background: linear-gradient(to left, rgba(216, 192, 138, .7), rgba(216, 192, 138, 0)); }
.ftr-brand i:last-child { background: linear-gradient(to right, rgba(216, 192, 138, .7), rgba(216, 192, 138, 0)); }
[dir="rtl"] .ftr-brand i { transform: scaleX(-1); }
.ftr-brand img { height: clamp(84px, 9vw, 118px); width: auto; }
.ftr-tag { margin: 10px 0 0; text-align: center; font: italic 300 1.25rem/1.4 var(--display); color: var(--gold-l); }
.ftr-top { display: grid; grid-template-columns: 1fr 1.1fr 1fr; gap: clamp(30px, 5vw, 80px); margin-top: clamp(44px, 5vw, 70px); padding-top: clamp(34px, 4vw, 54px); border-top: 1px solid var(--hair-navy); }
.ftr h3 { margin: 0 0 20px; font: 700 .66rem/1.4 var(--text); letter-spacing: .26em; text-transform: uppercase; color: var(--gold-l); }
.ftr-col nav { display: grid; justify-items: start; gap: 10px; }
.ftr-col nav a, .ftr-col address { color: var(--ivory); }
.ftr-col address { font: 300 1.15rem/1.6 var(--display); }
.ftr-col p { margin: 10px 0 0; }
.ftr-col p a { font: 300 1.3rem/1.2 var(--display); color: var(--ivory); font-variant-numeric: lining-nums; }
.ftr-hours { font-size: .86rem; }
.social { display: flex; gap: 10px; }
.social a { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--hair-navy); color: var(--gold-l); transition: background-color .4s, color .4s, border-color .4s; }
.social a:hover { background: var(--gold-l); border-color: var(--gold-l); color: var(--navy); }
.ftr-cta { margin-top: 26px; }
.ftr-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 26px; margin-top: clamp(40px, 5vw, 64px); padding: 22px 0 26px; border-top: 1px solid var(--hair-navy); font-size: .8rem; }
.ftr-bottom p { margin: 0; }
.ftr-langs { display: flex; gap: 4px; }
.ftr-langs a { padding: 6px 9px; font: 700 .68rem/1 var(--text); letter-spacing: .14em; }
.ftr-langs a span { display: none; }
.ftr-langs a[aria-current="true"] { background: var(--gold-l); color: var(--navy); }
.palm-ftr { --m: -1; --r: 10deg; inset-inline-end: -150px; top: -60px; opacity: .2 !important; }

/* ---------------------------------------------------------------- the carte (menu and ordering) */
.mhead { position: relative; padding: calc(var(--top) + clamp(54px, 7vw, 104px)) var(--pad) clamp(40px, 5vw, 66px); text-align: center; overflow: hidden; }
.mhead-main { position: relative; z-index: 1; width: min(760px, 100%); margin: 0 auto; display: grid; justify-items: center; }
.mhead h1, .phead h1 { font: 300 clamp(2.9rem, 7.4vw, 5.6rem)/1.02 var(--display); letter-spacing: -.02em; }
.mhead h1 { display: flex; align-items: center; justify-content: center; gap: clamp(14px, 3vw, 40px); margin-top: 16px; }
.mhead h1 i { flex: none; width: clamp(26px, 7vw, 110px); height: 1px; background: linear-gradient(to left, var(--gold), rgba(176, 141, 79, 0)); }
.mhead h1 i:last-child { background: linear-gradient(to right, var(--gold), rgba(176, 141, 79, 0)); }
[dir="rtl"] .mhead h1 i { transform: scaleX(-1); }
.mhead .lead { max-width: 52ch; margin: 22px 0 0; }
.find { position: relative; display: flex; align-items: center; width: min(470px, 100%); margin-top: 30px; background: var(--white); box-shadow: 0 0 0 1px var(--gold), 0 0 0 5px rgba(255, 253, 248, .8), 0 0 0 6px var(--gold-line), 0 26px 40px -30px rgba(74, 52, 18, .5); }
.find .ic { position: absolute; inset-inline-start: 18px; width: 18px; height: 18px; color: var(--gold); pointer-events: none; }
.find input { min-height: 56px; padding-inline: 50px 18px; border: 0; background: none; }
.find input:focus { box-shadow: none; background: #fff; }
.mhead-note { margin: 20px 0 0; font-size: .8rem; color: var(--muted); }
.mhead-plate { position: absolute; z-index: 0; height: auto; filter: var(--plate-shadow); pointer-events: none; animation: settle 1.8s .2s var(--ease) both; }
@keyframes settle { from { opacity: 0; translate: 0 -30px; scale: 1.06; } }
.mp-1 { width: clamp(210px, 22vw, 330px); inset-inline-start: clamp(-110px, -5vw, -50px); top: calc(var(--top) + 15%); transform: rotate(calc(-12deg * var(--dirx))); }
.mp-2 { width: clamp(200px, 21vw, 310px); inset-inline-end: clamp(-100px, -4.6vw, -44px); bottom: 5%; transform: rotate(calc(16deg * var(--dirx))); }
.palm-mh-a { --r: -4deg; inset-inline-start: 5%; top: calc(var(--top) - 40px); opacity: .42; }
.palm-mh-b { --m: -1; --r: 6deg; inset-inline-end: 4%; bottom: -120px; opacity: .42; }

.book { display: grid; grid-template-columns: 216px minmax(0, 1fr) 330px; gap: clamp(22px, 2.8vw, 48px); align-items: start; width: min(1500px, 100%); margin: 0 auto; padding: 0 var(--pad) clamp(80px, 9vw, 130px); }
.book-index { position: sticky; top: calc(var(--top) + 22px); max-height: calc(100vh - var(--top) - 44px); overflow-y: auto; scrollbar-width: none; padding-block: 4px 20px; }
.book-index::-webkit-scrollbar { display: none; }
.bi-ch { display: flex; align-items: baseline; gap: 10px; margin: 24px 0 8px; font: 700 .6rem/1.45 var(--text); letter-spacing: .18em; text-transform: uppercase; color: var(--gold-t); }
.bi-ch:first-child { margin-top: 0; }
.bi-ch b { min-width: 20px; font: 400 .95rem/1 var(--display); letter-spacing: .04em; color: var(--gold); }
.book-index a { position: relative; display: block; padding: 5px 0; padding-inline-start: 30px; font-size: .93rem; line-height: 1.4; text-decoration: none; color: var(--soft); transition: color .3s, padding .45s var(--ease); }
.book-index a::before { content: ""; position: absolute; inset-inline-start: 0; top: 50%; width: 0; height: 1px; background: var(--gold); transition: width .45s var(--ease); }
.book-index a:hover { color: var(--navy); }
.book-index a.is-active { color: var(--navy); font-weight: 700; }
.book-index a.is-active::before { width: 20px; }
.book-list { position: relative; min-width: 0; padding: clamp(30px, 4.4vw, 68px) clamp(18px, 3.6vw, 62px) clamp(30px, 4vw, 56px); background: rgba(255, 253, 248, .93);
  box-shadow: inset 0 0 0 1px var(--gold), inset 0 0 0 7px rgba(255, 253, 248, .93), inset 0 0 0 8px var(--gold-line), 0 60px 90px -70px rgba(74, 52, 18, .6); }
.chap-title { display: grid; justify-items: center; gap: 10px; margin: clamp(60px, 7vw, 90px) 0 6px; text-align: center; font: 300 clamp(1.9rem, 3.5vw, 2.9rem)/1.12 var(--display); text-wrap: balance; }
.chap:first-of-type .chap-title { margin-top: 0; }
.chap-title b { font: 400 1.05rem/1 var(--display); letter-spacing: .22em; color: var(--gold); margin-inline-end: -.22em; }
.chap-title .orn { margin-top: 6px; }
.sect { padding: 34px 0 4px; scroll-margin-top: calc(var(--top) + 22px); }
.sect-head { display: flex; align-items: baseline; gap: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--gold); }
.sect-head h3 { font: italic 400 clamp(1.4rem, 2.2vw, 1.7rem)/1.1 var(--display); }
.sect-portion { margin-inline-start: auto; font: 700 .62rem/1 var(--text); letter-spacing: .2em; text-transform: uppercase; color: var(--gold-t); white-space: nowrap; }
.row { position: relative; display: flex; align-items: center; gap: 18px; padding: 13px 0; border-bottom: 1px solid var(--gold-hair); transition: background-color .4s; }
.row-hit { position: absolute; inset: 0 -10px; z-index: 1; }
.row-pic { flex: none; width: 58px; height: 58px; border-radius: 50%; overflow: hidden; background: var(--ivory); box-shadow: 0 0 0 1px var(--gold), 0 0 0 4px var(--white), 0 0 0 5px var(--gold-line); margin: 5px; transition: transform .7s var(--ease); }
.row-pic img { width: 100%; height: 100%; object-fit: cover; object-position: 40% 50%; transform: scale(1.34); }
.row-pic.is-blank { box-shadow: none; background: none; }
.rows:not(:has(.has-pic)) .row-pic { display: none; }
.row-text { flex: 1; min-width: 0; }
.row-main { display: flex; align-items: baseline; gap: 12px; }
.row-name { display: flex; align-items: center; font: 400 1.24rem/1.2 var(--display); letter-spacing: -.005em; transition: color .35s; }
.row-dots { flex: 1; min-width: 18px; height: 0; border-bottom: 2px dotted var(--gold); opacity: .55; transform: translateY(-4px); }
.row-price { font: 400 1.14rem/1 var(--display); font-variant-numeric: lining-nums tabular-nums; white-space: nowrap; }
.row-price-2 { display: flex; gap: 18px; }
.row-price-2 > span { display: grid; justify-items: end; gap: 5px; }
.row-price-2 small { font: 700 .54rem/1 var(--text); letter-spacing: .16em; text-transform: uppercase; color: var(--gold-t); }
.row-desc { margin: 4px 0 0; max-width: 62ch; font-size: .86rem; line-height: 1.5; color: var(--soft); }
.row-portion { display: block; margin-top: 5px; font: 700 .6rem/1 var(--text); letter-spacing: .2em; text-transform: uppercase; color: var(--gold-t); }
.row-add { flex: none; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--gold-line); color: var(--gold-t); transition: background-color .35s, color .35s, border-color .35s, transform .5s var(--ease); }
.row-add .ic { width: 14px; height: 14px; }
.row-soon { font: 700 .6rem/1 var(--text); letter-spacing: .2em; text-transform: uppercase; color: var(--gold-t); white-space: nowrap; }
.row.is-soon { opacity: .55; }
.veg { display: inline-grid; place-items: center; width: 18px; height: 18px; margin-inline-start: 9px; border-radius: 50%; border: 1px solid var(--glass); color: #4f7f8b; font: 700 .56rem/1 var(--text); letter-spacing: 0; }
@media (hover: hover) {
  .row:not(.is-soon):hover .row-name { color: var(--gold-t); }
  .row:not(.is-soon):hover .row-add { background: var(--navy); border-color: var(--navy); color: var(--gold-l); transform: rotate(90deg); }
  .row:not(.is-soon):hover .row-pic { transform: scale(1.1) rotate(4deg); }
}
.row-hit:focus-visible { outline-offset: -2px; }
.allergen-note { margin: 54px 0 0; padding-top: 22px; border-top: 1px solid var(--gold); font-size: .86rem; color: var(--soft); max-width: 70ch; }
.no-results { padding: 20px 0 30px; text-align: center; font: italic 300 1.5rem/1.3 var(--display); color: var(--soft); }
.book-side { position: sticky; top: calc(var(--top) + 22px); min-width: 0; }
.book-side-in { display: flex; flex-direction: column; gap: 26px; max-height: calc(100vh - var(--top) - 44px); padding: 14px 14px 6px; overflow-y: auto; scrollbar-width: none; }
.book-side-in::-webkit-scrollbar { display: none; }
.peek { margin: 0; flex: none; }
.peek-frame { position: relative; }
.peek-pic { aspect-ratio: 4 / 4.9; overflow: hidden; border-radius: 999px 999px 0 0; background: var(--sand); }
.peek-pic img { width: 100%; height: 100%; object-fit: cover; object-position: 40% 50%; transform: scale(1.1); transition: opacity .35s ease, transform 1.2s var(--ease); }
.peek-pic img.is-swap { opacity: 0; transform: scale(1.18); }
.peek figcaption { display: grid; justify-items: center; gap: 6px; margin-top: 30px; text-align: center; }
.peek figcaption b { font: italic 400 1.4rem/1.15 var(--display); }
.peek figcaption span { font: 700 .58rem/1.5 var(--text); letter-spacing: .2em; text-transform: uppercase; color: var(--gold-t); }
.book-order .peek { width: 78%; margin-inline: auto; }
.book-order .peek-pic { aspect-ratio: 4 / 3.5; }
.book-order .peek figcaption { margin-top: 22px; }
.book-order .peek figcaption b { font-size: 1.2rem; }
.book-order .book-side-in:has(.bk-line) .peek { display: none; }       /* once something is in the basket, the basket has the column */
.book-order .peek figcaption span { display: none; }
.slipbox { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 300px; overflow: hidden; padding: 26px 24px 26px; }

/* ---------------------------------------------------------------- the basket (side card and drawer) */
.bk-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--gold); }
.bk-head h2 { font: 400 1.55rem/1 var(--display); }
.bk-count { min-width: 26px; height: 26px; padding: 0 6px; border-radius: 13px; background: var(--navy); color: var(--gold-l); font: 700 .7rem/26px var(--text); text-align: center; }
.bk-lines { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: thin; }
.bk-line { display: grid; grid-template-columns: 50px minmax(0, 1fr) auto; gap: 14px; align-items: start; padding: 14px 0; border-bottom: 1px solid var(--gold-hair); }
.bk-thumb { width: 46px; height: 46px; margin: 2px; border-radius: 50%; overflow: hidden; background: var(--ivory); box-shadow: 0 0 0 1px var(--gold), 0 0 0 3px var(--white); }
.bk-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: 40% 50%; transform: scale(1.34); }
.bk-thumb.is-blank { background: var(--ivory) url("/assets/img/logo/roll.png") center / 56% no-repeat; }
.bk-name { text-align: start; font: 400 1.12rem/1.2 var(--display); transition: color .3s; }
.bk-name:hover { color: var(--gold-t); }
.bk-mods { margin: 4px 0 0; font-size: .77rem; line-height: 1.4; color: var(--muted); }
.bk-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; }
.bk-price { font: 400 1.02rem/1 var(--display); font-variant-numeric: lining-nums tabular-nums; }
.bk-del { width: 30px; height: 30px; display: grid; place-items: center; color: var(--muted); transition: color .3s; }
.bk-del:hover { color: var(--terra); }
.bk-del .ic { width: 16px; height: 16px; }
.qty { display: inline-flex; align-items: center; border: 1px solid var(--gold-line); background: var(--white); }
.qty button { width: 30px; height: 30px; display: grid; place-items: center; color: var(--gold-t); transition: background-color .3s, color .3s; }
.qty button:hover { background: var(--navy); color: var(--gold-l); }
.qty button .ic { width: 12px; height: 12px; }
.qty output { min-width: 26px; text-align: center; font: 400 1rem/1 var(--display); font-variant-numeric: lining-nums; }
.qty-lg { border-color: var(--gold); }
.qty-lg button { width: 46px; height: 52px; }
.qty-lg output { min-width: 34px; font-size: 1.4rem; }
.bk-totals { padding-top: 14px; }
.bk-totals div { display: flex; justify-content: space-between; gap: 12px; padding: 3px 0; font-size: .86rem; color: var(--soft); }
.bk-totals .grand { margin-top: 10px; padding-top: 14px; border-top: 1px solid var(--gold); color: var(--navy); font: 400 1.55rem/1 var(--display); font-variant-numeric: lining-nums; }
.bk-cta { margin-top: 18px; }
.bk-empty { margin: auto 0; padding: 28px 0; text-align: center; font-size: .9rem; color: var(--soft); }
.bk-empty img { width: 46px; margin: 0 auto 16px; }
.bk-empty b { display: block; margin-bottom: 4px; font: italic 400 1.35rem/1.2 var(--display); color: var(--navy); }
.basket-bar { position: fixed; z-index: 56; inset-inline: 12px; bottom: calc(var(--dock) + env(safe-area-inset-bottom, 0px) + 10px); display: none; }
.basket-bar button { width: 100%; height: 54px; display: flex; align-items: center; gap: 14px; padding: 0 20px 0 12px; background: var(--navy); color: var(--gold-l); font: 700 .68rem/1 var(--text); letter-spacing: .2em; text-transform: uppercase;
  box-shadow: inset 0 0 0 4px var(--navy), inset 0 0 0 5px rgba(216, 192, 138, .5), 0 20px 40px -18px rgba(8, 26, 49, .7); }
[dir="rtl"] .basket-bar button { padding: 0 12px 0 20px; }
.basket-bar .n { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: var(--gold-l); color: var(--navy); letter-spacing: 0; font-size: .76rem; }
.basket-bar .sum { margin-inline-start: auto; font: 400 1.1rem/1 var(--display); letter-spacing: 0; color: #fff; font-variant-numeric: lining-nums; }
@keyframes up { from { transform: translateY(100%); } }

/* ---------------------------------------------------------------- overlays: the dish and the basket */
.ov-back { position: fixed; inset: 0; z-index: 100; background: rgba(8, 26, 49, .66); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); animation: fade .35s ease; }
@keyframes fade { from { opacity: 0; } }
.sheet, .drawer { position: fixed; z-index: 101; top: 0; bottom: 0; inset-inline-end: 0; width: min(540px, 100vw); display: flex; flex-direction: column; overflow: hidden;
  background: var(--ivory) var(--marble) center / 1100px auto; border-inline-start: 1px solid var(--gold); box-shadow: 0 0 90px rgba(8, 26, 49, .5); animation: side .6s var(--ease); }
@keyframes side { from { transform: translateX(100%); } }
[dir="rtl"] :is(.sheet, .drawer) { animation-name: side-r; }
@keyframes side-r { from { transform: translateX(-100%); } }
.sheet-x { position: absolute; z-index: 3; top: 16px; inset-inline-end: 16px; width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; background: var(--white); color: var(--navy); border: 1px solid var(--gold);
  box-shadow: 0 0 0 5px rgba(255, 253, 248, .72), 0 10px 22px -8px rgba(8, 26, 49, .5); transition: background-color .3s, color .3s, transform .5s var(--ease); }
.sheet-x:hover { background: var(--navy); color: var(--gold-l); transform: rotate(90deg); }
.sheet-media { position: relative; flex: none; aspect-ratio: 4 / 3; max-height: 44vh; overflow: hidden; background: var(--sand); }
.sheet-media img { width: 100%; height: 100%; object-fit: cover; animation: media-in 1.6s var(--ease) both; }
@keyframes media-in { from { scale: 1.1; opacity: .4; } }
.sheet-media::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 -1px 0 var(--gold); pointer-events: none; }
.sheet-main { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.sheet-scroll { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 30px 34px 22px; scrollbar-width: thin; }
.sheet.no-media .sheet-scroll { padding-top: 84px; }
.sheet.no-media::before, .drawer::before { content: ""; position: absolute; z-index: 0; top: -70px; inset-inline-end: -110px; width: 380px; aspect-ratio: 1; background: url("/assets/img/look/palm.webp") center / contain no-repeat; opacity: .4; pointer-events: none; transform: scaleX(calc(-1 * var(--dirx))) rotate(8deg); }
.drawer::before { top: auto; bottom: 120px; opacity: .3; }
.sheet-main, .drawer .basket-panel { position: relative; z-index: 1; }
.sheet-tags:empty { display: none; }
.tag { display: inline-block; margin-bottom: 16px; padding: 6px 10px; border: 1px solid var(--gold); font: 700 .58rem/1 var(--text); letter-spacing: .22em; text-transform: uppercase; color: var(--gold-t); }
.sheet h2 { font: 300 clamp(2rem, 4vw, 2.7rem)/1.05 var(--display); }
.sheet-portion { margin: 12px 0 0; font: 700 .64rem/1 var(--text); letter-spacing: .22em; text-transform: uppercase; color: var(--gold-t); }
.sheet-desc { margin: 16px 0 0; color: var(--soft); }
.sheet-desc:empty, .sheet-meta:empty { display: none; }
.sheet-meta { margin-top: 12px; font-size: .84rem; }
.diet-l { display: inline-flex; align-items: center; gap: 8px; }
.diet { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--glass); color: #4f7f8b; font: 700 .58rem/1 var(--text); }
.grp { min-width: 0; margin: 28px 0 0; padding: 0; border: 0; }
.grp legend { display: flex; width: 100%; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; padding: 0 0 10px; border-bottom: 1px solid var(--gold-line); font: italic 400 1.3rem/1.1 var(--display); }
.grp legend small { padding: 4px 7px; font: 700 .56rem/1 var(--text); letter-spacing: .18em; text-transform: uppercase; font-style: normal; color: var(--muted); }
.grp legend small.req { color: var(--gold-t); }
.grp.is-short legend small { background: var(--terra); color: #fff; }
.opts { display: flex; flex-wrap: wrap; gap: 8px; }
.opt { position: relative; }
.opt input { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; opacity: 0; cursor: pointer; }
.opt span { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border: 1px solid var(--gold-line); background: var(--white); font-size: .93rem; transition: background-color .3s, color .3s, border-color .3s; }
.opt span em { font-style: normal; font-size: .8rem; color: var(--gold-t); }
.opt input:hover + span { border-color: var(--gold); }
.opt input:checked + span { background: var(--navy); border-color: var(--navy); color: var(--gold-l); }
.opt input:checked + span em { color: #fff; }
.opt input:disabled + span { opacity: .35; }
.opt input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: 2px; }
.sheet-note { margin: 28px 0 0; display: grid; gap: 8px; }
.sheet-note label { font: 700 .62rem/1.3 var(--text); letter-spacing: .22em; text-transform: uppercase; color: var(--gold-t); }
.sheet-note textarea { background: var(--white); }
.sheet-share { display: inline-flex; align-items: center; gap: 8px; margin: 22px 0 4px; padding-bottom: 5px; border-bottom: 1px solid var(--gold-line); font: 700 .62rem/1 var(--text); letter-spacing: .2em; text-transform: uppercase; color: var(--soft); transition: color .3s; }
.sheet-share:hover { color: var(--gold-t); }
.sheet-share .ic { width: 14px; height: 14px; }
.sheet-foot { flex: none; display: flex; gap: 12px; padding: 16px 34px calc(16px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--gold); background: var(--white); }
.sheet-foot .btn { flex: 1; justify-content: space-between; min-width: 0; padding: 0 22px; letter-spacing: .16em; }
.sheet-foot .btn span:last-child { font: 400 1.15rem/1 var(--display); letter-spacing: 0; color: #fff; font-variant-numeric: lining-nums; text-transform: none; }
.drawer { width: min(450px, 100vw); padding: 28px 28px calc(24px + env(safe-area-inset-bottom, 0px)); }
.drawer .basket-panel { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.drawer .bk-head { padding-inline-end: 60px; min-height: 46px; align-items: center; }
.toast { position: fixed; z-index: 130; inset-inline-start: 50%; bottom: calc(var(--dock) + 90px); transform: translateX(calc(-50% * var(--dirx))); display: flex; align-items: center; gap: 12px; padding: 14px 22px; background: var(--navy); color: var(--ivory); font-size: .88rem; white-space: nowrap;
  box-shadow: inset 0 0 0 1px rgba(216, 192, 138, .6), 0 24px 44px -20px rgba(8, 26, 49, .7); animation: toast 2.5s ease forwards; }
.toast .ic { width: 18px; height: 18px; color: var(--gold-l); }
@keyframes toast { 0% { opacity: 0; margin-bottom: -14px; } 12%, 82% { opacity: 1; margin-bottom: 0; } 100% { opacity: 0; } }

/* ---------------------------------------------------------------- checkout */
.co, .st, .pp, .nf { position: relative; min-height: 86vh; padding: calc(var(--top) + clamp(34px, 5vw, 72px)) var(--pad) clamp(84px, 9vw, 130px); overflow: hidden; overflow: clip; }
.co-in, .st-in, .pp-in, .nf-in { position: relative; z-index: 1; width: min(var(--max), 100%); margin: 0 auto; }
.palm-co { --m: -1; --r: 4deg; inset-inline-end: -130px; top: calc(var(--top) - 30px); opacity: .42; }
.phead { display: grid; justify-items: center; margin: 0 auto clamp(34px, 4.4vw, 60px); max-width: 760px; text-align: center; }
.phead h1 { margin-top: 14px; font-size: clamp(2.6rem, 6vw, 4.6rem); }
.phead .lead { margin: 22px 0 0; max-width: 56ch; }
.co-back { margin: 0 0 26px; }
.co-form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 420px); gap: clamp(24px, 3.6vw, 54px); align-items: start; }
.co-main { --lift: 0 60px 90px -70px rgba(74, 52, 18, .6); padding: clamp(28px, 3.6vw, 54px) clamp(22px, 3.4vw, 54px); }
.co-step { min-width: 0; margin: 0 0 34px; padding: 0 0 20px; border: 0; border-bottom: 1px solid var(--gold-line); }
.co-step:last-child { margin: 0; padding: 0; border: 0; }
.co-step legend { display: flex; align-items: baseline; gap: 18px; width: 100%; padding: 0 0 20px; font: 400 clamp(1.4rem, 2.3vw, 1.85rem)/1.15 var(--display); }
.co-step legend b { min-width: 26px; font: 300 2.1rem/1 var(--display); color: var(--gold); font-variant-numeric: lining-nums; }
.co-step .picks { margin: 0 0 18px; }
.co-step .field .picks { margin: 0; }
.pickup-note { margin: -4px 0 14px; color: var(--soft); font-size: .93rem; }
.field-time { max-width: 220px; }
.pay-line { display: flex; align-items: center; gap: 18px; margin: 0 0 14px; padding: 18px 20px; border: 1px solid var(--gold-line); background: var(--ivory); }
.pay-line .ic { width: 28px; height: 28px; color: var(--gold); }
.pay-line span { display: grid; gap: 2px; }
.pay-line b { font-weight: 600; }
.pay-line small { font-size: .85rem; color: var(--soft); }
.co-side { position: sticky; top: calc(var(--top) + 24px); min-width: 0; }
.receipt { --lift: 0 60px 90px -70px rgba(74, 52, 18, .6); padding: 38px 32px 34px; }
.receipt h2 { text-align: center; font: 300 1.7rem/1.1 var(--display); }
.receipt .orn { margin-bottom: 14px; }
.sum-line { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--gold-hair); font-size: .93rem; }
.sum-line .q { font-weight: 700; color: var(--gold-t); font-variant-numeric: tabular-nums; }
.sum-line b { font-weight: 600; }
.sum-line small { display: block; margin-top: 3px; font-size: .78rem; line-height: 1.4; color: var(--muted); }
.sum-line .p { font-variant-numeric: tabular-nums; }
.totals { margin: 16px 0 0; }
.totals div { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; font-size: .9rem; color: var(--soft); }
.totals dd { margin: 0; font-variant-numeric: tabular-nums; }
.totals .grand { margin-top: 12px; padding-top: 16px; border-top: 1px solid var(--gold); color: var(--navy); font: 400 1.75rem/1 var(--display); font-variant-numeric: lining-nums; }
.sum-note { margin: 16px 0 20px; font-size: .78rem; color: var(--muted); }
.totals .grand dd { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: baseline; gap: 2px 10px; text-align: end; }
.totals .approx { font: 400 .92rem/1.3 var(--text); color: var(--soft); white-space: nowrap; font-variant-numeric: tabular-nums; }
.cur-note { display: grid; gap: 4px; margin: 16px 0 0; padding: 12px 0 0 0; border-top: 1px solid var(--gold-hair); font-size: .82rem; line-height: 1.5; color: var(--soft); }
.cur-note small { font-size: .74rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.cur-note + .sum-note { margin-top: 10px; }
.agree { margin: 16px 0 0; text-align: center; font-size: .76rem; color: var(--muted); }
.co-empty, .st-missing { display: grid; justify-items: center; gap: 20px; max-width: 620px; margin: 0 auto; padding: clamp(40px, 6vw, 70px) 26px; text-align: center; }
.co-empty p, .st-missing p { margin: 0; font: italic 300 1.5rem/1.3 var(--display); }
.st-missing:not(:has(p:not([hidden]))) { display: none; }
.ring-s, .ring-l { position: relative; display: grid; place-items: center; width: 150px; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 50% 38%, #fff, var(--ivory) 78%); box-shadow: 0 0 0 1px var(--gold), 0 0 0 8px var(--white), 0 0 0 9px var(--gold-line); }
.ring-s img, .ring-l img { width: auto; height: auto; max-width: 96%; max-height: 96%; filter: var(--plate-shadow); animation: settle 1.6s .15s var(--ease) both; }
.ring-l { width: clamp(210px, 26vw, 300px); box-shadow: 0 0 0 1px var(--gold), 0 0 0 11px rgba(255, 253, 248, .85), 0 0 0 12px var(--gold-line), 0 40px 60px -40px rgba(74, 52, 18, .6); }

/* ---------------------------------------------------------------- order tracking */
.st-in { width: min(1080px, 100%); display: grid; gap: 30px; }
[data-status-body] { display: grid; gap: 30px; }
.st-hero { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px; padding-bottom: 26px; border-bottom: 1px solid var(--gold); }
.st-hero h1 { font: 300 clamp(2.4rem, 6vw, 4.4rem)/1.02 var(--display); letter-spacing: -.02em; }
.st-hero p { margin: 14px 0 0; color: var(--soft); }
.st-hero p:empty { display: none; }
.st-num { text-align: end; }
.st-num small { display: block; margin-bottom: 8px; font: 700 .62rem/1 var(--text); letter-spacing: .22em; text-transform: uppercase; color: var(--gold-t); }
.st-num b { font: 400 1.45rem/1 var(--display); letter-spacing: .06em; font-variant-numeric: lining-nums; }
.st-anim { display: grid; grid-template-columns: minmax(0, 250px) minmax(0, 1fr); align-items: center; gap: clamp(18px, 4vw, 54px); padding: 26px clamp(22px, 4vw, 50px); background: var(--white);
  box-shadow: inset 0 0 0 1px var(--gold), inset 0 0 0 6px var(--white), inset 0 0 0 7px var(--gold-line); }
.st-anim svg { width: 100%; height: auto; overflow: visible; }
.st-anim-text { display: grid; justify-items: start; gap: 6px; }
.st-anim-text b { font: italic 300 clamp(1.5rem, 3vw, 2.3rem)/1.12 var(--display); }
.st-anim-text > span { color: var(--soft); }
.an-clock { display: inline-flex !important; align-items: center; gap: 8px; margin-top: 12px; padding: 8px 14px; border: 1px solid var(--gold-line); font-size: .8rem; color: var(--navy) !important; white-space: nowrap; }
.an-clock svg { width: 15px; height: 15px; color: var(--gold); }
.st-track { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
.st-step { position: relative; display: grid; justify-items: center; align-content: start; gap: 14px; padding: 0 6px; text-align: center; font: 700 .62rem/1.4 var(--text); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.st-step::before { content: ""; position: absolute; top: 18px; inset-inline-start: -50%; width: 100%; height: 1px; background: var(--gold-line); }
.st-step:first-child::before { display: none; }
.st-step.is-done::before, .st-step.is-now::before { height: 2px; top: 17px; background: var(--gold); }
.st-dot { position: relative; z-index: 1; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; background: var(--white); border: 1px solid var(--gold-line); color: rgba(176, 141, 79, .5); }
.st-dot .ic { width: 15px; height: 15px; }
.st-step.is-done { color: var(--navy); }
.st-step.is-done .st-dot { background: var(--navy); border-color: var(--navy); color: var(--gold-l); }
.st-step.is-now { color: var(--navy); }
.st-step.is-now .st-dot { border-color: var(--gold); color: var(--gold-t); box-shadow: 0 0 0 5px rgba(176, 141, 79, .2); animation: now 2.4s ease-in-out infinite; }
@keyframes now { 50% { box-shadow: 0 0 0 9px rgba(176, 141, 79, .08); } }
.st-live { margin: 0; text-align: center; font-size: .84rem; color: var(--soft); }
.st-cancel { margin: 0; padding: 18px 20px; border: 1px solid var(--terra); background: rgba(162, 71, 47, .06); color: var(--terra); }
.st-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 30px; align-items: start; }
.st-info { display: grid; gap: 30px; }
.st .card { padding: 32px 30px 28px; background: var(--white); box-shadow: inset 0 0 0 1px var(--gold), inset 0 0 0 6px var(--white), inset 0 0 0 7px var(--gold-line); }
.st .card h2 { margin-bottom: 10px; font: 400 1.55rem/1.1 var(--display); }
.st-kv { margin: 0; }
.st-kv > div { display: flex; align-items: flex-start; gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--gold-hair); }
.st-kv > div:last-child { border-bottom: 0; }
.st-kv .ic { width: 20px; height: 20px; margin-top: 2px; color: var(--gold); }
.st-kv dt { margin-bottom: 5px; font: 700 .6rem/1 var(--text); letter-spacing: .22em; text-transform: uppercase; color: var(--gold-t); }
.st-kv dd { margin: 0; }
.st-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.st-actions .btn { min-height: 46px; padding: 0 18px; letter-spacing: .16em; }
.st-wa { display: grid; gap: 14px; padding: 26px; background: var(--white); box-shadow: inset 0 0 0 1px var(--gold); }
.st-wa p { margin: 0; }
.st-find { display: grid; justify-items: center; gap: 6px; width: min(720px, 100%); margin: 0 auto; padding: clamp(34px, 5vw, 62px) clamp(22px, 4vw, 56px); text-align: center; --lift: 0 60px 90px -70px rgba(74, 52, 18, .6); }
.st-find h2 { margin-top: 10px; font: 300 clamp(2rem, 4.4vw, 3.2rem)/1.05 var(--display); }
.st-find > p:not(.kick) { margin: 18px 0 8px; max-width: 44ch; color: var(--soft); }
.st-find-row { display: flex; width: 100%; max-width: 520px; margin: 10px 0 20px; }
.st-find-row input { flex: 1; min-width: 0; min-height: 54px; border-inline-end: 0; text-transform: uppercase; letter-spacing: .08em; }
.st-find-row .btn { min-height: 54px; padding: 0 24px; }
.demo-note { margin: 12px 0 0; font-size: .8rem; color: var(--muted); }
/* the small moving pictures of the tracking page */
.an-ticket { animation: an-drop 1s var(--ease) both; }
@keyframes an-drop { from { transform: translateY(-40px); opacity: 0; } }
.an-bell { transform-origin: 250px 50px; animation: an-bell 2.4s ease-in-out infinite; }
@keyframes an-bell { 0%, 60%, 100% { transform: rotate(0); } 10%, 30%, 50% { transform: rotate(9deg); } 20%, 40% { transform: rotate(-9deg); } }
.an-ring { animation: an-ring 2.4s ease-in-out infinite; }
@keyframes an-ring { 0%, 60%, 100% { opacity: 0; } 20%, 40% { opacity: 1; } }
.an-piece { transform-box: fill-box; transform-origin: 50% 100%; animation: an-piece 4.6s ease-in-out infinite both; }
.an-piece-2 { animation-delay: .6s; } .an-piece-3 { animation-delay: 1.2s; }
@keyframes an-piece { 0% { opacity: 0; transform: translateY(-16px) scale(.9); } 14%, 78% { opacity: 1; transform: none; } 92%, 100% { opacity: 0; transform: scale(.97); } }
.an-sticks { transform-box: fill-box; transform-origin: 100% 0; animation: an-sticks 2.6s ease-in-out infinite; }
@keyframes an-sticks { 50% { transform: rotate(-5deg) translateY(4px); } }
.an-bag { transform-origin: 160px 170px; animation: an-bag 2.8s ease-in-out infinite; }
@keyframes an-bag { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(-3deg); } 60% { transform: rotate(3deg); } }
.an-spark { animation: an-spark 1.8s ease-in-out infinite; transform-origin: center; }
@keyframes an-spark { 50% { opacity: .2; } }
.an-scooter { animation: an-ride .7s ease-in-out infinite alternate; }
@keyframes an-ride { to { transform: translateY(-2px); } }
.an-dash { animation: an-dash .8s linear infinite; }
@keyframes an-dash { to { transform: translateX(-70px); } }
.an-wind path { animation: an-wind 1.3s ease-in-out infinite; }
@keyframes an-wind { 0% { opacity: 0; transform: translateX(16px); } 50% { opacity: .6; } 100% { opacity: 0; transform: translateX(-16px); } }
.an-tick { stroke-dasharray: 80; stroke-dashoffset: 80; animation: an-tick .9s .3s ease forwards; }
@keyframes an-tick { to { stroke-dashoffset: 0; } }
.an-confetti > * { transform-box: fill-box; transform-origin: center; animation: an-confetti 2.2s ease-in-out infinite alternate; }
@keyframes an-confetti { to { transform: translateY(-6px) rotate(30deg); } }

/* ---------------------------------------------------------------- booking page */
.rpage { position: relative; padding: calc(var(--top) + clamp(40px, 5.6vw, 84px)) var(--pad) clamp(84px, 9vw, 140px); overflow: hidden; overflow: clip; }
.rpage-in { position: relative; z-index: 1; width: min(var(--max), 100%); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 430px) minmax(0, 1fr); gap: clamp(50px, 8vw, 120px); align-items: start; }
.rpage-side { position: sticky; top: calc(var(--top) + 40px); }
.rpage-art { position: relative; padding: 13px; margin-bottom: 9%; }
.rpage-art .arch-pic { aspect-ratio: 4 / 5.6; }
.rpage-art .round { width: 44%; inset-inline-end: -13%; bottom: -8%; }
.rpage-art .round img { object-position: 50% 62%; transform: scale(1.25); }
.rpage-main h1 { margin-top: 16px; font: 300 clamp(2.5rem, 5.2vw, 4.3rem)/1.04 var(--display); letter-spacing: -.02em; text-wrap: balance; }
.rpage-main .lead { margin: 24px 0 20px; max-width: 54ch; }
.rpage-main .sunline { margin-bottom: 6px; }
.rpage-main .slip { --lift: 0 60px 90px -70px rgba(74, 52, 18, .6); margin-top: 26px; }
.rpage-main .ticks { margin-top: 34px; }
.palm-rp { --m: -1; --r: 4deg; inset-inline-end: -140px; top: calc(var(--top) - 50px); opacity: .42; }

/* ---------------------------------------------------------------- find-us page top: the marina by day, the title on a card over its lower edge */
.vhead { position: relative; height: clamp(360px, 58vh, 640px); margin-top: var(--top); overflow: hidden; background: var(--navy); }
.vhead-pic { position: absolute; inset: 0; }
.vhead-pic img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 58%; animation: hero-zoom 22s var(--ease) both; }
.vhead-card { --lift: 0 50px 80px -50px rgba(8, 26, 49, .55); position: relative; z-index: 2; display: grid; justify-items: center; width: min(860px, 100% - 2 * var(--pad)); margin: clamp(-150px, -12vw, -90px) auto 0; padding: clamp(34px, 4.6vw, 62px) clamp(22px, 5vw, 70px); text-align: center; animation: rise 1.3s .2s var(--ease) both; }
.vhead-card h1 { margin-top: 14px; font: 300 clamp(2.2rem, 5vw, 4.1rem)/1.05 var(--display); letter-spacing: -.02em; text-wrap: balance; }
.vhead-card .lead { margin: 20px 0 0; }
.vhead + .vhead-card + .visit { padding-top: clamp(60px, 7vw, 100px); }
.place-only { padding-top: clamp(30px, 4vw, 60px); }
/* plates at the edges of quiet pages */
.deco-plate { position: absolute; z-index: 0; height: auto; filter: var(--plate-shadow); pointer-events: none; animation: settle 1.8s .2s var(--ease) both; }
.dp-1 { width: clamp(220px, 24vw, 360px); inset-inline-start: clamp(-120px, -6vw, -60px); top: 42%; transform: rotate(calc(-10deg * var(--dirx))); }
.dp-2 { width: clamp(130px, 13vw, 190px); inset-inline-end: clamp(-60px, -2.4vw, -20px); top: 56%; transform: rotate(calc(24deg * var(--dirx))); }
.st:has([data-status-body]:not([hidden])) .deco-plate { display: none; }

/* ---------------------------------------------------------------- privacy, page not found */
.pp-in { width: min(860px, 100%); }
.prose { --lift: 0 60px 90px -70px rgba(74, 52, 18, .6); padding: clamp(30px, 5vw, 64px) clamp(24px, 5vw, 70px); }
.prose h2 { margin: 1.7em 0 .5em; font: italic 400 1.6rem/1.15 var(--display); }
.prose h2:first-child { margin-top: 0; }
.prose p { color: var(--soft); }
.prose-btn { margin: 30px 0 0; }
.nf { display: grid; align-items: center; }
.nf-in { display: grid; justify-items: center; text-align: center; }
.nf .kick { margin-top: 40px; font-size: .8rem; }
.nf h1 { margin-top: 12px; font: 300 clamp(2.6rem, 6.4vw, 5rem)/1.04 var(--display); }
.nf .lead { margin: 22px 0 30px; max-width: 44ch; }
.nf-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }

/* Online ordering paused (data/site.json orders.open false): the coming-soon panel on the delivery and checkout pages
   (the 404 layout), a slim note on the carte, and the dish sheet without its basket button. Nothing to add anywhere. */
.soon .ring-l { width: clamp(170px, 17vw, 220px); }
.soon .kick { margin-top: 30px; }
.soon h1 { max-width: 15ch; font-size: clamp(2.3rem, 5.2vw, 4rem); }
.soon h1 em { white-space: nowrap; }
.soon .lead { margin-bottom: 10px; }
.soon-until { margin: 0 0 30px; max-width: 40ch; font: italic 300 1.3rem/1.4 var(--display); }
.soon-menu { margin-top: 28px; }
.soon-note { display: inline-flex; align-items: center; gap: 10px; margin: 24px 0 0; padding: 9px 18px; border: 1px solid var(--gold-line); background: rgba(255, 253, 248, .7);
  font: 700 .66rem/1.4 var(--text); letter-spacing: .22em; text-transform: uppercase; color: var(--gold-t); }
.soon-note .ic { width: 16px; height: 16px; color: var(--gold); }
.sheet-foot-soon { align-items: center; justify-content: space-between; }
.sheet-soon { display: grid; gap: 6px; margin: 0; min-width: 0; }
.sheet-soon b { font: 400 1.5rem/1 var(--display); font-variant-numeric: lining-nums; }
.sheet-soon span { font: 700 .62rem/1.4 var(--text); letter-spacing: .2em; text-transform: uppercase; color: var(--gold-t); }
.sheet-foot.sheet-foot-soon .btn { flex: none; justify-content: center; }
.sheet-foot.sheet-foot-soon .btn span:last-child { font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; }
.orders-off :is(.row-add, .sigc-add, .pl-add, .hdr-bag, .basket-bar) { display: none !important; }

/* ---------------------------------------------------------------- cookie note */
.cookie { --lift: 0 34px 60px -28px rgba(8, 26, 49, .6); position: fixed; z-index: 90; inset-inline-start: 20px; bottom: calc(var(--dock) + env(safe-area-inset-bottom, 0px) + 20px); max-width: 430px; padding: 24px 24px 22px; animation: rise .8s .6s var(--ease) both; }
.cookie p { margin: 0 0 16px; font-size: .85rem; line-height: 1.6; color: var(--soft); }
.cookie p a { color: var(--navy); text-decoration-color: var(--gold); text-underline-offset: 3px; }
.cookie div { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }

/* ---------------------------------------------------------------- motion: slow and soft */
/* Nothing below hides anything unless html carries .rv: the head script sets it only when reveals can work
   (observer available, no reduced motion) and removes it again if the main script has not reported in after 4 s. */
.rv .reveal { opacity: 0; transform: translateY(28px); transition: opacity 1.2s var(--ease), transform 1.4s var(--ease); transition-delay: calc(var(--d, 0) * 130ms); }
.rv .reveal.is-in { opacity: 1; transform: none; }
/* a photograph rises inside its arch, then the gold line settles around it */
.rv .arch.reveal { opacity: 1; transform: none; }
.rv .arch.reveal .arch-pic { clip-path: inset(100% 0 0 0 round 999px 999px 0 0); transition: clip-path 1.7s var(--ease); }
.rv .arch.reveal.is-in .arch-pic { clip-path: inset(0 0 0 0 round 999px 999px 0 0); }
.rv .arch.reveal .arch-pic img { scale: 1.16; transition: scale 2.4s var(--ease); }
.rv .arch.reveal.is-in .arch-pic img { scale: 1; }
.rv .arch.reveal .arch-line { opacity: 0; transition: opacity 1.4s .7s ease; }
.rv .arch.reveal.is-in .arch-line { opacity: 1; }
.rv .round.reveal { transform: scale(.8) translateY(20px); transition-delay: .55s; }
.rv .round.reveal.is-in { transform: none; }
/* plates settle onto the marble */
.rv .sigc.reveal { opacity: 1; transform: none; }
.rv .sigc.reveal:not(.is-in) .sigc-ring img { opacity: 0; transform: translateY(-36px) scale(1.07); filter: drop-shadow(0 60px 34px rgba(74, 52, 18, .1)); }
.rv .sigc.reveal .sigc-ring img { transition: opacity .9s ease, transform 1.5s var(--ease), filter 1.5s var(--ease); transition-delay: calc(var(--d, 0) * 160ms + 100ms); }
.rv .sigc.reveal.is-in .sigc-ring img { opacity: 1; }
.rv .sigc.reveal.is-set .sigc-ring img { transition-delay: 0s; transition-duration: 1.2s; }
.rv .sigc.reveal :is(h3, .sigc-desc, .sigc-foot) { opacity: 0; transition: opacity 1.2s ease; transition-delay: calc(var(--d, 0) * 160ms + 500ms); }
.rv .sigc.reveal.is-in :is(h3, .sigc-desc, .sigc-foot) { opacity: 1; }
.rv .sigc.reveal .sigc-ring::before { opacity: 0; scale: .9; transition: opacity 1.2s ease, scale 1.4s var(--ease), outline-offset .9s var(--ease); transition-delay: calc(var(--d, 0) * 160ms); }
.rv .sigc.reveal.is-set .sigc-ring::before { transition-delay: 0s; }
.rv .sigc.reveal.is-in .sigc-ring::before { opacity: 1; scale: 1; }
/* gold lines draw */
.rv .reveal .orn i { scale: 0 1; transform-origin: 100% 50%; transition: scale 1.6s .45s var(--ease); }
.rv .reveal .orn i:last-child, [dir="rtl"].rv .reveal .orn i { transform-origin: 0 50%; }
[dir="rtl"].rv .reveal .orn i:last-child { transform-origin: 100% 50%; }
.rv .reveal.is-in .orn i { scale: 1 1; }
.rv .reveal .orn b { opacity: 0; transition: opacity .9s .3s ease; }
.rv .reveal.is-in .orn b { opacity: 1; }

/* ---------------------------------------------------------------- narrower screens */
@media (max-width: 1239px) {
  .book { grid-template-columns: 200px minmax(0, 1fr); }
  .book-side { display: none; }
  .basket-bar.is-on { display: block; animation: up .5s var(--ease); inset-inline: auto var(--pad); width: min(420px, 100% - 2 * var(--pad)); }
}
@media (max-width: 1099px) {
  /* a narrower desktop (900-1099): the same header, drawn a little tighter so every language fits */
  .hdr-in { grid-template-columns: auto minmax(0, 1fr) auto; gap: 16px; }
  .hdr-nav { justify-content: center; gap: clamp(16px, 2.3vw, 26px); }
  .hdr-nav a { letter-spacing: .18em; }
  .hdr-cta { padding: 0 18px; margin-inline-start: 4px; letter-spacing: .18em; }
  /* the photograph is shorter here, so its header is a little smaller and the headline stays in the sky above the horizon */
  :root { --over-logo: clamp(60px, 8.6vh, 92px); }
  .hero-in { padding-top: calc(var(--over-pad) + var(--over-logo) + 40px + clamp(8px, 2vh, 22px)); }
  .hero-top .hdr-nav { gap: clamp(18px, 2.6vw, 30px); }
  .resbar { grid-template-columns: 1.2fr 1fr .8fr 1.2fr; }
  .resbar .btn { grid-column: 1 / -1; margin: 6px 0 0; min-height: 54px; }
  .resbar .btn::before { display: none; }
  .resbar-wrap { margin-top: -50px; }
  .mhead-plate, .deco-plate { display: none; }
}
@media (min-width: 900px) and (max-width: 1279px) {
  /* with the currency switch the tools on the right are wider: below 1280 px the header takes the tighter layout above */
  .has-cur .hdr-in { grid-template-columns: auto minmax(0, 1fr) auto; gap: 16px; }
  .has-cur .hdr-nav { justify-content: center; gap: clamp(16px, 2.3vw, 30px); }
}
@media (max-width: 899px) {
  :root { --top: 66px; --dock: 70px; }
  /* phones and small tablets: menu button, logo in the middle, basket */
  .hdr-nav, .hdr-cta, .lang, .cur { display: none; }
  .hdr-burger { display: grid; }
  .hdr-in { grid-template-columns: 44px minmax(0, 1fr) 44px; gap: 10px; }
  .hdr-logo { justify-self: center; }
  .hdr-logo img { height: 42px; }
  .hero-top { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; gap: 10px; align-items: start; padding-top: max(14px, env(safe-area-inset-top)); }   /* the logo must not touch the top edge of the phone */
  .hero-logo { justify-self: center; }
  .hero-top .hdr-tools { margin: 0; padding: 0; border: 0; }
  .hero-title em { display: block; }
  .dock { position: fixed; z-index: 55; inset: auto 0 0 0; display: grid; grid-template-columns: 1.25fr 1fr; gap: 10px; padding: 9px 12px calc(9px + env(safe-area-inset-bottom, 0px)); background: rgba(250, 246, 238, .95);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 -1px 0 var(--gold-line), 0 -18px 40px -26px rgba(11, 32, 59, .45); }
  .dock .btn { min-height: 52px; padding: 0 8px; letter-spacing: .16em; white-space: normal; text-align: center; line-height: 1.25; }
  body[data-page="checkout"] { --dock: 0px; }
  body[data-page="checkout"] .dock { display: none; }
  .basket-bar.is-on { inset-inline: 12px; width: auto; }
  .cookie { inset-inline: 12px; max-width: none; }
  .toast { bottom: calc(var(--dock) + 84px); }

  :root { --over-logo: clamp(56px, 7.8vh, 70px); --over-pad: 16px; }
  .hero { height: clamp(430px, 58svh, 620px); }
  .hero-pic img { object-position: 47% 0%; }
  .hero-in { padding-top: calc(var(--over-pad) + var(--over-logo) + clamp(14px, 3vh, 30px)); }
  .hero-title { font-size: clamp(1.55rem, 7.4vw, 2.7rem); line-height: 1.12; }
  .sunline.on-photo em, .sunline i { display: none; }
  .sunline.on-photo { flex-wrap: nowrap; max-width: 100%; font-size: .62rem; letter-spacing: .16em; }
  .sunline.on-photo span { min-width: 0; }
  .sunline.on-photo b { white-space: nowrap; }
  .resbar-wrap { margin-top: -74px; width: calc(100% - 2 * var(--pad)); }
  .resbar { grid-template-columns: repeat(6, minmax(0, 1fr)); padding: 22px 20px 20px; gap: 0 18px; min-height: 0; }
  .rb-cell { grid-column: span 3; }
  .rb-cell:nth-of-type(3) { grid-column: span 2; }
  .rb-cell:nth-of-type(4) { grid-column: span 4; }
  html[lang="ar"] .rb-cell:nth-of-type(n) { grid-column: span 3; }
  .resbar-title { display: block; grid-column: 1 / -1; margin: 0 0 6px; text-align: center; font: 300 1.5rem/1.2 var(--display); }
  .rb-cell, [dir="rtl"] .rb-cell { padding: 14px 22px 12px 0; border-bottom: 1px solid var(--gold-line); }
  [dir="rtl"] .rb-cell { padding: 14px 0 12px 22px; }
  .rb-cell + .rb-cell::before, .resbar .btn::before { display: none; }
  .rb-cell:hover, .rb-cell:focus-within { background: none; }
  .rb-cell > .ic { inset-inline-end: 2px; }
  .rb-v, .rb-cell select { font-size: 1.2rem; }
  .resbar .btn { margin-top: 20px; }

  .sig-panel { border: 0; background: none; padding: 50px 0 10px; }
  .sig-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 16px; }
  .sigc-ring { width: min(82%, 220px); margin-bottom: 24px; }
  .sigc-desc { display: none; }
  .sigc h3 { display: grid; align-items: center; min-height: 2.4em; font-size: 1.18rem; }
  .sigc-foot { flex-wrap: wrap; gap: 8px 10px; margin-top: 10px; }
  .sigc-foot span::after { width: 10px; margin-inline-start: 10px; }
  .sigc-add { display: none; }
  .palm-sig-a { top: 4%; inset-inline-start: -120px; }

  .welcome-in, .golden-in, .reserve-in, .visit-in, .rpage-in, .styles, .co-form, .st-grid { grid-template-columns: minmax(0, 1fr); }
  .welcome-art { width: min(78%, 400px); margin: 0 auto 12%; margin-inline-start: 4%; }
  .welcome-art .round { inset-inline-end: -22%; }
  .golden-art { width: min(80%, 400px); margin: 0 auto; order: -1; }
  .golden-time b { font-size: clamp(5.4rem, 27vw, 8rem); }
  .styles-stage { display: none; }
  .style-btn { grid-template-columns: 56px minmax(0, 1fr) 18px; gap: 4px 14px; padding: 18px 0; }
  .style-jp { font-size: 1.05rem; }
  .style-meta { grid-column: 2 / 3; grid-row: 2; white-space: normal; }
  .style-btn .ic { grid-column: 3; grid-row: 1 / 3; }
  .style-more > div { padding-inline-start: 0; }
  .style-pic-m { display: block; width: min(74%, 280px); height: auto; margin: 4px auto 18px; filter: drop-shadow(0 22px 22px rgba(3, 12, 26, .55)); }
  .platter-opts { grid-template-columns: minmax(0, 400px); }
  .pf-1 { display: none; }
  .pf-2 { bottom: 1%; width: 230px; inset-inline-end: -110px; }
  .delivery { display: block; min-height: 0; padding: 0; }
  .delivery-pic { position: relative; height: 62vw; max-height: 420px; }
  .delivery-pic::after { display: none; }
  .delivery-panel { width: auto; margin: -60px var(--pad) 0; margin-bottom: clamp(50px, 8vw, 80px); }
  .delivery { background: none; padding-bottom: 1px; }
  .arcade .arch { width: clamp(170px, 46vw, 230px); }
  .reserve-in { gap: 44px; }
  .visit-map { order: 2; }
  .rpage-side { position: static; order: 3; width: min(76%, 380px); margin: 30px auto 0; margin-inline-start: 4%; }
  .co-side { position: static; }
  .ftr-top { grid-template-columns: 1fr 1fr; }
  .ftr-top .ftr-col:last-child { grid-column: 1 / -1; }
  .ftr-bottom { justify-content: center; text-align: center; }

  .book { grid-template-columns: minmax(0, 1fr); padding-inline: 0; gap: 0; }
  .book-index { position: sticky; top: var(--top); z-index: 30; max-height: none; padding: 0; overflow: auto hidden; background: rgba(250, 246, 238, .96); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 1px 0 var(--gold-line), 0 -1px 0 var(--gold-line); }
  .book-index-in { display: flex; gap: 26px; width: max-content; padding: 0 var(--pad); }
  .bi-ch { display: none; }
  .book-index a { padding: 15px 0 14px; white-space: nowrap; font-size: .86rem; }
  .book-index a::before { top: auto; bottom: 0; width: 100%; height: 2px; transform: scaleX(0); transition: transform .45s var(--ease); }
  .book-index a.is-active::before { width: 100%; transform: scaleX(1); }
  .book-list { margin: 22px 12px 0; padding: 34px 18px 30px; }
  .sect { scroll-margin-top: calc(var(--top) + 66px); }
  .row { gap: 14px; align-items: flex-start; }
  .row-pic { width: 50px; height: 50px; margin: 4px; }
  .row-name { font-size: 1.12rem; }
  .row-dots { min-width: 8px; }
  .row-add { display: none; }
  .mhead { padding-bottom: 34px; }
  .palm-mh-a { inset-inline-start: -30%; opacity: .34; }
  .palm-mh-b { display: none; }

  .st-track { grid-auto-flow: row; gap: 0; }
  .st-step { grid-template-columns: 38px 1fr; justify-items: start; align-items: center; text-align: start; padding: 0 0 22px; }
  .st-step::before { top: auto; bottom: calc(100% - 0px); inset-inline-start: 19px; width: 1px !important; height: 22px !important; }
  .st-anim { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .st-anim svg { max-width: 230px; }
  .st-anim-text { justify-items: center; }
  .st-num { text-align: start; }
}
@media (max-width: 599px) {
  .sheet, .drawer { top: auto; inset-inline: 0; width: 100%; max-height: 94dvh; border: 0; border-top: 1px solid var(--gold); animation: up .5s var(--ease) !important; }
  .drawer { height: 88dvh; padding: 24px 20px calc(20px + env(safe-area-inset-bottom, 0px)); }
  .sheet-media { aspect-ratio: 16 / 10.5; max-height: 34dvh; }
  /* on a phone the close button lies on the dish photograph: a solid ivory medallion with a gold hairline ring behind it,
     so it reads on any photo (also on the words printed on the restaurant's pictures) */
  .sheet-x { top: 9px; inset-inline-end: 11px; width: 42px; height: 42px; background: #fffdf8; box-shadow: 0 0 0 6px rgba(255, 253, 248, .95), 0 0 0 7px var(--gold-line), 0 12px 24px -8px rgba(8, 26, 49, .6); }
  .sheet-scroll { padding: 22px 20px 16px; }
  .sheet-foot { padding-inline: 14px; gap: 10px; }
  .sheet-foot .btn { padding: 0 14px; letter-spacing: .08em; font-size: .64rem; }
  .qty-lg button { width: 40px; }
  .slip-grid-3 { grid-template-columns: 1fr 1fr; }
  .slip-grid-3 > .field:first-child { grid-column: 1 / -1; }
  .slip-grid-2 { grid-template-columns: 1fr; }
  .facts dd { font-size: .74rem; }
  .ftr-top { grid-template-columns: 1fr; text-align: center; }
  .ftr-col nav { justify-items: center; }
  .social { justify-content: center; }
  .st-find-row { flex-direction: column; gap: 10px; }
  .st-find-row input { border-inline-end: 1px solid var(--gold-line); text-align: center; }
  .visit-links .btn, .nf-links .btn { flex: 1 1 100%; }
  .mhead h1 i { display: none; }
  .picks-tiles { grid-template-columns: 1fr 1fr; }
  .btn { max-width: 100%; padding-block: 12px; letter-spacing: .18em; line-height: 1.45; white-space: normal; text-align: center; }
}

/* ---------------------------------------------------------------- Arabic: El Messiri and Almarai, no spaced capitals, no italics */
html[lang="ar"] body { line-height: 1.85; }
html[lang="ar"] * { letter-spacing: 0 !important; text-transform: none !important; }
html[lang="ar"] .st-find-row input { text-transform: uppercase !important; }
html[lang="ar"] :is(h1, h2, h3, h4) { line-height: 1.35; font-weight: 500; }
html[lang="ar"] :is(h1, h2) em, html[lang="ar"] :is(.ftr-tag, .sig-note, .pl-u, .sect-head h3, .peek figcaption b, .grp legend, .prose h2, .st-anim-text b, .bk-empty b, .no-results, .co-empty p, .st-missing p) { font-style: normal; }
html[lang="ar"] :is(h1, h2) em { font-weight: 500; color: var(--gold-t); }
html[lang="ar"] .hero-title em, html[lang="ar"] .navy h2 em, html[lang="ar"] .delivery-panel h2 em { color: var(--gold-l); }
html[lang="ar"] .hero-title { font-weight: 500; line-height: 1.3; }
html[lang="ar"] .field > :is(label, .label) { font-size: .86rem; font-weight: 700; }
html[lang="ar"] :is(.kick, .rb-l, .sunline, .pl-name, .where-t, .golden-time small, .ftr h3, .bi-ch, .sect-portion, .row-portion, .sheet-portion, .tag, .st-kv dt, .st-num small, .style-meta, .sigc-foot span, .peek figcaption span, .sheet-note label, .sheet-share, .row-soon, .grp legend small, .row-price-2 small) { font-size: .86rem; font-weight: 700; }
html[lang="ar"] :is(.btn, .tlink, .hdr-nav a, .basket-bar button, .st-step) { font-size: .88rem; font-weight: 700; }
html[lang="ar"] h2.caps-title { font-size: clamp(1.7rem, 3vw, 2.4rem); margin-inline-end: 0; font-weight: 500; line-height: 1.4; }
html[lang="ar"] .row-name { font-weight: 400; }
html[lang="ar"] .style.is-on .style-name, html[lang="ar"] .navsheet-nav a[aria-current] { font-style: normal; }
html[lang="ar"] .chap-title b { margin-inline-end: 0; }
html[lang="ar"] .golden-time b { letter-spacing: 0 !important; }
html[lang="ar"] .soon-until { font-style: normal; font-weight: 400; }
html[lang="ar"] :is(.soon-note, .sheet-soon span) { font-size: .86rem; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
  /* everything is simply there: nothing rises, draws or settles */
  .rv .reveal, .rv .round.reveal { opacity: 1; transform: none; }
  .rv .arch.reveal .arch-pic { clip-path: none; }
  .rv .arch.reveal .arch-pic img { scale: 1; }
  .rv .arch.reveal .arch-line, .rv .reveal .orn b, .rv .sigc.reveal :is(h3, .sigc-desc, .sigc-foot) { opacity: 1; }
  .rv .sigc.reveal:not(.is-in) .sigc-ring img { opacity: 1; transform: none; filter: var(--plate-shadow); }
  .rv .sigc.reveal .sigc-ring::before { opacity: 1; scale: 1; }
  .rv .reveal .orn i { scale: 1 1; }
  .hero-pic img, .arch-pic img { transform: none; }
  .arch-pic img { transform: scale(1.02); }
}
@media print {
  .hdr, .dock, .cookie, .ftr, .basket-bar, .book-index, .book-side, .palm, .mhead-plate, .arcade-nav { display: none !important; }
  .rv .reveal, .rv .round.reveal, .rv .sigc.reveal .sigc-ring img { opacity: 1 !important; transform: none !important; }
  .rv .arch.reveal .arch-pic { clip-path: none !important; }
  .rv .arch.reveal .arch-line, .rv .reveal .orn b, .rv .sigc.reveal :is(h3, .sigc-desc, .sigc-foot), .rv .sigc.reveal .sigc-ring::before { opacity: 1 !important; }
  .rv .reveal .orn i, .rv .sigc.reveal .sigc-ring::before { scale: 1 1 !important; }
  body { padding: 0; background: #fff; } .book { display: block; } .book-list { box-shadow: none; }
}