/* The Latte Artiste website: the game's Diner look. Flat blocks of tomato, butter, cream and dusty blue, stripes like the
   game's sweep, hard shadows, Shrikhand for headings and Outfit for the rest. Both fonts are served from this site, so the page
   never contacts anyone else. Small text always sits on cream, paper, butter or deep brown, never directly on the tomato:
   cream on tomato only reaches 3.5 to 1, enough for the big headings but not for reading. */
@font-face { font-family: "Shrikhand"; font-weight: 400; font-style: normal; font-display: swap; src: url(/fonts/shrikhand.woff2) format("woff2"); }
@font-face { font-family: "Outfit"; font-weight: 100 900; font-style: normal; font-display: swap; src: url(/fonts/outfit.woff2) format("woff2"); }
:root { color-scheme: light; --tomato: #d4583f; --butter: #f0c35e; --cream: #f6efe4; --paper: #fffaf2; --blue: #4f7fb8; --deep: #7c3324; --ink: #2a1c12; --link: #2f5f96;
  --head: "Shrikhand", Georgia, serif; --body: "Outfit", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--cream); color: var(--ink); font: 400 1.0625rem/1.6 var(--body); }
img { display: block; max-width: 100%; height: auto; }
a { color: var(--link); }
mark { background: var(--butter); color: var(--ink); padding: 0 0.25em; border-radius: 4px; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; border-radius: 6px; }
.wrap { max-width: 68rem; margin: 0 auto; padding: 0 1.25rem; }
.skip { position: absolute; left: -999px; top: 0.5rem; background: var(--butter); color: var(--ink); padding: 0.5rem 1rem; border-radius: 99px; z-index: 5; font-weight: 700; }
.skip:focus { left: 1rem; }

/* the top bar, and the tomato headers (the home page's hero, and each other page's) */
.hero { position: relative; overflow: hidden; background: var(--tomato); color: var(--cream); }
.top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 0; }
.brand { display: flex; align-items: center; gap: 0.6rem; color: var(--cream); text-decoration: none; font: 400 1.5rem/1 var(--head); text-shadow: 2px 3px 0 var(--deep); }
.brand img { width: 2.5rem; height: 2.5rem; border-radius: 12px; box-shadow: 0 3px 0 var(--deep); }
.pill { display: inline-block; background: var(--cream); color: var(--ink); font-weight: 700; text-decoration: none; padding: 0.45rem 1rem; border-radius: 99px; box-shadow: 0 3px 0 var(--deep); }
.kicker { display: inline-block; background: var(--butter); color: var(--ink); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; font-size: 0.8rem; padding: 0.25rem 0.8rem; border-radius: 99px; margin: 0; }
.hero h1 { font: 400 clamp(3.2rem, 11vw, 6.2rem)/0.95 var(--head); margin: 0.6rem 0 1.1rem; text-shadow: 4px 5px 0 var(--deep); }
.hero-grid { display: grid; gap: 1rem 3rem; align-items: center; padding: 1rem 0 0.5rem; }
.say { background: var(--cream); color: var(--ink); border-radius: 20px; padding: 1.2rem 1.3rem 1.4rem; box-shadow: 0 6px 0 var(--deep); max-width: 33rem; }
.say p { margin: 0 0 1.1rem; font-size: 1.2rem; line-height: 1.5; }
.btns { display: flex; flex-wrap: wrap; gap: 0.9rem; }
.btn { display: inline-block; font: 700 1.05rem/1 var(--body); background: var(--butter); color: var(--ink); text-decoration: none; padding: 0.95rem 1.4rem; border-radius: 99px; box-shadow: 0 5px 0 var(--deep); }
.btn:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--deep); }
.btn.alt { background: var(--paper); }
.btn.soon { background: #e8dccb; box-shadow: 0 5px 0 rgba(124, 51, 36, 0.5); }   /* not a link until the app is live */
.hero-cup { display: grid; place-items: center; padding: 0.5rem 0 0; }
.hero-cup img { width: min(100%, 25rem); filter: drop-shadow(0 18px 16px rgba(60, 20, 8, 0.45)); transform: rotate(-4deg); animation: bob 7s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(-9px) rotate(-1deg); } }
.bands { display: block; width: 100%; height: clamp(40px, 8vw, 84px); margin-top: 1.2rem; }
@media (min-width: 52rem) { .hero-grid { grid-template-columns: 1.15fr 0.85fr; padding: 2rem 0 0.5rem; } }

/* sections */
section { padding: 3.6rem 0; }
h2 { font: 400 clamp(2rem, 6vw, 3.1rem)/1.1 var(--head); color: var(--deep); margin: 0 0 0.9rem; }
h3 { font: 400 1.5rem/1.2 var(--head); color: var(--deep); margin: 0.9rem 0 0.3rem; }
.lead { font-size: 1.22rem; max-width: 40rem; margin: 0; }
.cards { display: grid; gap: 1.4rem; margin: 2rem 0 0; padding: 0; list-style: none; }
.card { background: var(--paper); border-radius: 20px; padding: 1.4rem 1.4rem 1.5rem; box-shadow: 0 6px 0 var(--deep); }
.card svg { display: block; width: 3.2rem; height: 3.2rem; color: var(--tomato); }
.card p { margin: 0; }
@media (min-width: 46rem) { .cards { grid-template-columns: repeat(3, 1fr); } }
.designs { background: var(--butter); }
.gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.2rem; margin: 2.2rem 0 0; padding: 0; list-style: none; }
.gallery figure { margin: 0; background: var(--paper); border-radius: 18px; padding: 0.7rem 0.7rem 0.9rem; text-align: center; box-shadow: 0 6px 0 var(--deep); transform: rotate(var(--r, 0deg)); }
.gallery li:nth-child(odd) figure { --r: -1.2deg; }
.gallery li:nth-child(even) figure { --r: 1.2deg; }
.gallery .tile { background: var(--blue); border-radius: 12px; padding: 7%; }
.gallery img { filter: drop-shadow(0 8px 8px rgba(30, 20, 40, 0.4)); }
.gallery figcaption { font-weight: 700; margin-top: 0.6rem; }
@media (min-width: 40rem) { .gallery { grid-template-columns: repeat(4, 1fr); } }
.collect { background: var(--deep); color: var(--cream); }
.collect h2 { color: var(--cream); }
.strip { display: flex; flex-wrap: wrap; gap: 0.9rem; margin: 2rem 0 0; padding: 0; list-style: none; }
.strip img { width: clamp(4.6rem, 14vw, 6.6rem); height: auto; filter: drop-shadow(0 6px 6px rgba(0, 0, 0, 0.45)); }
.points { list-style: none; padding: 0; margin: 1.6rem 0 1.8rem; display: grid; gap: 0.9rem; }
.points li { display: flex; gap: 0.8rem; align-items: flex-start; font-size: 1.18rem; }
.points svg { flex: none; width: 1.7rem; height: 1.7rem; color: var(--tomato); margin-top: 0.1rem; }
footer { background: var(--ink); color: var(--cream); padding: 2.6rem 0 3rem; font-size: 0.97rem; }
footer a { color: var(--butter); }
footer p { margin: 0.4rem 0; }
footer small { display: block; opacity: 0.8; margin-top: 1rem; font-size: 0.85rem; }

/* the video of the game: a phone-shaped frame beside its caption */
.watch { background: var(--paper); }
.watch-grid { display: grid; gap: 2rem 3rem; align-items: center; }
.phone { margin: 0 auto; width: min(100%, 18.5rem); }
.phone video { display: block; width: 100%; height: auto; background: var(--ink); border: 0.7rem solid var(--ink); border-radius: 2.2rem; box-shadow: 0 8px 0 var(--deep); }
.phone figcaption { margin-top: 1.1rem; font-size: 0.95rem; text-align: center; }
@media (min-width: 52rem) { .watch-grid { grid-template-columns: 1.2fr 0.8fr; } }

/* a page of plain reading, such as the privacy policy */
.doc h1 { font: 400 clamp(2.4rem, 9vw, 3.8rem)/1 var(--head); margin: 0.6rem 0 0.5rem; text-shadow: 3px 4px 0 var(--deep); }
.doc .updated { margin: 0 0 0.4rem; padding: 0 0 1rem; }
.doc-head { background: var(--cream); color: var(--ink); display: inline-block; padding: 0.3rem 0.9rem; border-radius: 99px; font-size: 0.95rem; }
.doc main { max-width: 40rem; margin: 0 auto; padding: 1.4rem 1.25rem 4rem; }
.doc h2 { font-size: 1.7rem; margin: 2.4rem 0 0.4rem; }
.doc p, .doc li { margin: 0.55rem 0; }
.doc ul { padding-left: 1.3rem; }
.short { background: #fff; border: 3px solid var(--tomato); border-radius: 16px; box-shadow: 0 5px 0 var(--deep); padding: 0.9rem 1.2rem; margin: 0.4rem 0 0; font-size: 1.1rem; }
.short p { margin: 0.3rem 0; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .hero-cup img { animation: none; } }