/* Quiet paper grain for Binary's warm ivory surfaces.
   The texture changes surface character without shifting the VI colour. */
:root{
  --binary-paper-grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cfilter id='paper'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.74' numOctaves='5' seed='17' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='gamma' amplitude='1.22' exponent='.82' offset='-.06'/%3E%3CfeFuncG type='gamma' amplitude='1.22' exponent='.82' offset='-.06'/%3E%3CfeFuncB type='gamma' amplitude='1.22' exponent='.82' offset='-.06'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23paper)' opacity='.36'/%3E%3C/svg%3E");
}

body,
.story,
.visit,
.reviews,
.menu-list,
.drink-panel{
  background-image:
    var(--binary-paper-grain),
    radial-gradient(ellipse at 18% 8%,rgba(255,255,255,.16),transparent 48%),
    radial-gradient(ellipse at 82% 92%,rgba(91,70,39,.035),transparent 52%)!important;
  background-repeat:repeat,no-repeat,no-repeat!important;
  background-size:180px 180px,100% 100%,100% 100%!important;
  background-blend-mode:soft-light,normal,multiply!important;
}

body,
.story,
.visit{background-color:#f3efe6!important}
.reviews{background-color:#e7dece!important}
.menu-list,
.drink-panel{background-color:#f2ede2!important}

@media(max-width:800px){
  body,
  .story,
  .visit,
  .reviews,
  .menu-list,
  .drink-panel{background-size:150px 150px,100% 100%,100% 100%!important}
}