/* Ashcrown Gauntlet's website: the game's woodcut book on a web page.
   The colours and faces are the game's own (its styles/tokens.css): bone printed on a dark page,
   the print's blood red for the one action that matters, Marcellus SC for titles and Gelasio for words. */

@font-face {
  font-family: "Marcellus SC";
  src: url("/assets/fonts/MarcellusSC-Regular.ttf") format("truetype");
  font-display: swap;
}
@font-face {
  font-family: "Gelasio";
  src: url("/assets/fonts/Gelasio-Variable.ttf") format("truetype");
  font-weight: 400 700;
  font-display: swap;
}

:root {
  color-scheme: dark;
  /* The page: the store prints' own bare page, its colour and grain measured from Closer company. */
  --print-page: #1d150f;
  --page-deep: #120e0a;
  --page-black: #0c0a08;
  --bone: #e2d6b8;
  --bone-bright: #f3ead2;
  --text: #ece2c9;
  --text-soft: #cfc5ab;
  --text-faint: #b3a888;
  --red: #a8382a;
  --red-pressed: #8f2e22;
  --red-text: #d99a87;
  --gilt: #c9a46a;
  --rule-faint: #e2d6b866;
  --rule-strong: #e2d6b8aa;
  /* The hard printed edge a leaf stands on in the game: a keyline and an offset in the page's black. */
  --leaf-edge: 0 0 0 1px var(--page-black), 5px 6px 0 #0a0806d9;
  --display: "Marcellus SC", "Gelasio", Georgia, serif;
  --body: "Gelasio", Georgia, serif;
  --gutter: clamp(16px, 4vw, 48px);
  --measure: 1240px;
}

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

html {
  color: var(--text);
  font: 18px/1.6 var(--body);
  background-color: var(--print-page);
  /* The page's grain, drawn by the browser to the print's measured page: its colour, and its coarse and fine
     variation. It is stitched, so it repeats without a seam. */
  background-image: url("/assets/img/page-grain.svg");
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
main {
  flex: 1;
}

img,
video,
picture {
  display: block;
  max-width: 100%;
}
img {
  height: auto;
}

a {
  color: var(--bone-bright);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}
a:hover {
  color: #fff6de;
}

:focus-visible {
  outline: 2px solid var(--bone-bright);
  outline-offset: 3px;
}

h1,
h2,
h3 {
  font-family: var(--display);
  font-weight: 400;
  line-height: 1.15;
  color: var(--bone-bright);
  letter-spacing: 0.03em;
  text-wrap: balance;
}
p {
  text-wrap: pretty;
}

.skip {
  position: absolute;
  left: 8px;
  top: -100px;
  z-index: 10;
  padding: 10px 14px;
  background: var(--page-black);
  color: var(--bone-bright);
  font-family: var(--display);
}
.skip:focus {
  top: 8px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Actions. The red button is the page's one important action; everything else is a quiet link. */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 1.5em;
  /* Transparent until colours are forced, when it draws the button's edge. */
  border: 1px solid transparent;
  font: 20px/1 var(--display);
  letter-spacing: 0.05em;
  text-decoration: none;
  color: var(--bone-bright);
  background: var(--red);
  box-shadow: var(--leaf-edge);
  cursor: pointer;
}
.button:hover {
  color: var(--bone-bright);
  background: var(--red-pressed);
}
.button:active {
  translate: 2px 3px;
  box-shadow: 0 0 0 1px var(--page-black), 3px 3px 0 #0a0806d9;
}
.button[disabled],
.button[aria-disabled="true"] {
  cursor: default;
  background: #5e2a21;
  color: var(--text-soft);
}

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  min-height: 44px;
  font: 19px/1.2 var(--display);
  letter-spacing: 0.05em;
  color: var(--bone);
  text-decoration: none;
}
.text-link:hover {
  color: var(--bone-bright);
}
.text-link:hover span {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.play-mark {
  width: 1.5em;
  height: 1.5em;
  flex: none;
}

/* The bar over the page's head: home on the left on inner pages, support on the right. */
.site-bar {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px var(--gutter);
}
.site-bar nav {
  margin-left: auto;
}
.site-bar nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 4px;
  font: 18px/1 var(--display);
  letter-spacing: 0.06em;
  color: var(--bone);
  text-decoration: none;
}
.site-bar nav a:hover,
.site-bar nav a[aria-current="page"] {
  color: var(--bone-bright);
  text-decoration: underline;
  text-underline-offset: 0.3em;
}
.brand {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
/* The store's row lockup: the symbol beside the words. */
.brand img {
  width: 190px;
}

/* The opening: the store's print of the three under the red moon, the title on its bare page. */
.hero {
  position: relative;
}
.hero-art img {
  width: 100%;
}
.hero-words {
  position: relative;
  padding: 4px var(--gutter) 48px;
  max-width: 640px;
}
.hero-title {
  margin: 0;
}
.hero-title img {
  width: min(84vw, 420px);
}
.hook {
  margin: 1.1em 0 1.4em;
  font-size: clamp(19px, 1.45vw, 23px);
  line-height: 1.5;
  color: var(--text);
  max-width: 28ch;
}
/* Stacked at every width, so the faces arriving never re-flow them. */
.hero-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

/* Narrow windows: the three from the window's top, the bar laid over them on a little shade, and the
   words under them. */
@media (max-width: 899px) {
  .hero::before {
    content: "";
    position: absolute;
    z-index: 1;
    inset: 0 0 auto 0;
    height: 96px;
    background: linear-gradient(#0c0a08e0, #0c0a0800);
    pointer-events: none;
  }
  .hero-art img {
    max-height: 62svh;
    object-fit: cover;
    object-position: 60% 0;
    -webkit-mask-image: linear-gradient(#000 82%, transparent);
    mask-image: linear-gradient(#000 82%, transparent);
  }
  /* The title's symbol stands in the print's faded foot. */
  .hero-words {
    margin: -52px auto 0;
  }
}
/* A short phone held upright (a browser's bars showing): less of the three and a smaller title, so the way to
   Steam stays on the first screen. */
@media (max-width: 899px) and (orientation: portrait) and (max-height: 700px) {
  .hero-art img {
    max-height: 46svh;
  }
  .hero-title img {
    width: min(70vw, 280px);
  }
}
/* A short, narrow window (a phone on its side, or a laptop zoomed in): the words beside the three. */
@media (max-width: 899px) and (orientation: landscape) {
  .hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
  }
  .hero-art {
    grid-area: 1 / 2;
  }
  .hero-art img {
    max-height: 100svh;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%);
    mask-image: linear-gradient(90deg, transparent, #000 14%);
  }
  .hero-words {
    grid-area: 1 / 1;
    margin: 0;
    padding: 56px 12px 20px var(--gutter);
  }
  .hero-title img {
    width: min(100%, 240px);
  }
  .hook {
    margin: 0.8em 0 1em;
    font-size: 18px;
  }
}

/* Wider windows: the whole print, and the words on its bare page left of the three, who begin at 41% of its
   width at their lowest and 53% at their heads. The words line up with the page's measure where the window
   is wide enough. The print is laid at the window's width while that fits; past 16:9, or wider than its own
   1672px, it is laid at most 940px high (its own size, never enlarged), anchored right, and the page carries
   on to its left. Its foot fades into the page. The print and the words share one cell, so where the words
   need more height than the print, the opening grows and the page shows under the print. */
@media (min-width: 900px) {
  .hero {
    --art-w: 100cqw;
    --words-left: max(clamp(32px, 5cqw, 96px), (100cqw - var(--measure)) / 2);
    container-type: inline-size;
    display: grid;
    overflow: hidden;
  }
  .hero > * {
    grid-area: 1 / 1;
  }
  .hero-art {
    align-self: start;
  }
  .hero-art img {
    -webkit-mask-image: linear-gradient(#000 86%, transparent);
    mask-image: linear-gradient(#000 86%, transparent);
  }
  .hero-words {
    align-self: center;
    width: min(560px, 100cqw - 0.59 * var(--art-w) - var(--words-left) - 24px);
    max-width: none;
    margin: 0 0 0 var(--words-left);
    padding: 72px 0 4%;
  }
  .hero-title img {
    width: clamp(240px, 27cqw, 460px);
  }
  .hook {
    font-size: clamp(18px, 1.5cqw, 23px);
  }
}
@media (min-width: 900px) and (min-aspect-ratio: 16/9), (min-width: 1673px) {
  .hero {
    --hero-h: min(100svh, 940px);
    --art-w: min(100cqw, var(--hero-h) * 1.7787, 1672px);
    min-height: var(--hero-h);
  }
  .hero-art {
    position: absolute;
    inset: 0 0 0 auto;
    width: var(--art-w);
  }
  .hero-art img {
    height: 100%;
    object-fit: cover;
    object-position: right center;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%), linear-gradient(#000 86%, transparent);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(90deg, transparent, #000 14%), linear-gradient(#000 86%, transparent);
    mask-composite: intersect;
  }
}

/* Sections share one measure. */
.section {
  padding: clamp(56px, 8vw, 112px) var(--gutter);
}
.section-inner {
  max-width: var(--measure);
  margin: 0 auto;
}
.kicker {
  margin: 0 0 18px;
  font: 17px/1.3 var(--display);
  letter-spacing: 0.12em;
  color: var(--gilt);
}

/* The trailer, a plate laid on a darker band with its poster until it is played. Its label stands near the
   band's top, so the opening's foot shows the page goes on. */
.trailer {
  padding-top: clamp(36px, 4vw, 56px);
  background: var(--page-deep);
  border-block: 1px solid var(--page-black);
}
.video-frame {
  position: relative;
  container-type: inline-size;
  aspect-ratio: 16 / 9;
  background: var(--page-black);
  box-shadow: var(--leaf-edge);
  outline: 1px solid var(--rule-faint);
  outline-offset: 6px;
}
.video-frame video,
.video-poster img {
  width: 100%;
  height: 100%;
  background: var(--page-black);
}
.video-poster {
  position: relative;
  display: block;
  height: 100%;
  text-decoration: none;
}
.video-poster picture {
  position: absolute;
  inset: 0;
}
/* The play badge stands in the poster's empty sky, left of the duel's seal, clear of both companies. */
.play-badge {
  position: absolute;
  left: 6%;
  top: 25%;
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.55em 1.05em 0.55em 0.65em;
  font: clamp(15px, 1.75cqw, 21px) / 1 var(--display);
  letter-spacing: 0.06em;
  color: var(--bone-bright);
  background: var(--red);
  border: 1px solid transparent;
  box-shadow: var(--leaf-edge);
  /* It stands on a picture, so it keeps its own colours when the system forces others. */
  forced-color-adjust: none;
}
.video-poster:hover .play-badge {
  background: var(--red-pressed);
}
.play-badge svg {
  width: 1.65em;
  height: 1.65em;
}
.play-badge .duration {
  padding-left: 0.6em;
  border-left: 1px solid #f3ead266;
  color: var(--text-soft);
  font-family: var(--body);
  font-size: 0.82em;
}
@container (max-width: 600px) {
  .play-badge .play-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .play-badge .duration {
    padding-left: 0;
    border-left: 0;
  }
}
.credit {
  margin: 22px 0 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-faint);
}
.credit a {
  color: var(--text-soft);
}

/* How it plays: four plates of the game as it is, each with a few words. The first, a battle, is laid
   at the page's whole measure, so its interface can be read. */
.plates {
  display: grid;
  gap: clamp(64px, 9vw, 120px);
}
.plate {
  display: grid;
  gap: 24px 56px;
  align-items: center;
}
.plate-image {
  display: block;
  box-shadow: var(--leaf-edge);
  outline: 1px solid var(--rule-faint);
  outline-offset: 5px;
  cursor: zoom-in;
}
.plate-image:focus-visible {
  outline: 2px solid var(--bone-bright);
}
.plate-image img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.plate h3 {
  margin: 0 0 0.6em;
  font-size: clamp(27px, 2.6vw, 36px);
}
.plate p {
  margin: 0;
  max-width: 34em;
  color: var(--text);
}
@media (min-width: 900px) {
  .plate {
    grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr);
  }
  .plate:nth-child(even) {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.75fr);
  }
  .plate:nth-child(even) .plate-image {
    order: 2;
  }
  .plate.plate-wide {
    grid-template-columns: minmax(0, 1fr);
  }
  .plate-wide .plate-words {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
    gap: 12px 56px;
    align-items: start;
  }
  .plate-wide h3 {
    margin: 0;
  }
}

/* A screenshot opened at its full size, on the page, which stays still behind it. */
html:has(.viewer[open]) {
  overflow: hidden;
}
.viewer {
  max-width: min(96vw, 1920px);
  max-height: 96vh;
  padding: 0;
  border: 0;
  color: var(--text);
  background: var(--page-black);
  box-shadow: var(--leaf-edge);
  outline: 1px solid var(--rule-faint);
  outline-offset: 5px;
  overflow: auto;
}
.viewer::backdrop {
  background: #080604eb;
}
.viewer-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 6px 6px 6px 16px;
}
.viewer-bar p {
  margin: 0;
  font-size: 15px;
  line-height: 1.4;
  color: var(--text-soft);
}
.viewer-close {
  flex: none;
  min-width: 44px;
  min-height: 44px;
  padding: 0 14px;
  font: 17px/1 var(--display);
  letter-spacing: 0.06em;
  color: var(--bone);
  background: transparent;
  border: 1px solid var(--rule-faint);
  cursor: pointer;
}
.viewer-close:hover {
  color: var(--bone-bright);
  border-color: var(--rule-strong);
}
.viewer img {
  width: auto;
  max-width: min(96vw, 1920px);
  max-height: calc(96vh - 56px);
}

/* The close: the crown over the field of pikes, and the way to Steam again. */
.closing {
  position: relative;
  text-align: center;
  border-top: 1px solid var(--page-black);
}
.closing-art img {
  width: 100%;
  max-height: 560px;
  object-fit: cover;
  object-position: center 40%;
  -webkit-mask-image: linear-gradient(#000 70%, transparent);
  mask-image: linear-gradient(#000 70%, transparent);
}
.closing-words {
  position: relative;
  margin: clamp(-120px, -7vw, -24px) auto 0;
  padding: 0 var(--gutter) clamp(64px, 8vw, 104px);
  max-width: 720px;
}
.closing h2 {
  margin: 0 0 0.45em;
  font-size: clamp(30px, 3.4vw, 46px);
}
.closing p {
  margin: 0 auto 1.6em;
  max-width: 32em;
  color: var(--text);
}

/* The foot of every page. */
.site-foot {
  padding: 40px var(--gutter) 48px;
  background: var(--page-black);
  color: var(--text-faint);
  font-size: 15px;
}
.site-foot .foot-inner {
  max-width: var(--measure);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 32px;
}
.site-foot nav {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 28px;
}
.site-foot nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font: 17px/1 var(--display);
  letter-spacing: 0.06em;
  color: var(--bone);
  text-decoration: none;
}
.site-foot nav a:hover {
  color: var(--bone-bright);
  text-decoration: underline;
  text-underline-offset: 0.3em;
}
.site-foot p {
  margin: 0;
}
.foot-mark {
  display: flex;
  align-items: center;
  gap: 14px;
}
.foot-mark img {
  width: 30px;
  flex: none;
}
/* The copyright, and the trademarks under it in a smaller line. */
.foot-legal .foot-marks {
  margin-top: 3px;
  font-size: 13px;
  line-height: 1.4;
}

/* Inner pages: support and the page that is not there. */
.page {
  padding: 120px var(--gutter) 88px;
}
.page-inner {
  max-width: 680px;
  margin: 0 auto;
}
.page h1 {
  margin: 0 0 0.4em;
  font-size: clamp(36px, 4.4vw, 52px);
}
.page .intro {
  margin: 0 0 1.8em;
  font-size: clamp(18px, 1.5vw, 20px);
  color: var(--text);
}
.page h2 {
  margin: 0 0 0.5em;
  font-size: 24px;
}
@media (max-width: 899px) {
  .page {
    padding-top: 92px;
  }
}

/* The support form. */
.form {
  display: grid;
  gap: 26px;
  padding: clamp(20px, 3.4vw, 36px);
  background: var(--page-deep);
  box-shadow: var(--leaf-edge);
  outline: 1px solid var(--rule-faint);
  outline-offset: 5px;
}
.field {
  display: grid;
  gap: 8px;
}
.field label {
  font: 19px/1.3 var(--display);
  letter-spacing: 0.05em;
  color: var(--bone-bright);
}
.field label .optional {
  font-family: var(--body);
  font-size: 16px;
  letter-spacing: 0;
  color: var(--text-soft);
}
.field input,
.field textarea {
  width: 100%;
  padding: 12px 14px;
  font: 18px/1.5 var(--body);
  color: var(--text);
  background: var(--page-black);
  border: 1px solid var(--rule-strong);
  border-radius: 0;
}
.field textarea {
  min-height: 12em;
  resize: vertical;
}
.field input:focus-visible,
.field textarea:focus-visible {
  outline: 2px solid var(--bone-bright);
  outline-offset: 2px;
}
.field [aria-invalid="true"] {
  border-color: var(--red-text);
}
.hint {
  margin: 0;
  font-size: 16px;
  color: var(--text-soft);
}
.field-foot {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.count {
  margin: 0 0 0 auto;
  font-size: 15px;
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
}
.count.over {
  color: var(--red-text);
}
.count[hidden],
.error[hidden],
.sent[hidden],
.form[hidden],
.needs-script[hidden] {
  display: none;
}
.error {
  margin: 0;
  font-size: 16px;
  color: var(--red-text);
}
.form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 24px;
}
.status {
  margin: 0;
  padding: 14px 16px;
  font-size: 17px;
  line-height: 1.5;
  border-left: 3px solid var(--rule-strong);
  background: var(--page-black);
}
.status:empty {
  display: none;
}
.status[data-tone="error"] {
  border-left-color: var(--red-text);
}
.status:focus {
  outline: none;
}
.status a {
  color: var(--bone-bright);
}
.status-action {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 6px;
  font: inherit;
  color: var(--bone-bright);
  text-decoration: underline;
  text-underline-offset: 0.18em;
  background: none;
  border: 0;
  cursor: pointer;
  vertical-align: middle;
}
.sent {
  padding: clamp(20px, 3.4vw, 36px);
  background: var(--page-deep);
  box-shadow: var(--leaf-edge);
  outline: 1px solid var(--rule-faint);
  outline-offset: 5px;
}
.sent h2:focus {
  outline: none;
}
.sent p {
  margin: 0 0 1em;
}
.notes {
  margin-top: 56px;
  display: grid;
  gap: 32px;
}
.notes p {
  margin: 0;
  color: var(--text);
}