/*
  Shared styles for tarotreading.now. Same world as the extension: the night
  sky of the card back, the gilt of the frames, one typeface (Sentient).
  The palette is measured from the deck, not picked: see the extension's
  docs/ASSETS.md.
*/

@font-face {
  font-family: 'Sentient';
  src: url('/assets/fonts/Sentient-Variable.woff2') format('woff2-variations');
  font-weight: 200 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Sentient';
  src: url('/assets/fonts/Sentient-VariableItalic.woff2') format('woff2-variations');
  font-weight: 200 700;
  font-style: italic;
  font-display: swap;
}

:root {
  --ground: #0d0a0a;
  --raised: #261d18;
  --ink: #f2ebe0;
  --muted: #968675;
  --brass: #c69e5c;
  --brass-lit: #f2dea4;
  --marigold: #ffc23a;
  color-scheme: dark;
}

/*
  The same palette, declared again for a dark system theme. It changes nothing
  on screen; it is how a page tells browsers with their own forced dark mode
  (Samsung Internet above all, which ignores color-scheme alone) that it is
  already dark, so they keep their hands off: forced, the gold button turned
  brown and the black star in the icon grey.
*/
@media (prefers-color-scheme: dark) {
  :root {
    --ground: #0d0a0a;
    --raised: #261d18;
    --ink: #f2ebe0;
    --muted: #968675;
    --brass: #c69e5c;
    --brass-lit: #f2dea4;
    --marigold: #ffc23a;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: var(--ground);
  color: var(--ink);
  font: 18px/1.6 'Sentient', Georgia, 'Times New Roman', serif;
  -webkit-font-smoothing: antialiased;
}

/* The sky is pinned behind the page and covers the whole screen, the way it
   sits behind the extension's panel. Stretched to the page width instead, a
   tall phone page ran past the bottom of the picture and showed a hard seam. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  background: var(--ground) url('/assets/night.webp') 50% 0 / cover no-repeat;
}

/* No underlined links anywhere on the site: links are lit in brass instead. */
a { color: var(--brass-lit); text-decoration: none; }
a:hover { color: var(--marigold); }

main {
  flex: 1;
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  padding: 56px 20px 40px;
}

/* The mark and the name, top of every page. */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--ink);
  text-decoration: none;
  font-size: 20px;
  font-weight: 600;
}

.brand img { width: 36px; height: 36px; }

h1 {
  margin: 48px 0 16px;
  font-size: clamp(38px, 7vw, 60px);
  line-height: 1.08;
  font-weight: 500;
}

h1 em { font-style: normal; color: var(--brass-lit); }

h2 { margin: 40px 0 10px; font-size: 26px; line-height: 1.2; font-weight: 500; }

.lead { margin: 0; max-width: 34em; font-size: 21px; color: var(--ink); }

.muted { color: var(--muted); font-style: italic; }

/* Three real cards from the deck, fanned. Static by default; a slow breath
   only when the reader allows motion. Nothing is hidden behind it. */
.fan {
  position: relative;
  height: 330px;
  margin: 48px auto 8px;
  max-width: 420px;
}

.fan img {
  position: absolute;
  left: 50%;
  top: 0;
  width: 180px;
  translate: -50% 0;
  filter: drop-shadow(0 8px 12px rgb(0 0 0 / 0.5));
}

.fan img:nth-child(1) { rotate: -12deg; translate: calc(-50% - 100px) 22px; }
.fan img:nth-child(2) { z-index: 1; }
.fan img:nth-child(3) { rotate: 12deg; translate: calc(-50% + 100px) 22px; }

@media (prefers-reduced-motion: no-preference) {
  .fan { animation: breathe 9s ease-in-out infinite; }
  @keyframes breathe { 50% { transform: translateY(-6px); } }
}

/* Brass plate: the chamfered corners of the extension's field and button. */
.plate {
  display: inline-block;
  margin-top: 28px;
  padding: 14px 26px;
  background: var(--raised);
  clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0 calc(100% - 8px), 0 8px);
  color: var(--brass-lit);
  font-size: 18px;
}

ol.steps { margin: 24px 0 0; padding-left: 1.4em; }
ol.steps li { margin: 0 0 14px; padding-left: 6px; }
ol.steps li::marker { color: var(--brass); font-weight: 600; }

footer {
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  padding: 24px 20px 40px;
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  font-size: 15px;
  color: var(--muted);
}

footer a { color: var(--muted); transition: color .2s; }
footer a:hover { color: var(--brass-lit); }

@media (max-width: 480px) {
  body { font-size: 17px; }
  main { padding-top: 36px; }
  .fan { height: 250px; }
  .fan img { width: 132px; }
  .fan img:nth-child(1) { translate: calc(-50% - 72px) 16px; }
  .fan img:nth-child(3) { translate: calc(-50% + 72px) 16px; }
}