/* ============================================================
   Acies - landing page
   ============================================================ */

/* Alagard, by Hewett Tsoi, CC BY 4.0, credited in the footer as that licence
   requires. It carries the headings and nothing else.

   Everything a person has to *read* is Inter. A pixel face at body size,
   tracked out, is the look of a terminal emulator rather than of a product.
   Fantasypixel, the app's own display face, is absent on purpose: it ships
   with the Pixel Quest pack, whose licence forbids redistribution, and
   serving that file from a public host is exactly that. The wordmark is an
   image, so the app's own display type still shows. */
@font-face {
  font-family: 'Alagard';
  src: url('Alagard.ttf') format('truetype');
  font-display: swap;
}

/* Sampled from app/acies/lib/theme.dart. */
:root {
  --void:     #0A0807;
  --panel:    #12100F;
  --ember:    #F0A850;
  --ember-dk: #D98C33;
  --gold:     #C59F60;
  --bronze:   #8D6B3C;
  --cream:    #FCE0B8;
  --paper:    #C4B199;
  --dim:      #857260;
  --rule:     rgba(197,159,96,.13);

  --maxw: 940px;
  --pad: clamp(20px, 5vw, 56px);
  --ease: cubic-bezier(.2,.6,.2,1);
}

* { box-sizing: border-box; }
::selection { background: rgba(240,168,80,.28); color: var(--cream); }
#top { scroll-margin-top: 90px; }
html { scroll-behavior: smooth; background: var(--void); }

body {
  margin: 0;
  background: var(--void);
  color: var(--paper);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  position: relative;
  overflow-x: hidden;
}

/* A torchlit room, not a graph-paper one. The edges fall away into the dark
   and the only thing lighting the page is carried. */
body::after {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none;
  /* Behind the content, not over it. At z-index 2 this sat on top of
     everything, and since it is darkest at the edges it was quietly painting
     55% black over the header and the footer. */
  z-index: 0;
  background: radial-gradient(ellipse at 50% 40%,
    rgba(10,8,7,0) 46%, rgba(10,8,7,.5) 100%);
}

/* The torch itself. Follows the cursor; see script.js. */
.torch {
  position: fixed;
  top: 0; left: 0;
  width: 620px; height: 620px;
  margin: -310px 0 0 -310px;
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  /* Two stops, not one. A single gradient reads as a grey smudge; real light
     has a hot centre and a long, much dimmer falloff. */
  background:
    radial-gradient(circle, rgba(255,198,124,.11) 0%, rgba(255,198,124,0) 28%),
    radial-gradient(circle, rgba(240,168,80,.06) 0%, rgba(181,83,31,.028) 44%, rgba(10,8,7,0) 70%);
  transition: opacity .6s var(--ease);
  will-change: transform;
}
.torch.lit { opacity: 1; }

.nav, main, .footer { position: relative; z-index: 1; }

img { display: block; max-width: 100%; }

/* ---------- Nav ---------- */
/* Not sticky, and with no ground or rule of its own. A bar that draws itself
   puts a straight line across the page exactly where the mark is rising out of
   the dark, which is what made the top read as two pictures stacked. Left bare,
   the header is simply the first thing in the hero's column and the forge runs
   up through both. */
.nav { position: relative; z-index: 5; }
.nav__inner {
  display: flex; justify-content: center;
  padding: 28px var(--pad) 0;
  max-width: var(--maxw); margin: 0 auto;
}
.wordmark {
  display: block; line-height: 0; text-decoration: none;
  opacity: .94; transition: opacity .2s var(--ease);
}
.wordmark:hover { opacity: 1; }
/* Native 96x25 at exactly 2x. A pixel wordmark at a fractional scale is mush,
   so it doubles and is never tweened. */
.wordmark img {
  width: 192px; height: 50px;
  image-rendering: pixelated; image-rendering: crisp-edges;
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  padding: clamp(34px, 6vw, 62px) var(--pad) clamp(64px, 11vw, 128px);
  text-align: center;
}
/* The forge behind the mark. The logo brief has the knight backlit by the
   forge he stands in front of. */
.forge {
  /* Starts above the hero so the warmth runs up behind the bar. Beginning it
     at the hero's own top edge leaves the header sitting in flat black, and
     the two then read as separate pictures stacked. */
  position: absolute; left: 50%; top: -190px;
  width: min(780px, 114vw); height: 620px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at 50% 36%,
    rgba(240,168,80,.15) 0%, rgba(181,83,31,.05) 46%, rgba(10,8,7,0) 74%);
  pointer-events: none;
  animation: forge 6.5s ease-in-out infinite;
}
@keyframes forge {
  0%,100% { opacity:.68; transform: translateX(-50%) scale(1); }
  50%     { opacity:1;   transform: translateX(-50%) scale(1.05); }
}

.hero__inner { position: relative; max-width: 720px; margin: 0 auto; }

.mark-slot { display: flex; justify-content: center; }
.mark {
  width: 112px; height: auto;
  transform-origin: 50% 100%;
  will-change: transform, filter;
  filter: drop-shadow(0 0 22px rgba(240,168,80,.26));
}
@media (max-width: 640px) { .mark { width: 88px; } }

/* Alagard is a bitmap face, set in whole steps rather than a clamp: a
   fractional size lands its strokes between device pixels and goes soft,
   which is the one thing a pixel face must not do. */
.hero__title {
  font-family: 'Alagard', serif; font-weight: 400;
  font-size: 64px; line-height: 1.06;
  margin: 32px 0 20px; color: var(--cream);
}
.hero__title em { font-style: normal; color: var(--ember); }

.hero__sub { font-size: 19px; max-width: 560px; margin: 0 auto; color: var(--paper); }

/* ---------- The button ---------- */
/* Drawn from ui_btn.png rather than invented. That asset is a bronze plate
   with chamfered ends, a lighter gold line inside it, and a slate face; its
   pressed twin, ui_btn_down.png, is the same plate with the face lit to
   236,193,147. Both are Pixel Quest art and neither is served from here, so
   this is built in CSS instead: an outer clipped plate, an inner clipped face,
   and the same two colours.

   The chamfer is the whole signature. Square corners on this palette read as a
   web button wearing a costume. */
.plate {
  --chamfer: 10px;
  display: inline-block;
  padding: 3px;                    /* the plate showing round the face */
  border: 0;
  background: linear-gradient(180deg, #A98049 0%, #8D6B3C 55%, #6E5330 100%);
  clip-path: polygon(
    var(--chamfer) 0, calc(100% - var(--chamfer)) 0,
    100% var(--chamfer), 100% calc(100% - var(--chamfer)),
    calc(100% - var(--chamfer)) 100%, var(--chamfer) 100%,
    0 calc(100% - var(--chamfer)), 0 var(--chamfer));
  cursor: pointer;
  -webkit-user-select: none; user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: filter .18s var(--ease), transform .1s var(--ease);
}
.plate:hover { filter: brightness(1.14); }
.plate:active { transform: translateY(1px); }
.plate:focus-visible { outline: 2px solid var(--ember); outline-offset: 4px; }

.plate__face {
  --chamfer: 8px;
  position: relative; display: block; overflow: hidden;
  padding: 15px 34px;
  background: #23232E;             /* the slate body, 35,35,46 */
  box-shadow: inset 0 0 0 1px rgba(197,159,96,.5);
  clip-path: polygon(
    var(--chamfer) 0, calc(100% - var(--chamfer)) 0,
    100% var(--chamfer), 100% calc(100% - var(--chamfer)),
    calc(100% - var(--chamfer)) 100%, var(--chamfer) 100%,
    0 calc(100% - var(--chamfer)), 0 var(--chamfer));
}
.plate__label {
  position: relative; z-index: 1;
  font-family: 'Inter', sans-serif; font-size: 16px; font-weight: 600;
  color: var(--cream); letter-spacing: .01em;
  transition: color .2s var(--ease);
}

/* ---------- The hold ---------- */
.keep { margin: 40px 0 0; }
.hold { min-width: 264px; }
/* The face lights the way ui_btn_down does. Translucent while it runs, because
   a solid fill sweeping under cream text leaves the label unreadable for most
   of the hold, and the one moment it should be solid is the moment it lands. */
.hold__fill {
  position: absolute; inset: 0 auto 0 0; width: 0;
  background: rgba(236,193,147,.3);
  pointer-events: none;
}
.hold.kept .hold__fill { width: 100% !important; background: #ECC193; }
.hold.kept .plate__label { color: #1B1206; }

.keep__hint {
  margin: 14px 0 0; font-size: 13px; color: var(--dim);
  transition: color .3s var(--ease);
}
.keep__hint:empty { margin: 0; }
.keep__hint.done { color: var(--gold); }

.hero__friction { font-size: 13px; color: var(--dim); margin: 26px 0 0; }
.hero__friction a { color: var(--paper); text-decoration: none; border-bottom: 1px solid rgba(141,107,60,.5); }
.hero__friction a:hover { color: var(--ember); border-bottom-color: var(--ember); }

/* ---------- Sections ---------- */
.section {
  max-width: var(--maxw); margin: 0 auto;
  padding: clamp(56px, 9vw, 96px) var(--pad);
  border-top: 1px solid var(--rule);
}
/* Watches are numbered in the Annals. So are these. */
/* The numeral sits on the title's own line. Watches are numbered in the
   Annals, and a number stacked above a heading reads as a label rather than
   as part of the sentence. */
.section__title {
  display: flex; align-items: baseline; gap: 22px;
  font-family: 'Alagard', serif; font-weight: 400;
  font-size: 48px; line-height: 1.12; margin: 0 0 18px; color: var(--cream);
}
.section__title .num { color: var(--bronze); flex: none; font-size: 34px; }
/* Line the prose up with the title text rather than with the numeral. */
.indent { margin-left: 56px; }
.section__lede { font-size: 17px; max-width: 560px; margin: 0 0 44px; color: var(--paper); }

/* ---------- Ledger ---------- */
.ledger { margin: 0; }
.ledger__row {
  display: grid; grid-template-columns: 200px 1fr; gap: 32px;
  padding: 20px 0; border-top: 1px solid var(--rule);
  transition: background .18s var(--ease);
}
.ledger__row:last-child { border-bottom: 1px solid var(--rule); }
.ledger__row:hover { background: rgba(240,168,80,.028); }
.ledger dt {
  font-family: 'Alagard', serif; font-size: 24px;
  color: var(--gold); line-height: 1.2;
}
.ledger dd { margin: 0; font-size: 16px; color: var(--paper); }

/* ---------- Footer ---------- */
.footer { position: relative; }
/* The same fading rule as the header, so both ends of the page are bracketed
   by the same gesture. */
.footer::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(to right,
    rgba(197,159,96,0) 0%, rgba(197,159,96,.24) 26%,
    rgba(197,159,96,.24) 74%, rgba(197,159,96,0) 100%);
}
.footer__inner { max-width: var(--maxw); margin: 0 auto; padding: 52px var(--pad) 60px; }

.footer__top {
  display: flex; flex-wrap: wrap; gap: 32px 48px;
  justify-content: space-between; align-items: flex-start;
}
.footer__mark {
  width: 96px; height: 25px;
  image-rendering: pixelated; image-rendering: crisp-edges;
  opacity: .8; margin: 0 0 14px;
}
.footer__brand { max-width: 320px; }
.footer__line { margin: 0; font-size: 14px; color: var(--dim); line-height: 1.8; }

.footer__nav { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.footer__nav a {
  font-size: 14px; color: var(--paper); text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color .16s var(--ease), border-color .16s var(--ease);
}
.footer__nav a:hover { color: var(--ember); border-bottom-color: var(--ember); }

.footer__fine {
  margin-top: 44px; padding-top: 22px;
  border-top: 1px solid var(--rule);
  display: flex; flex-wrap: wrap; gap: 8px 32px; justify-content: space-between;
  font-size: 12px; color: #6E5C4C;
}
.footer__fine p { margin: 0; line-height: 1.8; }

/* ---------- Entrances ---------- */
@keyframes rise { from { opacity:0; transform: translateY(20px); } to { opacity:1; transform:none; } }
/* The mark is lit rather than slid. */
@keyframes kindle { from { opacity:0; transform: translateY(14px) scale(.9); } to { opacity:1; transform:none; } }

.mark-slot, .hero__title, .hero__sub, .keep, .hero__friction,
.nav .wordmark, 
.mark-slot { animation-name: kindle; animation-duration: 1.1s; }

.nav .wordmark { animation-delay: .05s; }

.mark-slot     { animation-delay: .10s; }
.hero__title   { animation-delay: .30s; }
.hero__sub     { animation-delay: .44s; }
.keep          { animation-delay: .56s; }
.hero__friction{ animation-delay: .66s; }

.reveal { opacity: 0; transform: translateY(24px); transition: opacity .75s var(--ease), transform .75s var(--ease); }
.reveal.in { opacity: 1; transform: none; }

/* ---------- Narrow ---------- */
@media (max-width: 720px) {
  .ledger__row { grid-template-columns: 1fr; gap: 6px; }
  .indent { margin-left: 0; }
  .section__title { gap: 14px; }
  .ledger dt { font-size: 22px; }
}
@media (max-width: 640px) {
  .hero__title { font-size: 40px; }
  .section__title { font-size: 32px; }
  .hero__sub { font-size: 17px; }
  /* Native 1x. Half a pixel is exactly the mush this avoids. */
  .wordmark img { width: 96px; height: 25px; }
  
  .footer__top { gap: 28px; }
  .footer__nav { flex-direction: row; flex-wrap: wrap; gap: 8px 20px; }
  .torch { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; scroll-behavior: auto; }
  .mark-slot, .hero__title, .hero__sub, .keep, .hero__friction,
  .nav .wordmark, 
  .torch { display: none; }
}