/* Canvasborn holding page: a sheet pinned on the painter's oak desk, a card leaning on it.
   Palette, type and materials are the game's own (DESIGN.md): paper and ink
   carry everything; the one wash is a title-stroke pigment, never a signal. */

@font-face {
  font-family: "IM Fell English SC";
  src: url(fonts/im-fell-english-sc-latin-400-normal.woff2) format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Alegreya";
  src: url(fonts/alegreya-latin-400-normal.woff2) format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Alegreya";
  src: url(fonts/alegreya-latin-400-italic.woff2) format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Alegreya Sans SC";
  src: url(fonts/alegreya-sans-sc-latin-700-normal.woff2) format("woff2");
  font-weight: 700;
  font-display: swap;
}

:root {
  --paper-sheet: #EBE1CE;
  --paper-card: #E2D6C0;
  --desk-wood: #654B31;
  --ink-strong: #2B241D;
  --ink: #342C24;
  --graphite: #5A5046;
  --rule-decorative: #B7A585;
  --brass: #C8A86F;
  --gold-leaf-light: #E6C46E;
  --bronze-leaf-dark: #5E3A1A;
  --display: "IM Fell English SC", "Iowan Old Style", Georgia, serif;
  --body: "Alegreya", "Iowan Old Style", Georgia, serif;
  --label: "Alegreya Sans SC", "Gill Sans", sans-serif;
  /* a sheet lifted off the desk: its edge, its contact shadow, its cast shadow */
  --lift: drop-shadow(0 0.6px 0 rgba(96, 74, 48, 0.6)) drop-shadow(0 2px 2px rgba(30, 18, 8, 0.3))
    drop-shadow(0 12px 20px rgba(30, 18, 8, 0.32));
  color-scheme: light;
}

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

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

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  color: var(--ink);
  font: 400 18px/1.45 var(--body);
  background: var(--desk-wood) url(assets/oak.webp) center / 760px repeat;
  -webkit-font-smoothing: antialiased;
}

/* the title desk's light: a soft warm key from a window at the upper left
   lifting the oak's midtones (soft-light), falling into shade at the lower right */
body::before,
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
}
body::before {
  z-index: 0;
  mix-blend-mode: soft-light;
  background:
    radial-gradient(110% 90% at 18% 8%, rgba(255, 234, 204, 0.55), rgba(255, 234, 204, 0.18) 55%, rgba(255, 234, 204, 0) 85%);
}
body::after {
  z-index: 20;
  background:
    radial-gradient(120% 80% at 12% -12%, rgba(255, 233, 196, 0.26), rgba(255, 233, 196, 0) 60%),
    radial-gradient(55% 50% at 46% 46%, rgba(255, 228, 186, 0.12), rgba(255, 228, 186, 0) 100%),
    radial-gradient(90% 70% at 105% 112%, rgba(24, 12, 2, 0.42), rgba(24, 12, 2, 0) 70%);
}

.desk {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: max(28px, env(safe-area-inset-top)) 16px max(28px, env(safe-area-inset-bottom));
}

/* ---------- paper ---------- */

.sheet-lift { position: relative; z-index: 1; width: 100%; max-width: 560px; filter: var(--lift); }

.sheet {
  position: relative;
  isolation: isolate;
  text-align: center;
  background: var(--paper-sheet) url(assets/paper.webp) 0 0 / 420px repeat;
  padding: 56px 22px 26px;
  -webkit-mask-box-image: url(assets/deckle.webp) 24 / 12px round;
  mask-border: url(assets/deckle.webp) 24 / 12px round;
}

/* ---------- the name ---------- */

.wordmark {
  position: relative;
  display: inline-block;
  margin: 0;
  padding: 0.3em 0.5em;
  font: 400 clamp(30px, 8.4vw, 66px) / 1 var(--display);
  letter-spacing: 0.12em;
  color: var(--ink-strong);
}
.wordmark span { margin-right: -0.12em; } /* the last letter's spacing would push it off centre */

/* the title stroke's ink-and-wash: a raw sienna wash laid under the lettering */
.wordmark::before {
  content: "";
  position: absolute;
  inset: -2% -4% -6% -11%;
  z-index: -1;
  background: url(assets/wash-sienna.webp) center / 100% 100% no-repeat;
  mix-blend-mode: multiply;
}

.line {
  margin: 0.7em auto 0;
  max-width: 24em;
  font-size: clamp(19px, 4.9vw, 24px);
  color: var(--ink);
}

/* not yet here, so it is pencil (the game's rule for anything unreached) */
.coming {
  position: relative;
  display: inline-block;
  margin: 0.55em 0 0;
  font: italic 400 clamp(21px, 5.6vw, 27px) / 1.3 var(--body);
  color: var(--graphite);
}
.coming::after {
  content: "";
  position: absolute;
  left: -6%;
  right: -4%;
  bottom: -0.08em;
  height: 0.16em;
  background:
    linear-gradient(178.6deg, transparent 38%, rgba(90, 80, 70, 0.55) 40% 52%, transparent 54%),
    linear-gradient(179.4deg, transparent 52%, rgba(90, 80, 70, 0.3) 55% 64%, transparent 67%);
}

.foot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin: 30px auto 0;
  padding-top: 16px;
  max-width: 22em;
  border-top: 1px solid var(--rule-decorative);
}
.foot a {
  font-size: 18px;
  color: var(--ink-strong);
  text-decoration-color: var(--rule-decorative);
  text-underline-offset: 0.18em;
}
.foot a:hover { text-decoration-color: currentColor; }
.foot a:focus-visible { outline: 2px solid var(--ink-strong); outline-offset: 3px; border-radius: 2px; }
.foot small {
  font: 700 16px/1.3 var(--label);
  letter-spacing: 0.06em;
  color: var(--graphite);
}

/* ---------- brass drawing pins ---------- */

.pin {
  position: absolute;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 36% 32%, #FFF4D2 0 9%, rgba(255, 244, 210, 0) 24%),
    radial-gradient(circle at 50% 50%, var(--gold-leaf-light) 0 30%, var(--brass) 52%, #8C6A33 74%, var(--bronze-leaf-dark) 100%);
  box-shadow:
    inset -1px -1px 1px rgba(60, 36, 10, 0.55),
    inset 1px 1px 1px rgba(255, 246, 220, 0.6),
    1.5px 2px 1.5px rgba(20, 10, 0, 0.45),
    4px 6px 6px rgba(20, 10, 0, 0.22);
}
.pin-tl { top: 15px; left: 15px; }
.pin-tr { top: 15px; right: 15px; }
.pin-bl { bottom: 15px; left: 15px; }
.pin-br { bottom: 15px; right: 15px; }

/* ---------- the fan: three of the game's cards held loosely, the lark in
   front. Each card is the whole 2:3 painting in a paper rim of equal width
   with one ink rule and an ink keyline at the art's edge; the back cards are
   only covered by the cards in front of them, never cut. They turn about a
   point below the hand's heel, so they spread to the right like a held hand,
   and each card's shadow falls on the cards under it. ---------- */

.fan {
  position: relative;
  width: min(44vw, 250px);
  margin: 0 126px -30px 0; /* the spread reaches right of the front card: balance it */
}
.card {
  width: 100%;
  margin: 0;
  transform-origin: 30% 115%;
  transform: translate(var(--slide), var(--rise)) rotate(var(--turn));
}
.card-front { position: relative; z-index: 3; --slide: 0%; --rise: 0px; --turn: -4deg; }
.card-back { position: absolute; top: 0; left: 0; z-index: 0; } /* under the sheet's top edge on a phone */
.card-2 { --slide: 29%; --rise: -6px; --turn: 3deg; }
.card-3 { --slide: 58%; --rise: 2px; --turn: 10deg; }

.card-body {
  position: relative;
  padding: 4%;
  border-radius: 6px;
  background: var(--paper-card) url(assets/paper.webp) 0 0 / 300px repeat;
  box-shadow:
    0 1px 0 #CDBD9C,
    0 2px 0 #A8956F,
    1px 3px 2px rgba(25, 14, 4, 0.32),
    6px 12px 18px rgba(25, 14, 4, 0.3);
}
.card-body::before {
  content: "";
  position: absolute;
  inset: 1.7%;
  border: 1px solid rgba(52, 44, 36, 0.55);
  border-radius: 4px;
  pointer-events: none;
}
.card img { display: block; width: 100%; height: auto; outline: 1px solid var(--ink-strong); }

@media (min-width: 900px) {
  .desk { flex-direction: row; }
  .sheet-lift { order: 1; width: 620px; max-width: none; }
  .sheet { padding: 72px 120px 40px 56px; } /* centred on the part the front card leaves clear */
  .wordmark { font-size: 62px; }
  .pin-br { display: none; } /* under the cards */
  .fan {
    order: 2;
    width: clamp(230px, 18vw, 270px);
    margin: 110px 260px 0 -60px;
  }
  .card-front { --turn: -1deg; }
  .card-2 { --slide: 32%; --rise: -10px; --turn: 6deg; }
  .card-3 { --slide: 64%; --rise: -2px; --turn: 13deg; }
}

@media (prefers-reduced-motion: no-preference) {
  .foot a { transition: text-decoration-color 160ms ease; }
}