/* The landing page: the cartouche as a business card, centred on the chart (the chosen mockup, spike/landing-card.html).
   Tokens come from /land/tokens.css; the paper is the flat site's, with the rhumb lines centred on the card. */

html { background: var(--paper); color: var(--i0); }
body { margin: 0; min-height: 100svh; box-sizing: border-box; display: grid; place-content: center;
  grid-template-columns: minmax(0, 34rem);   /* never wider than the screen, whatever the card's longest word */
  padding: var(--s4) var(--s2); font: var(--t1)/var(--leading) var(--face-text);
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body::before { content: ''; position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background: url("/paper/rhumbs.svg") no-repeat center / 3000px 3000px, url("/paper/grain.png") repeat; }
/* foxing only at the window's edges, well clear of the card and the sentence under it */
body::after { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: url("/paper/foxing.svg") repeat-y left -60px top 0 / 120px auto,
              url("/paper/foxing.svg") repeat-y right -60px top 40vh / 120px auto; }
@media (max-width: 44rem) { body::after { content: none; } }
:focus-visible { outline: var(--focus) solid var(--i0); outline-offset: 2px; }

/* the card and the check's sentence under it, together the page's one landmark */
main { display: grid; justify-items: center; gap: var(--s2); }

/* ---------- the card: a double ink frame on the paper ---------- */
.card { position: relative; width: min(34rem, 100%); box-sizing: border-box; padding: var(--s3) var(--s4) var(--s2); text-align: center;
  border: 1.5px solid var(--ink); outline: var(--fine) solid var(--ink); outline-offset: -5px;
  background: color-mix(in srgb, var(--paper) 85%, transparent);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--ink) 10%, transparent), 0 14px 30px -18px color-mix(in srgb, var(--ink) 45%, transparent); }
.mark { margin: 0; font: 400 3.1rem/1 var(--face-head); letter-spacing: -.015em; }
.tagline { margin: var(--s0) auto 0; max-width: 22rem; color: var(--i1); font-size: .95rem; line-height: 1.45; }

/* ---------- the two ways in: the suggested one has the blue bar ---------- */
.key { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); align-items: start; margin-top: var(--s3); }
.way { display: grid; justify-items: center; gap: .2rem; padding-bottom: .35rem; color: var(--ink); text-decoration: none;
  font: 400 var(--t2)/1.1 var(--face-head); white-space: nowrap; }
.way .sub { font: italic 400 .85rem/1.35 var(--face-text); color: var(--i1); white-space: normal; }
/* the bar runs under the whole choice, word and sub-line, as in the mockup */
.way.lead { background: linear-gradient(var(--accent), var(--accent)) left bottom / 100% .1em no-repeat; }
.way:hover { background: linear-gradient(color-mix(in srgb, var(--accent) 50%, var(--paper)), color-mix(in srgb, var(--accent) 50%, var(--paper))) left bottom / 100% .1em no-repeat; }
.way.lead:hover { background-image: linear-gradient(var(--accent), var(--accent)); }
.way[hidden] { display: none; }
.key:has(.way[hidden]) { grid-template-columns: 1fr; }

/* ---------- contacts, under a hairline ---------- */
.contacts { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--s0) var(--s3); margin: var(--s3) 0 0; padding: var(--s1) 0 0;
  list-style: none; border-top: var(--hair) solid var(--i3); font-size: .9rem; }
.contacts a { color: var(--ink); text-decoration-thickness: var(--hair); text-underline-offset: .2em; }
.contacts a[href^="#"] { color: var(--i1); text-decoration-style: dotted; }   /* placeholders: no address or file yet */

/* ---------- the check's sentence, on the paper under the card ---------- */
.check { margin: 0; max-width: 30rem; min-height: 3.2em; text-align: center; font-size: .95rem; font-style: italic; color: var(--i1); }

/* ---------- ornaments (as on the flat site) ---------- */
.orn { display: inline-block; background: var(--i0); -webkit-mask: var(--src) center / contain no-repeat; mask: var(--src) center / contain no-repeat; }
.orn[style*="compass-star"] { aspect-ratio: 169 / 179; }
.orn[style*="scallop"] { aspect-ratio: 154 / 145; }
.orn[style*="wave"] { aspect-ratio: 180 / 120; }
.orn-top { display: block; height: 2.2rem; margin: 0 auto var(--s0); }
.orn-way { height: 1.6rem; margin-bottom: .2rem; }

@media (max-width: 30rem) {
  .key { grid-template-columns: 1fr; }
  .card { padding: var(--s3) var(--s2) var(--s2); }
  /* one step down (t3) on phones; on the narrowest (320px) even that is wider than the card, so there it scales
     with the screen: "thisLiquidSpace" is about 6.7 times as wide as its type size */
  .mark { font-size: min(2.53rem, calc((100vw - 5rem) / 7.6)); }
  .way { white-space: normal; }
}