/* RepCinema site styles.
   Every colour, font and spacing value is named here once, under :root.
   Pages use the names (var(--cream)), never the raw values. */

@font-face {
  font-family: 'Metropolitan Line';
  src: url(../fonts/MetropolitanLine-Regular.woff2) format('woff2');
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: 'Cabin';
  src: url(../fonts/Cabin-latin-variable.woff2) format('woff2');
  font-weight: 400 700;
  font-display: swap;
}

:root {
  /* Colours (layout 1, cream) */
  --oxblood: #441C1E;       /* header, footer, headings */
  --oxblood-hover: #7E2F33; /* link hover */
  --cream: #EFE7D4;         /* page background */
  --cream-light: #FBF6EA;   /* cards */
  --rule: #C9B9A0;          /* lines and borders */
  --muted: #D5CEB4;         /* footer text, header icon borders */
  --ink: #3A2422;           /* body text */
  --phone-frame: #2A1618;   /* screenshot frames */
  --white: #FFFFFF;

  /* Fonts */
  --font-display: 'Metropolitan Line', 'Gill Sans', sans-serif;
  --font-body: 'Cabin', 'Gill Sans', sans-serif;

  /* Spacing */
  --space-xs: 6px;
  --space-s: 12px;
  --space-m: 24px;
  --space-l: 32px;
  --space-xl: 56px;
  --gutter: 16px;           /* page edge on phones */
  --page-width: 1200px;

  /* APP SWITCH
     none     = the app is hidden everywhere (before launch)
     contents = the app is shown
     Anything marked class="app-only" follows this one setting. */
  --app-switch: contents;
}

.app-only { display: var(--app-switch); }

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--cream);
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--oxblood);
  line-height: 1.2;
}

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

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

.wrap {
  max-width: var(--page-width);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

body { display: flex; flex-direction: column; }
main { flex: 1; }

/* Header (every page) */
.site-header { position: sticky; top: 0; z-index: 10; background: var(--oxblood); color: var(--cream); }
.site-header__inner {
  max-width: var(--page-width);
  margin: 0 auto;
  padding: 28px var(--space-m);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.site-header__logo img { display: block; width: 84px; height: auto; }
.site-header__right { display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-s); }
.site-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-xs) 30px;
  font-family: var(--font-display);
  font-size: 15px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.site-nav a { color: var(--cream); text-decoration: none; padding: 10px 0; }
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--white); text-decoration: underline; text-underline-offset: 6px; }
.socials { display: flex; gap: 10px; }
.socials a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--muted);
  border-radius: 50%;
  color: var(--cream);
}
.socials a:hover { background: var(--oxblood-hover); color: var(--cream); }

/* Footer (every page) */
.site-footer { background: var(--oxblood); color: var(--muted); }
.site-footer__inner {
  max-width: var(--page-width);
  margin: 0 auto;
  padding: 28px var(--space-m);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 28px;
  font-size: 14px;
}
.site-footer__inner img { display: block; width: 34px; height: auto; }
.site-footer a { color: var(--muted); }
.site-footer a:hover { color: var(--cream); }

/* Front page */
.home {
  width: 100%;
  max-width: var(--page-width);
  margin: 0 auto;
  padding: 72px var(--space-m) 64px;
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}
.home__intro { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 18px; }
.home__intro h1 { margin: 0; font-size: clamp(38px, 5vw, 64px); line-height: 1.05; letter-spacing: 0.02em; max-width: 900px; }
.home__intro p { margin: 0; font-size: 19px; line-height: 1.6; max-width: 600px; }

/* The boxes and the QR row share one grid shape, so each code sits under its box.
   With the app hidden, the spreadsheet box and Patreon code centre on their own. */
.two-up {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 560px));
  justify-content: center;
  gap: var(--space-l);
}
.box {
  background: var(--cream-light);
  border: 1px solid var(--rule);
  padding: 36px 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-m);
  text-align: center;
}
.box h2 { margin: 0; font-size: 28px; letter-spacing: 0.14em; }
.box p { margin: 0; line-height: 1.6; max-width: 420px; }
.shots { display: flex; gap: 20px; justify-content: center; width: 100%; }
.shots .zoom { display: block; width: 46%; max-width: 210px; cursor: zoom-in; }
.shots img {
  display: block;
  width: 100%;
  height: auto;
  border: 6px solid var(--phone-frame);
  border-radius: 22px;
  box-shadow: 0 8px 24px rgba(68, 28, 30, 0.15);
}
.zoom { position: relative; }
.zoom::after {
  content: "";
  position: absolute;
  right: 10px;
  bottom: 10px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--oxblood) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23EFE7D4' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6'/%3E%3Cpath d='M15 15l5 5M10.5 8v5M8 10.5h5'/%3E%3C/svg%3E") center / 18px no-repeat;
  opacity: 0.9;
}
.zoom:hover::after, .zoom:focus-visible::after { opacity: 1; }

/* Enlarged image (js/zoom.js) */
.lightbox { padding: 0; border: 0; background: transparent; max-width: 100vw; max-height: 100vh; overflow: visible; }
.lightbox::backdrop { background: rgba(42, 22, 24, 0.88); }
.lightbox img { display: block; max-width: 92vw; max-height: 88vh; width: auto; height: auto; border: 6px solid var(--phone-frame); border-radius: 22px; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4); }
.lightbox__close {
  position: fixed;
  top: 16px;
  right: 16px;
  width: 44px;
  height: 44px;
  border: 1px solid var(--muted);
  border-radius: 50%;
  background: var(--oxblood);
  color: var(--cream);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}

.sheet-shot { display: block; width: 100%; height: auto; border: 1px solid var(--rule); box-shadow: 0 8px 24px rgba(68, 28, 30, 0.15); }
.button {
  display: inline-block;
  background: var(--oxblood);
  color: var(--cream);
  text-decoration: none;
  padding: 15px 26px;
  font-family: var(--font-display);
  font-size: 15px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.button:hover { background: var(--oxblood-hover); color: var(--cream); }

.qr-row { border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding: 40px 0; align-items: start; justify-items: center; }
.qr-link { display: flex; flex-direction: column; align-items: center; gap: 16px; text-decoration: none; }
.qr-box { position: relative; display: block; width: 150px; height: 150px; padding: 10px; box-sizing: content-box; background: var(--white); border: 1px solid var(--rule); }
.qr-box img { display: block; width: 150px; height: 150px; }
.qr-box__mark {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 36px;
  height: 36px;
  transform: translate(-50%, -50%);
  background: var(--white);
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.qr-cap {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-size: 16px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* Phones: no QR codes; each caption becomes a button. Screenshots stay as thumbnails */
@media (max-width: 640px) {
  .site-header__inner, .site-footer__inner { padding-left: var(--gutter); padding-right: var(--gutter); }
  .site-header__inner { padding-top: 14px; padding-bottom: 14px; gap: 8px; }
  .site-header__logo img { width: 44px; }
  .site-header__right { gap: 6px; }
  .socials a { width: 34px; height: 34px; }
  .site-nav { gap: 4px 20px; font-size: 13px; letter-spacing: 0.12em; }
  .home { padding: 48px var(--gutter); gap: 40px; }
  .box { padding: 28px 20px; }
  .box h2 { font-size: 24px; letter-spacing: 0.1em; }
  .button { padding: 15px 20px; letter-spacing: 0.1em; }
  .qr-box { display: none; }
  .shots { gap: 12px; }
  .qr-cap { border: 2px solid currentColor; padding: 14px 18px; font-size: 14px; letter-spacing: 0.1em; }
  /* One column, each button straight after its own box: app, Google Play, sheet, Patreon */
  .two-up, .qr-row { display: contents; }
  .home__intro { order: 0; }
  .box--app { order: 1; }
  .qr-link--play { order: 2; }
  .box--sheet { order: 3; }
  .qr-link--patreon { order: 4; }
  .home { gap: var(--space-m); }
  .home__intro { margin-bottom: var(--space-s); }
  .qr-link--play { margin-bottom: var(--space-m); }
}

/* The narrowest phones: keep the frozen header to one row beside the logo */
@media (max-width: 360px) {
  .site-nav { gap: 2px 12px; font-size: 12px; letter-spacing: 0.06em; }
}

/* The sheet screenshot enlarges without the phone frame */
.sheet-zoom { display: block; width: 100%; cursor: zoom-in; }
.lightbox img.flat { border: 1px solid var(--rule); border-radius: 0; background: var(--white); }
/* On phones the sheet opens at its real size and scrolls sideways, so the text is readable */
.lightbox:has(img.flat) { max-width: 100vw; max-height: 100vh; overflow: auto; margin: auto; }
.lightbox img.flat { max-width: none; max-height: none; width: 966px; }