/* Sa Murra: the house style of the app. An engraving printed on dark card,
   with the type of a woodcut poster: bone for the type and the hands, oxide
   red for what starts something, brass for what stands out, granite for the
   lines. Buttons and boxes have cut corners, as in the app. The fonts are
   served from here, so the site loads nothing from elsewhere. */

/* Rokkitt is one variable file for every weight. */
@font-face {
  font-family: "Rokkitt";
  src: url("fonts/Rokkitt-wght.ttf") format("truetype");
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("fonts/PlusJakartaSans-Regular.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("fonts/PlusJakartaSans-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("fonts/PlusJakartaSans-Bold.ttf") format("truetype");
  font-weight: 700;
  font-display: swap;
}

:root {
  --carbone: #171715;
  --carbone-chiaro: #201f1b;
  --carbone-scuro: #10100e;
  --osso: #ddc8a8;
  --osso-soft: #a99a82;
  --ossido: #8e352a;
  --ossido-chiaro: #c2604f;
  --granito: #6b695f;
  --ottone: #a88756;
  --rule: rgba(168, 135, 86, .6);
  --line: rgba(107, 105, 95, .45);
  --shadow: 0 18px 40px rgba(0, 0, 0, .45);
  --cut: 10px;
  --gutter: clamp(16px, 4vw, 40px);
  --display: "Rokkitt", Rockwell, "Roboto Slab", Georgia, serif;
  --text: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 72px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* The card, with its grain, so the black reads as print. */
body {
  margin: 0;
  overflow-x: hidden;
  color: var(--osso);
  background: var(--carbone) url("grain.webp") repeat;
  background-size: 128px 128px;
  font: 17px/1.6 var(--text);
}

img { max-width: 100%; height: auto; }

a {
  color: var(--osso);
  text-decoration-color: var(--ottone);
  text-underline-offset: 3px;
}

a:hover { color: var(--ottone); }

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

/* The cut corners would clip an outline, so a store button lights its edge. */
.store:focus-visible { outline: none; --edge: var(--osso); }

h1, h2, h3 {
  margin: 0 0 .4em;
  line-height: 1.1;
  font-family: var(--display);
  font-weight: 800;
}

h2 { font-size: clamp(2rem, 5vw, 3rem); }

h3 { font-size: 1.45rem; }

p { margin: 0 0 1em; }

strong { font-weight: 700; }

.lead { font-size: 1.12em; color: var(--osso); }

.small { font-size: .9em; color: var(--osso-soft); }

.center { text-align: center; }

/* Cut corners. The element is the edge and its ::before the fill, both cut
   by the same polygon, so the edge follows the bevels too. */
.store, .box, .calls li, .doc {
  --c: var(--cut);
  --edge: var(--granito);
  --fill: var(--carbone-chiaro);
  position: relative;
  isolation: isolate;
  background: var(--edge);
}

.store::before, .box::before, .calls li::before, .doc::before {
  --c: calc(var(--cut) - .6px);
  content: "";
  position: absolute;
  inset: 1.5px;
  z-index: -1;
  background: var(--fill);
}

.store, .box, .calls li, .doc,
.store::before, .box::before, .calls li::before, .doc::before {
  clip-path: polygon(
    var(--c) 0, calc(100% - var(--c)) 0,
    100% var(--c), 100% calc(100% - var(--c)),
    calc(100% - var(--c)) 100%, var(--c) 100%,
    0 calc(100% - var(--c)), 0 var(--c)
  );
}

/* Spaced capitals between thin brass rules, as the app frames its labels. */
.eyebrow, .motto, .wm-sa, .calls-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
}

.eyebrow::before, .eyebrow::after,
.motto::before, .motto::after,
.wm-sa::before, .wm-sa::after,
.calls-title::before, .calls-title::after {
  content: "";
  flex: 1 1 0;
  height: 1px;
  background: var(--rule);
}

.eyebrow::before, .eyebrow::after { flex: 0 0 36px; }

.eyebrow {
  margin: 0 0 .7em;
  color: var(--ottone);
  font-family: var(--display);
  font-size: .9rem;
  font-weight: 700;
  letter-spacing: .26em;
  text-transform: uppercase;
}

.section-head {
  max-width: 720px;
  margin: 0 auto 40px;
  text-align: center;
}

/* The bar on every page: the name, and the way to each part. */

.top {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px 20px;
  padding: 12px var(--gutter);
  background: rgba(23, 23, 21, .92);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.brand {
  flex: none;
  color: var(--osso);
  font-family: var(--display);
  font-size: 1.45rem;
  font-weight: 900;
  letter-spacing: .06em;
  line-height: 1;
  text-decoration: none;
  text-transform: uppercase;
}

.brand span:first-child { font-size: .62em; font-weight: 700; letter-spacing: .2em; vertical-align: .18em; }

.brand:hover { color: var(--osso); }

.top-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 2px 22px;
  font-family: var(--display);
  font-size: .9rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.top-nav a { color: var(--osso); text-decoration: none; padding: 6px 0; }

.top-nav a:hover, .top-nav a[aria-current="page"] { color: var(--ottone); }

/* On a phone the bar scrolls away with the page, leaving it the screen. */
@media (max-width: 600px) {
  .top { position: static; flex-direction: column; padding-top: 10px; padding-bottom: 6px; }
  .top-nav { justify-content: center; gap: 0 14px; font-size: .78rem; letter-spacing: .1em; }
  .top-nav a { padding: 4px 0; }
  html { scroll-padding-top: 0; }
}

/* Home: the name as on the app's first screen, the two players, then the
   words and the stores. On a phone the players stand in front of the
   mountains; on a wide screen the designer's whole picture fills the right,
   and the words sit in its dark left. */

.hero {
  position: relative;
  overflow: hidden;
  padding: clamp(28px, 6vw, 64px) var(--gutter) 64px;
  text-align: center;
}

.wordmark, .motto, .kind { position: relative; z-index: 1; }

.wordmark {
  display: inline-flex;
  flex-direction: column;
  align-items: stretch;
  margin: 0;
  font-weight: 900;
  line-height: .9;
  text-transform: uppercase;
}

.wm-sa {
  margin-bottom: .1em;
  font-size: clamp(1.6rem, 5vw, 2.6rem);
  font-weight: 800;
  letter-spacing: .14em;
}

.wm-murra {
  font-size: clamp(4.6rem, 21vw, 10.5rem);
  letter-spacing: .02em;
}

.motto {
  max-width: 640px;
  margin: 22px auto 6px;
  font-family: var(--display);
  font-size: clamp(1rem, 3.2vw, 1.35rem);
  font-weight: 500;
  letter-spacing: .3em;
  text-transform: uppercase;
}

.motto span { flex: none; }

.kind {
  margin: 0;
  color: var(--ottone);
  font-family: var(--display);
  font-size: clamp(.85rem, 2.4vw, 1rem);
  font-weight: 700;
  letter-spacing: .28em;
  text-transform: uppercase;
}

/* The players over the peaks, the mountains fading into the card around
   them. */
.stage {
  position: relative;
  max-width: 720px;
  margin: 8px auto 28px;
}

.stage-scenery {
  position: absolute;
  left: 50%;
  bottom: -18%;
  width: 900px;
  max-width: none;
  transform: translateX(-50%);
  pointer-events: none;
  /* The picture's own black is a shade off the grained card: fade its edges. */
  -webkit-mask-image: radial-gradient(closest-side, #000 62%, transparent);
  mask-image: radial-gradient(closest-side, #000 62%, transparent);
}

.players { position: relative; display: block; }

.players img { display: block; width: 100%; height: auto; }

@media (min-width: 1000px) {
  .hero {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    min-height: clamp(560px, 40vw, 860px);
    padding-left: max(var(--gutter), calc((100% - 1240px) / 2));
    text-align: left;
  }

  .hero > :not(.stage) { position: relative; z-index: 1; width: min(42%, 520px); }

  .hero .wordmark { width: auto; }

  .hero .wm-murra { font-size: clamp(5.4rem, 9vw, 9.5rem); }

  .hero .motto { margin-left: 0; }

  .hero .hero-text { margin: 26px 0 0; }

  .hero .stores { justify-content: flex-start; }

  /* The whole picture, uncropped, so its own dark left lies beside the
     words and never under them. */
  .stage {
    position: absolute;
    top: 50%;
    right: 0;
    width: 70%;
    max-width: none;
    margin: 0;
    transform: translateY(-50%);
  }

  .stage-scenery { display: none; }

  /* It fades into the card on its left, at its head and at its foot. */
  .players img {
    -webkit-mask-image: linear-gradient(to right, transparent, #000 26%), linear-gradient(to bottom, transparent, #000 10%, #000 86%, transparent);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(to right, transparent, #000 26%), linear-gradient(to bottom, transparent, #000 10%, #000 86%, transparent);
    mask-composite: intersect;
  }
}

.hero-text {
  position: relative;
  max-width: 640px;
  margin: 0 auto;
}

.hero .lead { margin-bottom: 28px; }

.note { margin: 20px 0 0; font-size: .92em; color: var(--osso-soft); }

.stores {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 14px;
}

.store {
  --edge: var(--ossido-chiaro);
  --fill: var(--ossido);
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-width: 206px;
  padding: 12px 24px;
  color: var(--osso);
  text-decoration: none;
  font-family: var(--display);
  font-size: 1.35em;
  font-weight: 800;
  letter-spacing: .03em;
  line-height: 1.05;
  text-align: left;
}

.store:hover { --fill: #9f3e31; color: var(--osso); }

.store small {
  display: block;
  font-family: var(--text);
  font-size: .5em;
  font-weight: 600;
  letter-spacing: .04em;
  opacity: .85;
}

.store svg { width: 26px; height: 26px; fill: currentColor; flex: none; }

.store.is-soon { --edge: var(--granito); --fill: var(--carbone-chiaro); color: var(--osso-soft); }

/* The game: the five hands, and the calls in Campidanese. */

.game {
  max-width: 1080px;
  margin: 0 auto;
  padding: 72px var(--gutter) 64px;
  border-top: 1px solid var(--line);
}

.hands {
  display: flex;
  justify-content: center;
  gap: clamp(6px, 2vw, 24px);
  margin: 0 0 56px;
  padding: 0;
  list-style: none;
  text-align: center;
}

.hands li { flex: 0 1 132px; min-width: 0; }

.hands img { display: block; margin: 0 auto 6px; }

.hands span {
  color: var(--ottone);
  font-family: var(--display);
  font-size: clamp(1.4rem, 4vw, 2rem);
  font-weight: 900;
}

.calls-title {
  max-width: 620px;
  margin: 0 auto 22px;
  color: var(--ottone);
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: .24em;
  text-transform: uppercase;
}

.calls-title span { flex: none; }

/* The ten calls, one to Murra!: two rows of five, or one row on a wide
   screen. */
.calls {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  max-width: 560px;
  margin: 0 auto 18px;
  padding: 0;
  list-style: none;
  text-align: center;
}

@media (min-width: 1000px) {
  .calls { grid-template-columns: repeat(10, minmax(0, 1fr)); max-width: 1080px; }
}

.calls li {
  padding: 14px 8px 12px;
  font-weight: 600;
}

.calls strong {
  display: block;
  font-family: var(--display);
  font-size: 2.2rem;
  font-weight: 900;
  line-height: 1;
}

.calls .is-murra { --edge: var(--ottone); color: var(--ottone); }

.calls .is-murra strong { color: var(--osso); }

/* A throw: the screenshot sideways, then the four steps. */

.throw {
  background: rgba(32, 31, 27, .7);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.throw-in {
  max-width: 1080px;
  margin: 0 auto;
  padding: 80px var(--gutter) 72px;
}

.shot { margin: 0 auto 48px; max-width: 780px; }

.shot figcaption { margin-top: 14px; text-align: center; font-size: .92em; color: var(--osso-soft); }

.phone {
  margin: 0 auto;
  padding: 8px;
  border-radius: 38px;
  background: #0a0a09;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}

.phone img { display: block; border-radius: 30px; }

.phone.is-wide { border-radius: 30px; }

.phone.is-wide img { border-radius: 22px; }

@media (max-width: 560px) {
  .phone.is-wide { padding: 5px; border-radius: 20px; }
  .phone.is-wide img { border-radius: 15px; }
}

.phone.is-tall { width: min(68vw, 280px); }

.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 28px 32px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

.steps li { counter-increment: step; }

.steps li::before {
  content: counter(step);
  display: block;
  margin-bottom: 6px;
  color: var(--ottone);
  font-family: var(--display);
  font-size: 2.6rem;
  font-weight: 900;
  line-height: 1;
}

.steps h3 { font-size: 1.4rem; }

.steps p { margin: 0; color: var(--osso-soft); }

/* The rival: the three levels, then how to set the game up. */

.rival {
  max-width: 1080px;
  margin: 0 auto;
  padding: 80px var(--gutter) 40px;
}

.levels {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 16px;
  margin: 0 0 20px;
  padding: 0;
  list-style: none;
}

.box { padding: 24px 26px 22px; }

.box h3 {
  color: var(--ottone);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
}

.box p { margin: 0; }

.feature {
  display: grid;
  gap: 28px 56px;
  align-items: center;
  margin: 72px 0;
}

.feature-text { max-width: 540px; }

.feature h3 { font-size: clamp(1.7rem, 3.5vw, 2.2rem); }

@media (min-width: 820px) {
  .feature { grid-template-columns: 300px 1fr; }
  .phone.is-tall { width: 300px; }
}

.ticks { margin: 0; padding: 0; list-style: none; }

.ticks li { position: relative; margin-bottom: .6em; padding-left: 1.6em; }

.ticks li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--ottone);
  font-weight: 700;
}

/* Three promises in a band. */

.promise { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: rgba(16, 16, 14, .6); }

.promise ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 28px 40px;
  max-width: 1080px;
  margin: 0 auto;
  padding: 56px var(--gutter);
  list-style: none;
}

.promise h3 { font-size: 1.4rem; }

.promise h3::before {
  content: "";
  display: block;
  width: 13px;
  height: 13px;
  margin: 0 0 14px 2px;
  background: var(--ossido-chiaro);
  transform: rotate(45deg);
}

.promise p { margin: 0; color: var(--osso-soft); }

/* The last call: the fist, ready for the throw, and the stores. */

.cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 24px 56px;
  max-width: 1000px;
  margin: 0 auto;
  padding: 80px var(--gutter);
  text-align: center;
}

.cta-fist { width: 150px; }

.cta .stores { margin: 22px 0 16px; }

@media (min-width: 820px) {
  .cta { flex-wrap: nowrap; text-align: left; }
  .cta .stores { justify-content: flex-start; }
}

/* Support and privacy: one readable column on a cut-cornered box. */

.doc {
  --cut: 18px;
  max-width: 780px;
  margin: 40px auto 64px;
  padding: clamp(26px, 5vw, 52px);
}

.doc h1 { font-size: clamp(2.2rem, 6vw, 3rem); font-weight: 900; }

.doc h2 { font-size: 1.5rem; margin-top: 1.6em; }

.doc ul { padding-left: 1.2em; }

.doc li { margin-bottom: .5em; }

.doc li::marker { color: var(--ottone); }

.doc .summary {
  margin: 22px 0;
  padding: 6px 22px 10px;
  border-left: 3px solid var(--ottone);
  background: rgba(16, 16, 14, .55);
}

.doc .summary h2 { margin-top: .7em; color: var(--ottone); }

@media (max-width: 560px) {
  .doc { --cut: 12px; margin: 16px 12px 40px; }
}

/* Footer */

.foot {
  padding: 48px var(--gutter) 40px;
  text-align: center;
  color: var(--osso-soft);
  background: var(--carbone-scuro);
  border-top: 1px solid var(--line);
}

.foot-icon { border-radius: 14px; }

.foot-motto {
  margin: 12px 0 18px;
  color: var(--osso);
  font-family: var(--display);
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: .3em;
  text-transform: uppercase;
}

.foot nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 26px;
  margin-bottom: 22px;
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.foot a { color: var(--osso); text-decoration: none; }

.foot a:hover, .foot a[aria-current="page"] { color: var(--ottone); }

.maker { display: inline-flex; align-items: center; gap: 10px; font-size: .9em; }

.maker img { border-radius: 8px; }