/* The coming-soon page: the launch site's look (site/rysieoko/site.css), cut to one screen.
   Paper, ink and the eye's orange; the printer's colour bar under the masthead; the mark as the poster's image. */
@font-face { font-family: "RO Sans"; src: url(fonts/ro-sans.woff2) format("woff2"); font-weight: 400 600; font-display: swap; }

:root {
  color-scheme: light;
  /* the mark's ten fills, in the file's order */
  --p1: #cececd; --p2: #a3a3a2; --p3: #7d7c7c; --p4: #5c5b5a; --p5: #403e3d; --p6: #1c1b1a;
  --p7: #e3ae8e; --p8: #f4680e; --p9: #f77304; --p10: #c47951;
  --paper: #fcfdfc; --ink: var(--p6); --orange: var(--p9); --muted: var(--p4);
  --sans: "RO Sans", "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  --gut: clamp(18px, 3.4vw, 56px);
  --mk-ratio: 1.3058; /* 696 / 533 */
  --mk-w: min(56vw, calc((100svh - 150px) * var(--mk-ratio)));
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; min-height: 100svh; display: flex; flex-direction: column; background: var(--paper); color: var(--ink);
  font: 400 17px/1.6 var(--sans); font-kerning: normal; }
a { color: inherit; text-decoration-color: var(--orange); text-decoration-thickness: 2px; text-underline-offset: 4px; }
a:hover { text-decoration-color: currentColor; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
p { margin: 0; }
.wrap { padding: 0 var(--gut); }
.nw { white-space: nowrap; }

/* masthead: the poster's title line */
.top { display: flex; align-items: center; padding-top: 16px; padding-bottom: 14px; }
.lockup { display: inline-flex; align-items: center; gap: 14px; color: var(--ink); text-decoration: none; }
.lockup img { display: block; width: 56px; height: 56px; }
.lockup span { font: 600 22px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; }

/* the printer's colour bar: the mark's passes in print order, between two registration marks */
.passes { position: relative; height: 12px; margin: 0 calc(var(--gut) + 34px) 10px;
  background: linear-gradient(to right, var(--p1) 0 10%, var(--p2) 10% 20%, var(--p3) 20% 30%, var(--p4) 30% 40%, var(--p5) 40% 50%,
    var(--p6) 50% 60%, var(--p7) 60% 70%, var(--p8) 70% 80%, var(--p9) 80% 90%, var(--p10) 90% 100%); }
.passes::before, .passes::after { content: ""; position: absolute; top: 50%; width: 22px; height: 22px; margin-top: -11px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22' fill='none' stroke='%231c1b1a' stroke-width='1'%3E%3Ccircle cx='11' cy='11' r='5.5'/%3E%3Cpath d='M11 0v22M0 11h22'/%3E%3C/svg%3E") no-repeat center / contain; }
.passes::before { left: -34px; }
.passes::after { right: -34px; }

/* the poster: the mark at the left, more than half the width; the words beside it, the orange field at its foot */
main { flex: 1 0 auto; }
.hero { display: grid; grid-template-columns: var(--mk-w) minmax(0, 1fr); column-gap: clamp(24px, 3vw, 72px); padding-top: 6px; }
.hero-mark { display: block; width: var(--mk-w); height: auto; aspect-ratio: 696 / 533; }
.hero-text { display: flex; flex-direction: column; min-width: 0; padding-top: clamp(12px, 4vh, 72px); }
.kicker { display: flex; align-items: center; gap: 10px; margin-bottom: clamp(16px, 2vw, 28px);
  font: 600 13px/1.2 var(--sans); letter-spacing: .12em; text-transform: uppercase; }
.kicker::before { content: ""; flex: none; width: 10px; height: 10px; background: var(--orange); }
h1 { margin: 0; max-width: 12em; font: 600 clamp(2.3rem, 3.7vw, 6rem)/1.0 var(--sans); letter-spacing: -.028em; text-wrap: balance; }
.lead { margin: clamp(20px, 2.4vw, 36px) 0 clamp(28px, 3vw, 48px); max-width: 34em; font-size: clamp(18px, 1.35vw, 23px); line-height: 1.5; }

/* the page's one orange field: the word that says it is coming, in ink */
.soon { margin-top: auto; padding: clamp(22px, 2.6vw, 44px) clamp(22px, 2.6vw, 44px) clamp(24px, 2.8vw, 48px); background: var(--orange); color: var(--ink); }
.soon h2 { margin: 0; font: 600 clamp(44px, 4.4vw, 96px)/.92 var(--sans); letter-spacing: -.045em; }
.soon p { margin-top: clamp(12px, 1.2vw, 18px); font: 600 clamp(16px, 1.2vw, 20px)/1.4 var(--sans); }
.soon a { text-decoration-color: var(--ink); }
.soon a:hover { text-decoration-thickness: 3px; }

/* footer: a hairline of ink, the small mark, the maker */
.foot { display: flex; align-items: center; gap: 16px; margin-top: clamp(28px, 4vw, 56px); padding-top: 22px; padding-bottom: 28px;
  background: linear-gradient(var(--ink), var(--ink)) no-repeat center top / calc(100% - 2 * var(--gut)) 3px;
  font-size: 14px; line-height: 1.5; color: var(--muted); }
.foot img { display: block; flex: none; width: 36px; height: 36px; }
.foot a { color: var(--ink); }

/* one column: the mark first, whole, then the words; the orange field straight under the headline */
@media (max-width: 999px) {
  :root { --mk-w: min(100%, calc((100svh - 140px) * var(--mk-ratio))); }
  .hero { grid-template-columns: minmax(0, 1fr); }
  .hero-mark { justify-self: center; }
  .hero-text { padding-top: 14px; }
  h1 { max-width: 14em; }
  .soon { order: 1; margin-top: 24px; }
  .lead { margin: 24px 0 0; }
  .lead { order: 2; }
}
@media (max-width: 560px) {
  body { font-size: 16px; }
  .lockup img { width: 46px; height: 46px; }
  .lockup span { font-size: 18px; letter-spacing: .1em; }
  .soon { margin-left: calc(var(--gut) * -1); margin-right: calc(var(--gut) * -1); padding-left: var(--gut); padding-right: var(--gut); }
  .lead { font-size: 17px; }
}