/* heinorway.com, as the app opens: a painted fjord over the vellum of a card's leaf (expo's login, expo/src/leaf/),
   ink for words, the manuscripts' cinnabar for the one action, and the tiers' metals. The faces are the app's: IM Fell
   English SC for a name or a title and a button's words, IM Fell English italic for a card's flavour text, EB
   Garamond on the leaf, and Alegreya Sans, upright, for everything else (expo/src/render/frame/fonts.tsx). */

@font-face { font-family: 'Fell SC'; src: url('fonts/IMFellEnglishSC.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Fell'; src: url('fonts/IMFellEnglish-Italic.woff2') format('woff2'); font-style: italic; font-display: swap; }
@font-face { font-family: 'Garamond'; src: url('fonts/EBGaramond-Regular.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Plain'; src: url('fonts/AlegreyaSans-Medium.woff2') format('woff2'); font-weight: 500; font-display: swap; }

:root {
  --vellum: #e9dcc4;
  --paper: #f5eddf; /* a leaf lying on the vellum */
  --ink: #2a1c12;
  --ink-soft: #4f3c2b;
  --ink-quiet: #7a644c;
  --rule: rgba(42, 28, 18, 0.22);
  --bone: #f7f2e7;
  --cinnabar: #a8301c;
  --on-red: #f7ecd6;
  --bronze: #b8693f;
  --silver: #8e99a6;
  --gold: #d29a22;
  --name: 'Fell SC', Georgia, serif;
  --plain: 'Plain', 'Avenir Next', system-ui, sans-serif;
  --gutter: 16px;
  /* a card's rounded corner, as the engine cuts it: 4.8 % of its width, 3.4 % of its height */
  --card-corner: 4.8% / 3.4%;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  color: var(--ink-soft);
  font: 500 18px/1.55 var(--plain);
  background: url('media/look/vellum.webp') center top / 384px repeat, var(--vellum);
  overflow-x: hidden;
}
img, video, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--ink); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 2px; }
.hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wrap { width: min(1120px, 100% - 2 * var(--gutter)); margin-inline: auto; }
h1, h2, h3 { font-weight: 400; margin: 0; color: var(--ink); }
p { margin: 0; }
ul, ol { list-style: none; margin: 0; padding: 0; }

/* The opening: a painted view over a fjord in Vestland, its layers drawn and moved live by scene.js as the app moves
   a card's painting (the clouds drift, the water rolls, the waterfall falls, the grass sways, the layers slide apart
   with the pointer and the scroll), over the still of the same layers until it draws. The name, the line, the sign-up
   and the stores stand small in its calm sky. */
.hero {
  position: relative;
  min-height: clamp(560px, 86svh, 900px);
  overflow: hidden;
  background: #8fa9b8;
  border-bottom: 2px solid var(--ink);
}
.scene { position: absolute; inset: 0; overflow: hidden; }
.scene-still, .scene-live { position: absolute; inset: 0; width: 100%; height: 100%; }
.scene-still { object-fit: cover; object-position: center 72%; }
.scene-live { opacity: 0; transition: opacity 0.8s ease; }
.scene-live.on { opacity: 1; }
/* the words stand in the calm sky, with a little evening shade behind them */
.hero::before { content: ''; position: absolute; inset: 0 0 auto; height: 60%; background: linear-gradient(rgba(14, 22, 34, 0.34), rgba(14, 22, 34, 0)); pointer-events: none; z-index: 1; }
.hero-copy {
  position: relative;
  z-index: 2;
  width: min(680px, 100% - 2 * var(--gutter));
  margin: 0 auto;
  padding-top: clamp(40px, 8vh, 88px);
  text-align: center;
  color: var(--bone);
}
.hero h1 { font: 400 clamp(44px, 5.6vw, 76px)/1 var(--name); letter-spacing: 1px; color: var(--bone); text-shadow: 0 2px 18px rgba(10, 16, 26, 0.55), 0 1px 2px rgba(10, 16, 26, 0.5); }
.tagline { margin-top: 8px; font: 400 clamp(18px, 2vw, 25px)/1.2 var(--name); text-wrap: balance; text-shadow: 0 1px 12px rgba(10, 16, 26, 0.6); }
/* at the painting's foot, over the grass, on a shade of its own: what it is, and where to get it */
.hero::after { content: ''; position: absolute; inset: auto 0 0; height: 34%; background: linear-gradient(rgba(14, 18, 12, 0), rgba(14, 18, 12, 0.62)); pointer-events: none; z-index: 1; }
.hero-foot { position: absolute; z-index: 2; left: 0; right: 0; bottom: clamp(22px, 4.5vh, 44px); padding-inline: var(--gutter); text-align: center; }
.lead { margin: 0 auto; max-width: 34em; font-size: clamp(16px, 1.5vw, 19px); line-height: 1.4; color: var(--bone); text-wrap: balance; text-shadow: 0 1px 8px rgba(10, 16, 26, 0.85); }
.hero .join { margin: 20px auto 0; max-width: 430px; }
.hero .join input, .hero .red { height: 46px; }
.hero .join input { font-size: 16px; }
.hero .red { font-size: 17px; padding: 0 18px; }
.hero .join-note { font-size: 13.5px; margin-top: 9px; color: rgba(247, 242, 231, 0.92); text-shadow: 0 1px 6px rgba(10, 16, 26, 0.7); }
.hero .join-status { color: var(--bone); text-shadow: 0 1px 6px rgba(10, 16, 26, 0.7); }
.hero .join.done .join-status strong { color: var(--bone); }

/* the sign-up: a pale field and the page's one red button */
.join { max-width: 520px; }
.join-row { display: flex; gap: 10px; }
.join input {
  flex: 1;
  min-width: 0;
  height: 54px;
  padding: 0 16px;
  font: 500 18px var(--plain);
  color: var(--ink);
  background: #fbf7ef;
  border: 1px solid rgba(42, 28, 18, 0.4);
  border-radius: 6px;
}
.join input::placeholder { color: #8d7a64; }
.join input[aria-invalid='true'] { border-color: var(--cinnabar); box-shadow: 0 0 0 1px var(--cinnabar); }
.red {
  position: relative;
  height: 54px;
  padding: 0 24px;
  font: 400 20px/1 var(--name);
  letter-spacing: 0.5px;
  color: var(--on-red);
  background: linear-gradient(#b5371f, var(--cinnabar) 55%, #8f2715);
  border: 1px solid rgba(42, 28, 18, 0.6);
  border-radius: 6px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 4px 10px -4px rgba(42, 28, 18, 0.6);
  cursor: pointer;
  white-space: nowrap;
}
/* the double line cut a little inside its edge, as on the app's plates */
.red::before { content: ''; position: absolute; inset: 4px; border-radius: 3px; border: 1px solid rgba(0, 0, 0, 0.3); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); pointer-events: none; }
.red:hover { filter: brightness(1.08); }
.red:active { translate: 0 1px; }
.red[aria-busy='true'] { opacity: 0.7; cursor: progress; }
.join-note { margin-top: 12px; font-size: 15px; color: var(--ink-quiet); }
.join-status:empty { display: none; }
.join-status { margin-top: 12px; font-size: 16px; }
.join-status.wrong { color: var(--cinnabar); }
.hero .join-status.wrong { color: #ffd2c7; }
.join.done .join-row, .join.done .join-note { display: none; }
.join.done .join-status { margin-top: 0; font-size: 19px; }
.join.done .join-status strong { font: 400 24px/1.3 var(--name); color: var(--ink); display: block; margin-bottom: 4px; }

/* A phone in a dark rim, about half as wide as a card's border (3.5 % of its width): the card's metal (its bands of
   shadow and light, expo/src/engine/constants.ts METAL) in dark iron, as the app's round buttons are bound (IRON_RIM),
   with the card's lines, a dark edge, a faint light line inside it and the dark line round the screen. The light sweeps
   slowly along it, each phone at its own time. */
.phone {
  --metal: #18191b 0%, #2b2d30 10%, #484b50 19%, #63676d 24%, #393b3f 30%, #222326 42%, #151617 52%, #2a2c2f 62%, #52565b 72%, #5c6065 77%, #2f3134 84%, #1a1b1d 100%;
  margin: 0;
  aspect-ratio: 390 / 844;
  padding: 4px;
  border-radius: 10px;
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.05) 0 1px, rgba(0, 0, 0, 0.04) 1px 3px), linear-gradient(125deg, var(--metal), var(--metal));
  background-size: auto, 100% 400%;
  animation: gleam 9s ease-in-out infinite alternate;
  box-shadow: 0 0 0 1px #0b0b0c, inset 0 0 0 1px rgba(255, 255, 255, 0.16), 0 18px 34px -20px rgba(42, 28, 18, 0.6);
}
.phone img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 6px; box-shadow: 0 0 0 1px #000; background: #111; }
.steps li:nth-child(2) .phone { animation-delay: -3s; }
.steps li:nth-child(3) .phone { animation-delay: -6s; }
.steps li:nth-child(4) .phone { animation-delay: -4.5s; }
@keyframes gleam { from { background-position: 0 0, 0 0%; } to { background-position: 0 0, 0 100%; } }

/* a card as the app draws it, alive */
.card-frame { border-radius: var(--card-corner); overflow: hidden; aspect-ratio: 720 / 1006; background: #1d1a17; box-shadow: 0 18px 34px -16px rgba(42, 28, 18, 0.6); }
.card-frame video { width: 100%; height: 100%; object-fit: cover; }

/* the stores, over the painting: small tiles of dark glass, not links yet; on the vellum at the end, pale ones */
.stores { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 14px; }
.stores li { display: grid; min-width: 128px; padding: 6px 13px 5px; text-align: left; border: 1px solid rgba(247, 242, 231, 0.28); border-radius: 6px; background: rgba(16, 22, 30, 0.42); backdrop-filter: blur(6px); }
.store-name { font: 400 16px/1.2 var(--name); color: var(--bone); }
.store-when { font-size: 12.5px; color: rgba(247, 242, 231, 0.8); }

/* a part of the page, and a painted figure from the cards standing beside it */
.part { position: relative; padding-block: 64px; border-top: 1px solid var(--rule); }
.part-head { display: flex; align-items: center; gap: 14px; }
.icon { width: 32px; height: 32px; fill: var(--ink); flex: none; }
.part h2 { font: 400 clamp(30px, 4vw, 42px)/1.1 var(--name); letter-spacing: 0.5px; }
.part-text { margin-top: 14px; max-width: 40em; font-size: 19px; }
.vignette { position: absolute; pointer-events: none; height: auto; }
/* the moose stands on the footer's line at the right */
.moose { width: 190px; right: 2%; top: 1px; translate: 0 -100%; }
.raven { width: 250px; right: 2%; top: 26px; }

/* the app's own dark slate (expo/src/ui/Ground.tsx, under the pages' veil of black), for the parts about playing: words
   in bone on it, as in the app */
.dark { color: #c7c1b5; background: linear-gradient(rgba(0, 0, 0, 0.72), rgba(0, 0, 0, 0.72)), url('media/look/slate.webp') center / cover no-repeat, #2e2f2d; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06); }
.dark .part { border-top: none; padding-block: 72px; }
.dark + .part { border-top: none; }
.dark h2, .dark h3 { color: var(--bone); }
.dark .icon { fill: var(--bone); }
.dark .step-no { color: #c7c1b5; border-color: rgba(241, 235, 223, 0.3); }
.dark .phone { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12), inset 0 0 0 1px rgba(255, 255, 255, 0.16), 0 18px 34px -16px rgba(0, 0, 0, 0.8); }

/* how you play: the one real sequence on the page, numbered */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; margin-top: 36px; }
.steps .phone { width: min(100%, 230px); margin: 0 auto 22px; }
.steps h3 { font: 400 24px/1.2 var(--name); display: flex; align-items: baseline; gap: 10px; }
.step-no { font: 500 15px/1 var(--plain); font-variant-numeric: lining-nums tabular-nums; font-feature-settings: 'lnum' 1, 'tnum' 1; color: var(--ink-soft); display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--rule); flex: none; translate: 0 -3px; }
.steps p { margin-top: 8px; font-size: 17px; }

/* the three tiers, one live card of each */
.tiers { display: grid; grid-template-columns: repeat(3, minmax(0, 260px)); justify-content: center; gap: 40px; margin-top: 40px; }
.tier { display: flex; align-items: center; gap: 10px; margin-top: 20px; }
.mark { width: 26px; height: 26px; fill: currentColor; }
.tier-name { font: 400 24px/1.1 var(--name); color: var(--ink); }
.big { margin: 72px auto 8px; max-width: 16em; text-align: center; font: 400 clamp(38px, 6vw, 72px)/1.08 var(--name); color: var(--ink); text-wrap: balance; }

/* a story: the card beside its leaf */
.story { display: grid; grid-template-columns: minmax(200px, 300px) minmax(0, 680px); gap: 44px; align-items: start; margin-top: 36px; }
.story-card { width: 100%; rotate: -2deg; margin-top: 10px; }
.leaf {
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: 40px clamp(20px, 5vw, 52px) 44px;
  box-shadow: 0 18px 36px -20px rgba(42, 28, 18, 0.5);
}
.leaf-name { font: 400 clamp(32px, 5vw, 40px)/1.1 var(--name); text-align: center; letter-spacing: 0.5px; }
.leaf-flavor { margin: 14px auto 0; max-width: 28em; font: italic 400 21px/1.4 'Fell', Georgia, serif; text-align: center; }
.leaf-place { margin-top: 14px; text-align: center; font-size: 15px; color: var(--ink-quiet); }
.leaf-place::before { content: ''; display: inline-block; width: 7px; height: 7px; margin-right: 8px; border-radius: 50%; background: var(--cinnabar); translate: 0 -2px; }
.leaf-para { margin-top: 22px; font: 400 19px/1.62 'Garamond', Georgia, serif; font-variant-numeric: oldstyle-nums; hyphens: auto; }
.leaf-para:first-of-type { margin-top: 30px; }
/* each paragraph opens with its first letter in the name's face, in cinnabar, three lines deep, as a story's page in
   the app sets it (expo/src/leaf/Capital.tsx) */
.leaf-para::first-letter { initial-letter: 3; -webkit-initial-letter: 3; font-family: var(--name); color: var(--cinnabar); margin-right: 0.14em; }
@supports not ((initial-letter: 3) or (-webkit-initial-letter: 3)) {
  .leaf-para::first-letter { float: left; font-size: 4.9em; line-height: 0.8; margin: 0.06em 0.1em 0 0; }
}

/* why */
.why { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px 56px; margin-top: 36px; }
.why li { position: relative; padding-left: 50px; }
.why .icon { position: absolute; left: 0; top: 0; }
.why h3 { font: 400 24px/1.25 var(--name); }
.why p { margin-top: 6px; }

/* the last word */
.last { text-align: center; }
.join-title { font: 400 clamp(32px, 4.8vw, 48px)/1.1 var(--name); }
.last .part-text { margin-inline: auto; }
.last .join { margin: 30px auto 0; }
.last .stores { margin-top: 24px; }
.last .stores li { background: rgba(251, 247, 239, 0.55); border-color: var(--rule); backdrop-filter: none; }
.last .store-name { color: var(--ink); }
.last .store-when { color: var(--ink-quiet); }

.foot { position: relative; margin-top: 150px; padding: 28px 0 48px; border-top: 1px solid var(--rule); display: flex; flex-wrap: wrap; gap: 8px 24px; align-items: baseline; justify-content: center; color: var(--ink-quiet); font-size: 15px; }
.foot ul { display: flex; gap: 20px; }
.foot .credits { flex-basis: 100%; text-align: center; font-size: 13px; }

@media (max-width: 959px) {
  .steps { grid-template-columns: repeat(2, 1fr); }
  .story { grid-template-columns: 1fr; }
  .story-card { width: min(62%, 260px); justify-self: center; }
  .moose { width: 150px; }
  .raven { width: 160px; }
}
@media (max-width: 640px) {
  .hero { min-height: 82svh; }
  .join-row { flex-direction: column; }
  .join input { flex: none; }
  .red { width: 100%; }
  .stores li { min-width: 0; }
  .part { padding-block: 48px; }
  .steps { grid-template-columns: 1fr; gap: 40px; }
  .steps .phone { width: min(60%, 220px); }
  .tiers { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 16px; padding-bottom: 8px; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); scrollbar-width: none; justify-content: start; }
  .tiers::-webkit-scrollbar { display: none; }
  .tiers li { flex: 0 0 64vw; scroll-snap-align: center; }
  .why { grid-template-columns: 1fr; }
  .moose { width: 120px; }
  /* on a phone the figures stand above their part's head rather than beside it */
  .raven { position: static; margin: 0 0 6px auto; width: 150px; }
  .foot { margin-top: 140px; }
}
@media (prefers-reduced-motion: reduce) {
  .phone { animation: none; }
}