/* Byaltain website.
   Built from the design handoff in /design. Sizes there are given in px for a
   390 px phone screen and a 1440 px laptop screen; here every size is written
   in design units so the whole composition scales with the screen. */

@font-face {
  font-family: "Mirza";
  src: url("../fonts/mirza-medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  /* The font file carries two sets of vertical measurements. Phones and Macs
     read one set, which the design was drawn with. Windows reads the other and
     would set all Arabic about a third of a line lower. These three lines give
     every browser the first set. */
  ascent-override: 54.7%;
  descent-override: 45.3%;
  line-gap-override: 20%;
}
@font-face {
  font-family: "Averia Libre";
  src: url("../fonts/averia-libre-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Averia Libre";
  src: url("../fonts/averia-libre-bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* The brand colours are fixed: keep phones from repainting the page for dark mode. */
  color-scheme: only light;

  --ecru: #F1EBDD;
  --red: #AE2123;
  --green: #3A593E;
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .28 0 0 0 0 .18 0 0 0 .1 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");

  /* One design unit. It is exactly 1px on a 390 px wide phone, and the page
     scales with the screen width from there. The second term stops it growing
     so far on a wide, short screen (a phone on its side) that the headline
     and Directions button no longer fit on the first screen. */
  --u: min(calc(100vw / 390), max(1px, calc(100vh / 480)));
  --m: calc(20 * var(--u));                 /* page margin */
  --col: calc(390 * var(--u));              /* width of the phone design */

  /* The only spacing values in the design: 8, 16, 24, 40, 64, 104. */
  --s1: calc(8 * var(--u));
  --s2: calc(16 * var(--u));
  --s3: calc(24 * var(--u));
  --s4: calc(40 * var(--u));
  --s5: calc(64 * var(--u));
  --s6: calc(104 * var(--u));

  /* Room for a notch or rounded corner when a phone is held sideways. */
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
}
@supports (height: 100svh) {
  :root { --u: min(calc(100vw / 390), max(1px, calc(100svh / 480))); }
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  background: var(--ecru) var(--grain);
  color: var(--green);
  font-family: "Mirza", serif;
  font-size: calc(16 * var(--u));
  overflow-wrap: break-word;
}
img, canvas { display: block; }
/* An animation's canvas takes the place of its drawing, which is then hidden. */
[hidden] { display: none; }
picture { display: contents; }
a { color: inherit; text-decoration: none; }
address { font-style: normal; }

/* English sits under its Arabic, on the same right-hand edge. */
.en {
  font-family: "Averia Libre", Georgia, serif;
  direction: ltr;
  unicode-bidi: isolate;
}
.pair > span { display: block; }
.pair .en { text-align: right; }

/* Type roles. Size and line height as in the handoff's type table. */
/* Headings are heavy, as in the supplied screens. Averia Libre has a real
   Bold. Mirza comes in one weight, so its outlines are thickened by 1/32 of
   the type size, which is what Chrome did when it drew the screens. This is
   not left to the browser because Safari thickens by widening every letter,
   which pushes the phone headline onto a fourth line. */
.t1, .t2 { font-weight: 700; }
.t1 .ar, .t2 .ar { font-weight: 500; -webkit-text-stroke: calc(1em / 32) currentColor; }
.t1 .ar { font-size: calc(44 * var(--u)); line-height: calc(56 * var(--u)); color: var(--red); }
.t1 .en { font-size: calc(20 * var(--u)); line-height: calc(26 * var(--u)); margin-top: var(--s1); }
.t2 .ar { font-size: calc(36 * var(--u)); line-height: calc(46 * var(--u)); color: var(--red); }
.t2 .en { font-size: calc(18 * var(--u)); line-height: calc(24 * var(--u)); margin-top: var(--s1); }
.t4 .ar { font-size: calc(22 * var(--u)); line-height: calc(30 * var(--u)); }
.t4 .en { font-size: calc(16 * var(--u)); line-height: calc(22 * var(--u)); }
.t5 .ar { font-size: calc(16 * var(--u)); line-height: calc(20 * var(--u)); }
.t5 .en { font-size: calc(13 * var(--u)); line-height: calc(16 * var(--u)); }

/* The oval: the brand's own device, for the tag and for buttons. */
.tag {
  display: inline-flex;
  align-items: center;
  height: calc(28 * var(--u));
  padding: 0 calc(14 * var(--u));
  border: 1px solid var(--red);
  border-radius: 50%;
  color: var(--red);
  font-size: calc(16 * var(--u));
  white-space: nowrap;
}
.btn {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: none;
  height: calc(56 * var(--u));
  padding: 0 calc(28 * var(--u));
  border: 1.5px solid var(--red);
  border-radius: 50%;
  color: var(--red);
  transition: background-color .15s ease;
}
.btn span { transition: color .15s ease; }
.btn .ar { font-size: calc(20 * var(--u)); line-height: calc(22 * var(--u)); }
.btn .en { font-size: calc(12 * var(--u)); line-height: calc(14 * var(--u)); color: var(--green); }
.btn:active { background-color: var(--red); }
.btn:active .ar, .btn:active .en { color: var(--ecru); }
@media (hover: hover) {
  .btn:hover { background-color: var(--red); }
  .btn:hover .ar, .btn:hover .en { color: var(--ecru); }
}
a:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.btn:focus-visible { outline-color: var(--green); }

/* Each section's content sits in a stage. On phones the stage is as wide as
   the design and starts at the right-hand edge, so on a screen wider than the
   scaled design the artwork still runs off the right edge as drawn. */
.stage {
  max-width: var(--col);
  margin-inline-start: var(--safe-right);
}

/* The hours wording. The page sets data-kiosk to open or closed from the
   time in Kuwait; until it does, the line that is always true is shown. */
[data-when] { display: none; }
:root[data-kiosk="open"] [data-when="open"],
:root[data-kiosk="closed"] [data-when="closed"],
:root:not([data-kiosk]) [data-when="always"] { display: inline; }

/* 1. Hero */
.marks {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: calc(40 * var(--u));
  margin: var(--s4) var(--m) 0;
}
.marks .chairs { height: calc(30 * var(--u)); width: auto; }
.marks .word { height: calc(26 * var(--u)); width: auto; }
.hero .t1 { margin: var(--s4) var(--m) 0; }
.place {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--s2);
  margin: var(--s3) var(--m) 0;
}
.place .t4 .ar { font-size: calc(20 * var(--u)); line-height: calc(26 * var(--u)); }
.place .t4 .en { font-size: calc(14 * var(--u)); line-height: calc(18 * var(--u)); }
.place .hours { margin-top: var(--s1); color: var(--red); }
.place .hours .en { color: var(--green); }
.a1 { width: 100%; height: auto; aspect-ratio: 390 / 380; margin-top: var(--s4); }

/* 2. Menu */
/* A2 follows A1 with no gap on phones, so the tea stream reads as one line. */
.a2 { width: 100%; height: auto; aspect-ratio: 390 / 280; }
.menu { padding: var(--s4) var(--m) var(--s5); }
.menu .t2 { margin-bottom: var(--s4); }

.group {
  width: 100%;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
}
.group + .group { margin-top: var(--s4); }
.group col.size { width: calc(60 * var(--u)); }
.group th, .group td {
  border-bottom: 1px solid var(--green);
  text-align: start;
  vertical-align: bottom;
}
.group th { font-weight: inherit; }
.group thead th, .group thead td { padding-bottom: var(--s1); }
.group thead .size, .group thead .size .en { text-align: center; }
.group thead .size .en { font-size: calc(11 * var(--u)); line-height: calc(14 * var(--u)); }
.group tbody th, .group tbody td { padding-block: var(--s2); }

.name .ar {
  display: flex;
  align-items: center;
  gap: calc(8 * var(--u));
  font-size: calc(24 * var(--u));
  line-height: calc(30 * var(--u));
  color: var(--red);
}
.name .en {
  display: flex;
  align-items: center;
  gap: calc(8 * var(--u));
  font-size: calc(15 * var(--u));
  line-height: calc(20 * var(--u));
  text-align: right;                        /* a name long enough to wrap stays on the right edge */
}
/* Dotted leader from the prices to the English name, as on the printed menu. */
.name .en::before {
  content: "";
  flex: 1;
  border-bottom: 1px dotted var(--green);
  transform: translateY(calc(-4 * var(--u)));
  margin: 0 calc(6 * var(--u)) 0 calc(12 * var(--u));
}
.name .tag { height: calc(22 * var(--u)); padding: 0 calc(9 * var(--u)); font-size: calc(13 * var(--u)); }
.p {
  font-family: "Averia Libre", Georgia, serif;
  font-weight: 700;
  font-size: calc(15 * var(--u));
  line-height: calc(20 * var(--u));
  color: var(--red);
  direction: ltr;
}
.group .p { text-align: center; }
.note { margin-top: var(--s3); }

/* Colour blocks: full-width red and green, ecru type on top. */
.block-green { background: var(--green) var(--grain); }
.block-red { background: var(--red) var(--grain); }
.block-green .t2 .ar, .block-green .t2 .en { color: var(--ecru); }

/* 3. Why */
.why-sec .stage { padding-top: var(--s4); }
.a3 { width: 100%; height: auto; aspect-ratio: 780 / 968; }
.why { padding: var(--s4) var(--m) var(--s5); }

/* 4. Visit */
.a4 { width: 100%; height: auto; aspect-ratio: 1; }
.visit { padding: var(--s4) var(--m) var(--s5); }
.visit .t2 { margin-bottom: var(--s3); }
.visit .t4 + .t4 { margin-top: var(--s2); }
.visit .actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: var(--s4);
}

/* 5. Footer */
.foot { color: var(--ecru); }
.foot .stage { padding: var(--s5) var(--m) var(--s4); }
.tagline .ar { font-size: calc(30 * var(--u)); line-height: calc(40 * var(--u)); }
.tagline .en { font-size: calc(15 * var(--u)); line-height: calc(20 * var(--u)); margin-top: var(--s1); }
.links { display: flex; gap: var(--s4); margin-top: var(--s4); }
.links .ar { font-size: calc(18 * var(--u)); line-height: calc(22 * var(--u)); }
.links .en { font-size: calc(14 * var(--u)); line-height: calc(18 * var(--u)); }
.links a:hover .en, .links a:focus-visible .en { text-decoration: underline; text-underline-offset: .2em; }
.corner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: end;
  margin-top: var(--s5);
}
.corner .ar { font-size: calc(15 * var(--u)); line-height: calc(18 * var(--u)); }
.corner .en { font-size: calc(11 * var(--u)); line-height: calc(15 * var(--u)); text-align: left; }
.oval {
  display: inline-block;
  padding: 0 calc(12 * var(--u));
  border: 1px solid var(--ecru);
  border-radius: 50%;
  font-size: calc(14 * var(--u));
  line-height: calc(20 * var(--u));
}

/* Pinned bar, phones only. Shown from the menu until the visit section. */
.bar {
  position: fixed;
  z-index: 10;
  left: 0;
  right: 0;
  bottom: 0;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: var(--ecru);
  border-top: 1px solid var(--green);
  visibility: hidden;
  transform: translateY(100%);
  transition: transform .25s ease, visibility 0s linear .25s;
}
.bar.is-shown {
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}
.bar .stage {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: calc(64 * var(--u) - 1px);
  padding: 0 var(--m);
}
.bar .t5 .ar { font-size: calc(17 * var(--u)); line-height: calc(20 * var(--u)); }
.bar .btn { height: calc(40 * var(--u)); padding: 0 calc(20 * var(--u)); }
.bar .btn .ar { font-size: calc(17 * var(--u)); line-height: calc(18 * var(--u)); }
.bar .btn .en { font-size: calc(11 * var(--u)); line-height: calc(12 * var(--u)); }

/* Laptop: 900 px and up. Text in the left half, artwork in the right half. */
@media (min-width: 900px) {
  :root {
    /* Exactly 1px on a 1440 px wide screen. The second term keeps the hero's
       text and button on the first screen when the window is short. */
    --u: max(.625px, min(calc(100vw / 1440), calc(100vh / 720)));
    --m: calc(60 * var(--u));
    --half: calc(720 * var(--u));           /* half of the laptop design */
    --m-right: max(var(--m), var(--safe-right));
    --m-left: max(var(--m), var(--safe-left));
  }
  @supports (height: 100svh) {
    :root { --u: max(.625px, min(calc(100vw / 1440), calc(100svh / 720))); }
  }

  .stage { max-width: none; margin-inline-start: 0; }

  .t1 .ar { font-size: calc(72 * var(--u)); line-height: calc(88 * var(--u)); }
  .t1 .en { font-size: calc(30 * var(--u)); line-height: calc(38 * var(--u)); margin-top: var(--s2); }
  .t2 .ar { font-size: calc(56 * var(--u)); line-height: calc(72 * var(--u)); }
  .t2 .en { font-size: calc(24 * var(--u)); line-height: calc(32 * var(--u)); margin-top: var(--s2); }
  .t4 .ar { font-size: calc(28 * var(--u)); line-height: calc(38 * var(--u)); }
  .t4 .en { font-size: max(12px, calc(19 * var(--u))); line-height: max(calc(26 / 19 * 1em), calc(26 * var(--u))); }
  .t5 .ar { font-size: max(12px, calc(18 * var(--u))); line-height: max(calc(22 / 18 * 1em), calc(22 * var(--u))); }
  .t5 .en { font-size: max(11px, calc(14 * var(--u))); line-height: max(calc(18 / 14 * 1em), calc(18 * var(--u))); }

  .btn { height: calc(64 * var(--u)); padding: 0 calc(34 * var(--u)); }
  .btn .ar { font-size: calc(24 * var(--u)); line-height: calc(26 * var(--u)); }
  .btn .en { font-size: max(10px, calc(14 * var(--u))); line-height: max(calc(16 / 14 * 1em), calc(16 * var(--u))); }
  .tag { height: calc(32 * var(--u)); font-size: calc(18 * var(--u)); }

  /* Text blocks are half the design wide and start at the centre line.
     Artwork is half the design wide and ends at the right screen edge.
     Where the scrollbar takes up width (Windows, Linux) the window is a
     little narrower than the design, and the text blocks give up the room. */
  .hero .stage {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: calc(120 * var(--u)) calc(780 * var(--u));
  }
  .marks {
    grid-column: 1 / -1;
    height: calc(56 * var(--u));
    margin: var(--s4) var(--m-right) 0 var(--m-left);
  }
  .marks .chairs { height: calc(44 * var(--u)); }
  .marks .word { height: calc(38 * var(--u)); }
  .hero .copy {
    grid-column: 2;
    grid-row: 2;
    align-self: center;
    justify-self: start;
    width: min(var(--half), 100%);
    padding: 0 calc(12 * var(--u)) var(--s6) var(--m);
  }
  .hero .t1 { margin: 0; }
  .place { margin: var(--s4) 0 0; justify-content: flex-start; gap: var(--s4); }
  .place .t4 .ar { font-size: calc(24 * var(--u)); line-height: calc(30 * var(--u)); }
  .place .t4 .en { font-size: max(12px, calc(16 * var(--u))); line-height: max(calc(20 / 16 * 1em), calc(20 * var(--u))); }
  .a1 {
    grid-column: 1;
    grid-row: 2;
    justify-self: start;
    width: var(--half);
    height: calc(780 * var(--u));
    aspect-ratio: auto;
    margin: 0;
  }

  .menu-sec .stage { display: grid; grid-template-columns: 1fr 1fr; }
  /* A2 stays put while the menu scrolls past. If the window is shorter than
     the drawing, it holds with its bottom edge on screen so the glass shows. */
  .a2 {
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
    align-self: start;
    width: var(--half);
    height: calc(900 * var(--u));
    aspect-ratio: auto;
    position: sticky;
    top: min(0px, calc(100vh - 900 * var(--u)));
  }
  @supports (height: 100svh) {
    .a2 { top: min(0px, calc(100svh - 900 * var(--u))); }
  }
  .menu {
    grid-column: 2;
    grid-row: 1;
    justify-self: start;
    width: min(var(--half), 100%);
    padding: var(--s6) calc(12 * var(--u)) var(--s6) var(--m);
  }
  .menu .t2 { margin-bottom: var(--s5); }
  /* Columns of 88 with a 24 gutter before each. */
  .group col.size { width: calc(112 * var(--u)); }
  .group .size, .group .p { padding-right: var(--s3); }
  .group thead .size .en { font-size: max(10px, calc(13 * var(--u))); line-height: max(calc(16 / 13 * 1em), calc(16 * var(--u))); }
  .group tbody th, .group tbody td { padding-block: var(--s3); }
  .name .ar { font-size: calc(32 * var(--u)); line-height: calc(40 * var(--u)); }
  .name .en { font-size: max(12px, calc(19 * var(--u))); line-height: max(calc(24 / 19 * 1em), calc(24 * var(--u))); }
  .name .tag { height: calc(26 * var(--u)); font-size: max(10px, calc(15 * var(--u))); }
  .p { font-size: max(12px, calc(19 * var(--u))); line-height: max(calc(24 / 19 * 1em), calc(24 * var(--u))); }

  .why-sec .stage { position: relative; height: calc(900 * var(--u)); padding-top: 0; }
  /* 248 from the left edge at 1440, kept at that distance from the centre. */
  .a3 {
    position: absolute;
    left: calc(50% - 472 * var(--u));
    top: calc(2 * var(--u));
    width: calc(583 * var(--u));
    aspect-ratio: 1166 / 1792;
  }
  .why {
    position: absolute;
    right: var(--m-right);
    top: 50%;
    transform: translateY(-50%);
    width: calc(536 * var(--u));
    padding: 0;
  }

  .visit-sec .stage {
    display: grid;
    grid-template-columns: 1fr 1fr;
    height: calc(900 * var(--u));
  }
  .a4 {
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
    width: var(--half);
    height: calc(900 * var(--u));
    aspect-ratio: auto;
  }
  .visit {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    justify-self: start;
    width: min(var(--half), 100%);
    padding: 0 calc(12 * var(--u)) 0 var(--m);
  }
  .visit .t2 { margin-bottom: var(--s4); }
  .visit .actions { justify-content: flex-start; gap: var(--s4); }

  .foot .stage {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: end;
    padding: var(--s6) var(--m-right) var(--s5) var(--m-left);
  }
  .tagline .ar { font-size: calc(40 * var(--u)); line-height: calc(52 * var(--u)); }
  .tagline .en { font-size: max(12px, calc(18 * var(--u))); line-height: max(calc(24 / 18 * 1em), calc(24 * var(--u))); }
  .links { justify-content: flex-end; margin: 0; }
  .links .ar { font-size: max(12px, calc(20 * var(--u))); line-height: max(calc(22 / 20 * 1em), calc(22 * var(--u))); }
  .links .en { font-size: max(11px, calc(16 * var(--u))); line-height: max(calc(18 / 16 * 1em), calc(18 * var(--u))); }
  .corner { grid-column: 1 / -1; }
  .corner .ar { font-size: max(11px, calc(17 * var(--u))); line-height: max(calc(20 / 17 * 1em), calc(20 * var(--u))); }
  .corner .en { font-size: max(10px, calc(12 * var(--u))); line-height: max(calc(16 / 12 * 1em), calc(16 * var(--u))); }
  .oval { font-size: max(10px, calc(14 * var(--u))); }

  .bar { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .bar, .btn, .btn span { transition: none; }
}