/* The Lost Pint landing page, from the director's Claude Design file
   ("The Lost Pint.html", 2026-10-15).

   The design is a 1440 px wide page. --u is one of its pixels: 1px on screens
   at least 1440 px wide, and smaller on narrower ones, so between 900 and
   1440 px the whole page scales with the window as the design does. Below
   900 px the sections stack (the "Phones and small tablets" block at the end);
   the design has no phone layout, so that block is ours. */

@font-face {
  font-family: "Cabin";
  src: url("fonts/Cabin-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "Cabin";
  src: url("fonts/Cabin-Bold.ttf") format("truetype");
  font-weight: 700;
  font-display: swap;
}

html {
  background: #1a1310;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}
body { margin: 0; }

.page {
  container-type: inline-size;
  --u: min(1px, 100cqw / 1440);
  max-width: 1440px;
  margin: 0 auto;
  overflow: clip;
  background: #f5e9d6;
  font-family: "Cabin", sans-serif;
  font-weight: 600;
}
.page h1, .page h2, .page p, .page figure { margin: 0; }
.page img { display: block; }

a { color: #f5c442; }
a:hover { color: #ffdb73; }
a:focus-visible, button:focus-visible {
  outline: 3px solid #ffdb73;
  outline-offset: 4px;
  border-radius: 4px;
}

/* The black outline the game draws around its text. */
.outline-2 { --o: calc(2 * var(--u)); }
.outline-3 { --o: calc(3 * var(--u)); }
.outline-2, .outline-3 {
  text-shadow:
    calc(-1 * var(--o)) calc(-1 * var(--o)) 0 #000, 0 calc(-1 * var(--o)) 0 #000, var(--o) calc(-1 * var(--o)) 0 #000,
    calc(-1 * var(--o)) 0 0 #000, var(--o) 0 0 #000,
    calc(-1 * var(--o)) var(--o) 0 #000, 0 var(--o) 0 #000, var(--o) var(--o) 0 #000;
}

.speech {
  font-weight: 600;
  line-height: 1.15;
  text-align: center;
  text-wrap: balance;
}

.eyebrow {
  font-weight: 700;
  font-size: calc(20 * var(--u));
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-wrap: balance;
}
.text-column {
  display: flex;
  flex-direction: column;
  gap: calc(24 * var(--u));
}
.text-column h2 {
  font-weight: 700;
  font-size: calc(60 * var(--u));
  line-height: 1.05;
  text-wrap: balance;
}
.text-column p:not(.eyebrow) {
  font-size: calc(24 * var(--u));
  line-height: 1.5;
  text-wrap: pretty;
}

/* Header */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  height: calc(84 * var(--u));
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 calc(40 * var(--u));
  background: #1a1310;
  border-bottom: calc(4 * var(--u)) solid #c9a04a;
}
.brand {
  display: flex;
  align-items: center;
  gap: calc(14 * var(--u));
  font-weight: 700;
  font-size: calc(24 * var(--u));
  letter-spacing: 0.02em;
  color: #f2f0e6;
  text-decoration: none;
}
.brand:hover { color: #f2f0e6; }
.brand img {
  width: calc(52 * var(--u));
  height: calc(52 * var(--u));
  object-fit: contain;
}
.site-nav {
  display: flex;
  align-items: center;
  gap: calc(36 * var(--u));
}
.site-nav a {
  font-weight: 600;
  font-size: calc(20 * var(--u));
  color: #f2f0e6;
  text-decoration: none;
}
.site-nav a.nav-demo {
  font-weight: 700;
  color: #f5c442;
}
.site-nav a:hover { color: #ffdb73; }
.menu-button { display: none; }

/* Sign buttons: the game's brass-framed panel, springing under the mouse. */

.sign-buttons {
  display: flex;
  gap: calc(20 * var(--u));
}
.sign-button {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(2 * var(--u));
  box-sizing: border-box;
  min-width: calc(180 * var(--u));
  padding: calc(4 * var(--u)) calc(10 * var(--u));
  border: calc(20 * var(--u)) solid transparent;
  border-image: url("images/button-frame.png") 24 fill / calc(20 * var(--u)) stretch;
  text-decoration: none;
  filter: drop-shadow(0 calc(8 * var(--u)) 0 rgba(31, 20, 14, 0.35));
  transition: transform 180ms cubic-bezier(.34, 1.56, .64, 1);
}
.sign-button:hover { transform: scale(1.06) rotate(-1.5deg); }
.sign-button.tilt-right:hover { transform: scale(1.06) rotate(1.5deg); }
.sign-button:active { transform: scale(0.94); }
.sign-label {
  font-weight: 700;
  font-size: calc(28 * var(--u));
  color: #f2f0e6;
}
.sign-note {
  font-size: calc(17 * var(--u));
  color: #e8c97a;
}
@media (prefers-reduced-motion: reduce) {
  .sign-button { transition: none; }
}
/* Before the demo is out (DEMO_AVAILABLE in site.js): dimmed and still. */
.sign-button.is-disabled {
  opacity: 0.6;
  filter: grayscale(0.6) drop-shadow(0 calc(8 * var(--u)) 0 rgba(31, 20, 14, 0.35));
  cursor: default;
}
.sign-button.is-disabled:hover,
.sign-button.is-disabled:active { transform: none; }

/* Hero: Yiannos and Giorgos in the brewery */

.hero {
  position: relative;
  height: calc(900 * var(--u));
  background: url("images/brewery.jpg") center / cover;
}
.hero-yiannos, .hero-giorgos {
  position: absolute;
  bottom: calc(150 * var(--u));
  width: auto;
}
.hero-yiannos {
  left: calc(560 * var(--u));
  height: calc(470 * var(--u));
}
.hero-giorgos {
  left: calc(780 * var(--u));
  height: calc(390 * var(--u));
}
.hero-speech-yiannos, .hero-speech-giorgos {
  position: absolute;
  font-size: calc(34 * var(--u));
}
.hero-speech-yiannos {
  left: calc(440 * var(--u));
  top: calc(150 * var(--u));
  width: calc(400 * var(--u));
  color: #f5c442;
}
.hero-speech-giorgos {
  left: calc(750 * var(--u));
  top: calc(250 * var(--u));
  width: calc(360 * var(--u));
  color: #8fe3f5;
}
.hero-band {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  box-sizing: border-box;
  height: calc(200 * var(--u));
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 calc(56 * var(--u));
  background: rgba(0, 0, 0, 0.3137);
}
.hero-title {
  display: flex;
  flex-direction: column;
  gap: calc(6 * var(--u));
  min-width: 0;
  max-width: calc(740 * var(--u));
}
.hero-title h1 {
  font-weight: 700;
  font-size: calc(96 * var(--u));
  line-height: 1;
  color: #f5c442;
  -webkit-text-stroke: calc(12 * var(--u)) #000;
  paint-order: stroke fill;
}
.hero-title p {
  font-size: calc(24 * var(--u));
  line-height: 1.25;
  color: #f2f0e6;
  text-wrap: pretty;
}

/* The Story */

.story {
  scroll-margin-top: calc(88 * var(--u));
  display: grid;
  grid-template-columns: minmax(0, 1fr) calc(440 * var(--u));
  gap: calc(96 * var(--u));
  align-items: center;
  padding: calc(120 * var(--u)) calc(120 * var(--u)) calc(112 * var(--u));
}
.story .eyebrow { color: #c4572e; }
.story h2 { color: #1f140e; }
.story .text-column p:not(.eyebrow) { color: #3a2416; }
.story-photo {
  width: 100%;
  height: auto;
  transform: rotate(3deg);
  filter: drop-shadow(0 calc(10 * var(--u)) 0 rgba(31, 20, 14, 0.35));
}

/* The Competition: Holy Brewing */

.competition {
  position: relative;
  height: calc(860 * var(--u));
  background: url("images/holy-brewing.jpg") center / cover;
}
.competition-text {
  position: absolute;
  left: calc(96 * var(--u));
  top: calc(96 * var(--u));
  width: calc(620 * var(--u));
  display: flex;
  flex-direction: column;
  gap: calc(24 * var(--u));
}
.competition .eyebrow { color: #b9c4f0; }
.competition h2 {
  font-weight: 700;
  font-size: calc(64 * var(--u));
  line-height: 1.02;
  color: #f5c442;
  -webkit-text-stroke: calc(9 * var(--u)) #000;
  paint-order: stroke fill;
  text-wrap: balance;
}
.competition-text p:not(.eyebrow) {
  font-size: calc(24 * var(--u));
  line-height: 1.45;
  color: #f2f0e6;
  text-wrap: pretty;
}
.priest {
  position: absolute;
  bottom: calc(30 * var(--u));
  display: flex;
  flex-direction: column;
  align-items: center;
}
.priest-profitios { right: calc(250 * var(--u)); }
.priest-varellios { right: calc(20 * var(--u)); }
.priest-name {
  font-weight: 700;
  font-size: calc(30 * var(--u));
}
.priest .speech {
  margin-bottom: calc(18 * var(--u));
  font-size: calc(32 * var(--u));
}
.priest-profitios .priest-name, .priest-profitios .speech { color: #e8c76b; }
.priest-varellios .priest-name, .priest-varellios .speech { color: #d9c2ff; }
.priest-profitios .speech { width: calc(300 * var(--u)); }
.priest-varellios .speech { width: calc(260 * var(--u)); }
.priest img { width: auto; }
.priest-profitios img { height: calc(430 * var(--u)); }
.priest-varellios img {
  height: calc(400 * var(--u));
  transform: scaleX(-1);
}

/* The controls: the action wheel */

.controls {
  display: grid;
  grid-template-columns: calc(420 * var(--u)) minmax(0, 1fr);
  gap: calc(96 * var(--u));
  align-items: center;
  padding: calc(112 * var(--u)) calc(120 * var(--u));
  background: #3d2414;
}
.controls-wheel {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 calc(16 * var(--u)) calc(30 * var(--u)) rgba(60, 30, 60, 0.45));
}
.controls .eyebrow, .about .eyebrow { color: #d68a2a; }
.controls h2, .about h2 { color: #f2f0e6; }
.controls .text-column p:not(.eyebrow), .about .text-column p:not(.eyebrow) { color: #ead6bb; }

/* Download the demo */

.demo {
  scroll-margin-top: calc(88 * var(--u));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(32 * var(--u));
  padding: calc(120 * var(--u));
  text-align: center;
}
.demo-logo {
  width: calc(120 * var(--u));
  height: auto;
}
.demo h2 {
  max-width: calc(1000 * var(--u));
  font-weight: 700;
  font-size: calc(72 * var(--u));
  line-height: 1.05;
  color: #1f140e;
  text-wrap: balance;
}
.demo > p {
  max-width: calc(720 * var(--u));
  font-size: calc(24 * var(--u));
  line-height: 1.5;
  color: #3a2416;
}
.demo .sign-buttons { gap: calc(24 * var(--u)); }
.demo .sign-button {
  min-width: calc(220 * var(--u));
  padding: calc(6 * var(--u)) calc(16 * var(--u));
}
.demo .sign-label { font-size: calc(30 * var(--u)); }

/* About: Half Pint Games. The picture is a 600 x 620 design-pixel stage;
   --s is one of its pixels (the same as --u here, its own on phones). */

.about {
  scroll-margin-top: calc(88 * var(--u));
  display: grid;
  grid-template-columns: minmax(0, 1fr) calc(600 * var(--u));
  gap: calc(80 * var(--u));
  align-items: center;
  padding: calc(112 * var(--u)) calc(120 * var(--u));
  background: #3d2414;
}
.about-scene {
  --s: var(--u);
  position: relative;
  aspect-ratio: 600 / 620;
}
.about-crt, .about-floppy, .about-giorgos, .about-speech { position: absolute; }
.about-crt {
  right: calc(-10 * var(--s));
  top: calc(10 * var(--s));
  width: calc(430 * var(--s));
  height: calc(430 * var(--s));
  filter: drop-shadow(0 calc(10 * var(--s)) 0 rgba(31, 20, 14, 0.35));
}
.about-floppy {
  left: calc(-80 * var(--s));
  bottom: calc(150 * var(--s));
  width: calc(170 * var(--s));
  height: calc(170 * var(--s));
  transform: rotate(-8deg);
  filter: drop-shadow(0 calc(8 * var(--s)) 0 rgba(31, 20, 14, 0.35));
}
.about-giorgos {
  left: calc(100 * var(--s));
  bottom: 0;
  width: auto;
  height: calc(360 * var(--s));
  filter: drop-shadow(0 calc(10 * var(--s)) 0 rgba(31, 20, 14, 0.35));
}
.about-speech {
  left: calc(-60 * var(--s));
  top: calc(150 * var(--s));
  width: calc(230 * var(--s));
  font-size: calc(32 * var(--s));
  color: #8fe3f5;
}

/* AI Disclosure */

.ai-disclosure {
  scroll-margin-top: calc(88 * var(--u));
  display: flex;
  justify-content: center;
  padding: calc(104 * var(--u)) calc(120 * var(--u));
  border-top: calc(4 * var(--u)) solid #c9a04a;
}
.ai-disclosure .text-column {
  max-width: calc(820 * var(--u));
  gap: calc(22 * var(--u));
}
.ai-disclosure .eyebrow { color: #c4572e; }
.ai-disclosure h2 {
  font-size: calc(48 * var(--u));
  line-height: 1.1;
  color: #1f140e;
}
.ai-disclosure .text-column p:not(.eyebrow) {
  font-size: calc(22 * var(--u));
  line-height: 1.55;
  color: #3a2416;
}

/* Footer */

.site-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(16 * var(--u));
  padding: calc(28 * var(--u)) calc(40 * var(--u));
  background: #1a1310;
  border-top: calc(4 * var(--u)) solid #c9a04a;
}
.footer-name {
  font-weight: 700;
  font-size: calc(20 * var(--u));
  color: #f2f0e6;
}
.footer-name span {
  font-weight: 600;
  color: #e8c97a;
}
.footer-copyright {
  font-size: calc(18 * var(--u));
  color: #e8c97a;
}

/* Analytics consent: a small brass-rimmed panel at the bottom of the screen.
   Both answers are the same size, so saying no is as easy as saying yes. */

.consent {
  position: fixed;
  left: 50%;
  bottom: 16px;
  z-index: 60;
  box-sizing: border-box;
  width: min(560px, calc(100% - 32px));
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px 20px;
  background: #1a1310;
  border: 3px solid #c9a04a;
  border-radius: 12px;
  box-shadow: 0 12px 30px rgba(60, 30, 60, 0.45);
  font-family: "Cabin", sans-serif;
  font-weight: 600;
}
.consent[hidden] { display: none; }
.consent p {
  margin: 0;
  font-size: 17px;
  line-height: 1.45;
  color: #f2f0e6;
}
.consent-buttons {
  display: flex;
  gap: 12px;
}
.consent-buttons button {
  flex: 1;
  padding: 10px 14px;
  border: 2px solid #c9a04a;
  border-radius: 8px;
  background: #3d2414;
  color: #f2f0e6;
  font: 700 17px "Cabin", sans-serif;
  cursor: pointer;
}
.consent-buttons button:hover { color: #ffdb73; }
.cookie-settings {
  margin-left: 12px;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}
.cookie-settings:hover { color: #ffdb73; }

/* Phones and small tablets: the sections stack, in normal pixels. */

@media (max-width: 899px) {
  .page { --u: 1px; }

  .eyebrow { font-size: 15px; }
  .text-column { gap: 16px; }
  .text-column h2 { font-size: clamp(32px, 8.5vw, 48px); }
  .text-column p:not(.eyebrow) { font-size: 18px; }

  /* Without JavaScript the links wrap under the name; with it, they open
     from a Menu button. */
  .site-header {
    height: auto;
    flex-wrap: wrap;
    gap: 8px 20px;
    padding: 10px 16px;
  }
  .brand { gap: 10px; font-size: 19px; }
  .brand img { width: 38px; height: 38px; }
  .site-nav { flex-wrap: wrap; gap: 6px 18px; }
  .site-nav a { font-size: 17px; }
  .js .site-header {
    height: 60px;
    flex-wrap: nowrap;
    padding-top: 0;
    padding-bottom: 0;
  }
  .js .menu-button {
    display: block;
    padding: 6px 14px;
    border: 2px solid #c9a04a;
    border-radius: 8px;
    background: none;
    color: #f2f0e6;
    font: 700 17px "Cabin", sans-serif;
    cursor: pointer;
  }
  .js .site-nav { display: none; }
  .js .menu-open .site-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px 0;
    background: #1a1310;
    border-bottom: 4px solid #c9a04a;
  }
  .js .menu-open .site-nav a { padding: 12px 20px; font-size: 19px; }

  .story, .demo, .about, .ai-disclosure { scroll-margin-top: 64px; }

  /* A slimmer frame, so both buttons fit side by side on a 360 px phone. */
  .sign-buttons, .demo .sign-buttons {
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
  }
  .sign-button, .demo .sign-button {
    min-width: 130px;
    padding: 2px 8px;
    border-width: 14px;
    border-image-width: 14px;
  }
  .sign-label, .demo .sign-label { font-size: 22px; }
  .sign-note { font-size: 13px; }

  /* Hero: the pair stands in the middle of the room, on a stage 3:4 tall and
     at most 560 px wide (--sw), and the title sits under the picture. */
  .hero {
    height: auto;
    background: none;
  }
  .hero-scene {
    --sw: min(100cqw, 560px);
    position: relative;
    height: calc(var(--sw) * 4 / 3);
    background: url("images/brewery.jpg") center / cover;
  }
  .hero-yiannos, .hero-giorgos { bottom: 16.7%; }
  .hero-yiannos {
    left: calc(50% - var(--sw) * 0.47);
    height: calc(var(--sw) * 0.7);
  }
  .hero-giorgos {
    left: calc(50% - var(--sw) * 0.03);
    height: calc(var(--sw) * 0.58);
  }
  .hero-speech-yiannos, .hero-speech-giorgos { font-size: max(18px, calc(var(--sw) * 0.055)); }
  .hero-speech-yiannos {
    left: calc(50% - var(--sw) * 0.48);
    top: 6%;
    width: calc(var(--sw) * 0.6);
  }
  .hero-speech-giorgos {
    left: calc(50% - var(--sw) * 0.08);
    top: 19%;
    width: calc(var(--sw) * 0.56);
  }
  .hero-band {
    position: static;
    height: auto;
    flex-direction: column;
    gap: 24px;
    padding: 28px 20px 36px;
    background: #1a1310;
    text-align: center;
  }
  .hero-title { gap: 10px; max-width: 560px; }
  .hero-title h1 {
    font-size: clamp(40px, 12vw, 80px);
    -webkit-text-stroke: 8px #000;
  }
  .hero-title p { font-size: 18px; }

  .story {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
    padding: 64px 20px;
  }
  .story-photo {
    width: min(300px, 80%);
    justify-self: center;
  }

  .competition {
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 36px;
    padding: 56px 20px 24px;
  }
  .competition-text {
    position: static;
    width: auto;
    gap: 16px;
  }
  .competition h2 {
    font-size: clamp(34px, 9vw, 52px);
    -webkit-text-stroke: 6px #000;
  }
  .competition-text p:not(.eyebrow) { font-size: 18px; }
  .priests {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 8px;
  }
  .priest {
    position: static;
    flex: 0 1 50%;
    min-width: 0;
  }
  .priest-name { font-size: 18px; text-align: center; }
  .priest .speech, .priest-profitios .speech, .priest-varellios .speech {
    width: auto;
    margin-bottom: 8px;
    font-size: 19px;
  }
  .priest-profitios img { height: clamp(220px, 58vw, 380px); }
  .priest-varellios img { height: clamp(205px, 54vw, 353px); }

  .controls {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
    padding: 64px 20px;
  }
  .controls-wheel {
    width: min(300px, 80%);
    justify-self: center;
  }

  .demo {
    gap: 24px;
    padding: 72px 20px;
  }
  .demo-logo { width: 88px; }
  .demo h2 { font-size: clamp(34px, 9vw, 56px); }
  .demo > p { font-size: 18px; }

  .about {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
    padding: 64px 20px;
  }
  .about-scene {
    container-type: inline-size;
    --s: calc(100cqw / 600);
    width: min(86%, 460px);
    justify-self: center;
  }
  .about-speech { font-size: max(16px, calc(32 * var(--s))); }

  .ai-disclosure { padding: 64px 20px; }
  .ai-disclosure .text-column { gap: 16px; }
  .ai-disclosure h2 { font-size: clamp(28px, 7.5vw, 40px); }
  .ai-disclosure .text-column p:not(.eyebrow) { font-size: 18px; }

  .site-footer {
    flex-direction: column;
    gap: 6px;
    padding: 24px 20px;
    text-align: center;
  }
  .footer-name { font-size: 17px; }
  .footer-copyright { font-size: 15px; }
}