@font-face {
  font-family: "Petrolexim Script";
  src: url("assets/lettering-script.otf") format("opentype");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Petrolexim Display";
  src: url("assets/lettering-display.otf") format("opentype");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: Raleway;
  src: url("assets/raleway.ttf") format("truetype");
  font-weight: 100 900;
  font-display: swap;
}
:root {
  color-scheme: dark;
  --gold: #e49e20;
  /* A design unit at 1920 Г— 960; size each element, never scale the page. */
  --u: min(1px, .052083333vw, .104166667svh);
}
* { box-sizing: border-box; }
html { background: #101829; }
body {
  margin: 0;
  color: white;
  font-family: Raleway, "Century Gothic", Arial, sans-serif;
  /* Raleway defaults to old-style figures; keep digits at cap height. */
  font-variant-numeric: lining-nums;
  font-feature-settings: "lnum" 1;
  background: url("assets/tanker-background.jpg") center / cover no-repeat;
  min-height: 100vh;
  min-height: 100svh;
}
.page {
  min-height: 100vh;
  min-height: 100svh;
  padding: calc(50.8 * var(--u)) 24px calc(37.04 * var(--u));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.page > * { flex-shrink: 0; }
.brand { display: block; width: min(82vw, calc(790.5 * var(--u))); height: auto; }
p, h1 { margin: 0; }
.announcement { width: 100%; margin-top: calc(141.8 * var(--u)); }
.intro {
  padding-left: calc(5.4 * var(--u));
  font-family: "Petrolexim Script", cursive;
  font-size: clamp(2.625rem, calc(100 * var(--u)), 6.25rem);
  font-weight: 400;
  line-height: 1.2;
  font-kerning: normal;
}
h1 {
  margin-top: calc(26.4 * var(--u));
  color: var(--gold);
  font-family: "Petrolexim Display", "Arial Narrow", sans-serif;
  font-size: clamp(2.625rem, calc(100 * var(--u)), 6.25rem);
  font-weight: 400;
  line-height: 1.2;
  font-kerning: normal;
  text-transform: uppercase;
}
.thanks {
  margin-top: calc(58 * var(--u));
  font-size: clamp(1.25rem, calc(54 * var(--u)), 3.375rem);
  line-height: 1.2;
  text-transform: uppercase;
}
.details { margin-top: calc(68 * var(--u)); max-width: 100%; }
address { font-size: clamp(1.125rem, calc(40 * var(--u)), 2.5rem); line-height: 1.3; font-style: normal; }
a {
  display: inline-block;
  min-height: 44px;
  padding-block: calc(6 * var(--u));
  color: inherit;
  text-decoration: none;
  text-underline-offset: .18em;
}
a:hover { text-decoration: underline; }
a:focus-visible { outline: 3px solid var(--gold); outline-offset: 5px; text-decoration: underline; }
.products {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  row-gap: calc(10 * var(--u));
  max-width: max(460px, calc(810 * var(--u)));
  margin: calc(22 * var(--u)) auto 0;
  padding: 0;
  list-style: none;
  font-size: clamp(1rem, calc(32 * var(--u)), 2rem);
  line-height: 1.25;
}
.products li { padding-inline: .45em; position: relative; }
.products li + li::before { content: ""; position: absolute; left: 0; top: .23em; height: .7em; width: 1px; background: var(--gold); }
.products li:nth-child(6)::before { display: none; }
/* Portrait tablets: preserve readable type and distribute the content. */
@media (min-width: 701px) and (max-width: 1100px) and (min-height: 601px) {
  .page { justify-content: space-between; padding: 32px 24px; gap: 40px; }
  .announcement, .details { margin-top: 0; }
  .intro, h1 { font-size: 3.125rem; }
  .thanks { font-size: 1.5rem; }
  address { font-size: 1.3125rem; }
  .products { font-size: 1.125rem; }
}
/* Phones: the whole page fits one screen without scrolling; type and spacing
   shrink with the viewport height on short screens. */
@media (max-width: 700px) {
  body { background-position: 56% center; }
  .page {
    height: 100vh;
    height: 100svh;
    min-height: 0;
    padding: min(64px, 8svh) 16px min(28px, 3.5svh);
    gap: 0;
    justify-content: space-between;
  }
  /* Only the logo is lowered; it does not push the blocks below it. */
  .brand { position: relative; top: min(32px, 4svh); width: min(100%, 440px, 54svh); }
  .announcement { margin-top: min(48px, 6svh); }
  .details { margin-top: 0; }
  .intro { font-size: clamp(2rem, min(11.5vw, 7.4svh), 3.75rem); }
  h1 { margin: min(22px, 2.7svh) auto 0; max-width: 540px; font-size: clamp(1.875rem, min(11.5vw, 7.4svh), 3.75rem); line-height: 1.25; }
  .thanks { max-width: 430px; margin: min(26px, 3.2svh) auto 0; font-size: clamp(1rem, min(5.7vw, 3.7svh), 1.875rem); line-height: 1.3; }
  .details { width: 100%; }
  address { font-size: clamp(1rem, min(5vw, 3.1svh), 1.5625rem); }
  address span { display: block; font-size: min(1rem, 2.6svh); }
  a { min-height: 0; padding-block: min(9px, 1.1svh); overflow-wrap: anywhere; }
  /* Three centred rows (3 + 3 + 2): the list's pseudo-elements act as line breaks. */
  .products { max-width: none; margin-top: min(22px, 2.7svh); font-size: clamp(.75rem, min(4vw, 2.5svh), 1rem); row-gap: 0; }
  .products::before, .products::after { content: ""; flex-basis: 100%; order: 2; }
  .products::after { order: 4; }
  .products li { padding: .3em .4em; white-space: nowrap; }
  .products li + li::before { top: .53em; }
  .products li:nth-child(n+4) { order: 3; }
  .products li:nth-child(n+7) { order: 5; }
  .products li:nth-child(3n+1)::before { display: none; }
  .products li:nth-child(6)::before { display: block; }
}
/* Low landscape windows retain minimum readable sizes and may scroll. */
@media (min-width: 701px) and (max-height: 500px) {
  .page { padding: 24px; }
  .brand { width: min(60vw, 360px); }
  .announcement { margin-top: 32px; }
  h1 { margin-top: 18px; }
  .thanks { margin-top: 28px; }
  .details { margin-top: 28px; }
  .products { margin-top: 18px; }
}