/* Increfarma's website: a classic small-game site (a hero over the live farm, a short about, screenshots, the maker,
   the store badges) plus plain support, privacy and press kit pages. Every value is a token here. */
:root {
  --font: ui-rounded, 'SF Pro Rounded', 'Hiragino Maru Gothic ProN', 'Arial Rounded MT Bold', 'Nunito', 'PingFang SC', 'Noto Sans SC', system-ui, sans-serif;

  --c-ink: #243d2d;
  --c-muted: #5c715c;
  --c-paper: #fff9e9;
  --c-paper-glass: rgba(255, 249, 233, 0.94);
  --c-meadow: #eef4d4;
  --c-line: #d2d8ba;
  --c-leaf: #315c3d;
  --c-leaf-dark: #23452d;
  --c-on-leaf: #f6efd6;
  --c-on-leaf-muted: rgba(246, 239, 214, 0.72);
  --c-accent: #f4c74d;
  --c-accent-dark: #dba835;
  --c-grass: #5fae3a;
  --c-white: #ffffff;
  --c-badge: #111111;
  --c-badge-edge: #000000;
  --c-badge-shadow: rgba(0, 0, 0, 0.35);
  --c-phone: #1d2a21;
  --c-soft-shade: rgba(33, 56, 27, 0.18);
  --c-backdrop: rgba(18, 28, 20, 0.92);
  --c-todo: #fff0b3;
  --c-todo-edge: #c99a12;
  --c-play-a: #34a853;
  --c-play-b: #4285f4;
  --c-play-c: #fbbc04;
  --c-play-d: #ea4335;
  /* The colour the far grass hazes toward (src/main.ts reads it). */
  --c-sky-low: #dff3fd;

  /* The words over the farm: a paper wash on the left (wide windows) or top and bottom (tall ones). */
  --wash-wide: linear-gradient(90deg, rgba(255, 249, 233, 0.97), rgba(255, 249, 233, 0.92) 28%, rgba(255, 249, 233, 0.55) 38%, transparent 52%);
  --wash-tall: linear-gradient(180deg, rgba(255, 249, 233, 0.92), rgba(255, 249, 233, 0.62) 22%, transparent 36%, transparent 72%, rgba(255, 249, 233, 0.78) 86%, rgba(255, 249, 233, 0.94));
  --wash-foot: linear-gradient(180deg, transparent, var(--c-paper));

  --sh-paper: 0 18px 55px var(--c-soft-shade);
  --sh-badge: 0 4px 0 var(--c-badge-edge), 0 8px 16px var(--c-badge-shadow);
  --sh-badge-down: 0 1px 0 var(--c-badge-edge), 0 3px 6px var(--c-badge-shadow);
  --sh-shot: 0 14px 30px var(--c-soft-shade);
  --sh-pop: 0 4px 0 var(--c-accent-dark);
  --sh-floater: 0 10px 12px rgba(33, 56, 27, 0.22);
  --logo-shadow: drop-shadow(0 0.6vmin 0 rgba(60, 25, 5, 0.35));

  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);

  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 72px;
  --sp-9: 112px;
  --gutter: max(var(--sp-4), 4vw);
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-phone: 26px;
  --r-pill: 999px;
  --line: 1px;
  --bw: 3px;
  --phone-edge: 5px;
  --tiny: 1px;

  --fs-tiny: 10px;
  --fs-xs: 12px;
  --fs-sm: 14px;
  --fs-md: 16px;
  --fs-lg: 19px;
  --fs-xl: 22px;
  --fs-body: clamp(16px, 1.2vw, 18px);
  --fs-h1: clamp(30px, 4vw, 48px);
  --fs-h2: clamp(26px, 3.2vw, 40px);
  --fs-h3: clamp(18px, 1.6vw, 22px);
  --fs-tagline: clamp(26px, 3vw, 44px);
  --fs-tagline-tall: clamp(22px, 6.4vw, 30px);
  --fs-brand: 18px;
  --fw-medium: 500;
  --fw-bold: 800;
  --fw-black: 900;
  --lh-body: 1.65;
  --tracking: 0.14em;
  --tight: -0.035em;

  --col: 1080px;
  --col-text: 720px;
  --top-h: 72px;
  --hero-min: 560px;
  --hero-col: min(38vw, 540px);
  --logo-w: min(30vw, 420px, 52vh);
  --logo-w-tall: min(62vw, 300px, 32vh);
  --icon-badge: 26px;
  --promo-w-tall: 84vw;
  /* Patch's height in the maker section; his stage is his whole drawing canvas (640 by 800, him 683 tall), and the
     studio's logo stands a little shorter than him beside it. */
  --figure-h: clamp(170px, 19vw, 250px);
  --app-icon: 112px;
  --tap: 44px;
  --chevron: 14px;
  --t-fast: 160ms;
  --t-fade: 700ms;
  --t-still: 1600ms;
  /* A still's whole time on screen: shown, then fading out (src/main.ts STILL_SECONDS and --t-still). */
  --t-drift: 9s;
  --poster-wide: url('scene/posters/summer-wide-0.webp');
  --poster-tall: url('scene/posters/summer-tall-0.webp');
  --z-farm: 1;
  --z-shade: 2;
  --z-words: 3;
  --z-top: 4;
}

* { box-sizing: border-box; }
html { text-size-adjust: 100%; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; color: var(--c-ink); background: var(--c-paper); font-family: var(--font); font-size: var(--fs-body); line-height: var(--lh-body); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; }
a { color: var(--c-leaf); text-underline-offset: 0.18em; }
button, a, select { -webkit-tap-highlight-color: transparent; }
button { font: inherit; color: inherit; cursor: pointer; }
a:focus-visible, button:focus-visible, select:focus-visible, summary:focus-visible { outline: var(--bw) solid var(--c-accent); outline-offset: var(--sp-1); }
h1, h2, h3 { line-height: 1.1; letter-spacing: var(--tight); font-weight: var(--fw-black); text-wrap: balance; }
h2 { font-size: var(--fs-h2); margin: 0 0 var(--sp-5); }
p { margin: 0 0 var(--sp-4); }
.sr { position: absolute; width: var(--tiny); height: var(--tiny); overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: var(--sp-4); top: calc(-1 * var(--top-h)); z-index: var(--z-top); background: var(--c-accent); padding: var(--sp-2) var(--sp-4); border-radius: var(--r-pill); }
.skip:focus { top: var(--sp-4); }
.col { width: min(var(--col), 100% - 2 * var(--gutter)); margin-inline: auto; }

/* ---------------------------------------------------------------------------------------------- the top bar */

.top { position: relative; z-index: var(--z-top); display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); height: calc(var(--top-h) + var(--safe-top)); padding: var(--safe-top) var(--gutter) 0; }
.home .top { position: absolute; inset: 0 0 auto; justify-content: flex-end; }
/* The hero's logo names the page, so its top bar is only the links, on a strip of paper over the grass. */
.home .brand { display: none; }
.home .links { background: var(--c-paper-glass); border: var(--line) solid var(--c-line); border-radius: var(--r-pill); padding: var(--sp-1) var(--sp-1) var(--sp-1) var(--sp-5); box-shadow: var(--sh-paper); }
.home .lang select { border-color: transparent; }
.brand { color: var(--c-ink); text-decoration: none; font-weight: var(--fw-black); font-size: var(--fs-brand); letter-spacing: -0.05em; }
.brand span { font-weight: var(--fw-medium); }
.links { display: flex; align-items: center; gap: var(--sp-5); font-size: var(--fs-sm); font-weight: var(--fw-bold); }
.links a { color: var(--c-ink); text-decoration: none; }
.links a:hover { text-decoration: underline; }
.lang select { font: inherit; color: var(--c-ink); background: var(--c-paper-glass); border: var(--line) solid var(--c-line); border-radius: var(--r-pill); padding: var(--sp-1) var(--sp-3); }

/* ---------------------------------------------------------------------------------------------- the hero */

.hero { position: relative; height: 100svh; min-height: var(--hero-min); overflow: hidden; background: var(--c-grass) var(--poster-wide) center / cover no-repeat; }
/* The farm's stills: two layers that fade into each other (src/main.ts Stills); the hero's own picture is for no script. */
.stills, .stills i { position: absolute; inset: 0; }
.stills i { background: center / cover no-repeat; opacity: 0; transition: opacity var(--t-still); }
.stills i.on { opacity: 1; }
.flat .stills i.drift { animation: drift var(--t-drift) linear forwards; }
@keyframes drift { from { scale: 1; } to { scale: 1.05; } }
#farm { position: absolute; inset: 0; width: 100%; height: 100%; z-index: var(--z-farm); opacity: 0; touch-action: pan-y pinch-zoom; }
.ready #farm { opacity: 1; }
.ready:not(.flat) .stills { visibility: hidden; }
.point #farm { cursor: pointer; }
/* The variant's film (video.html): its poster is its first frame, so it covers the hero from the start. */
.film { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: var(--z-farm); pointer-events: none; }
.shade { position: absolute; inset: 0; z-index: var(--z-shade); pointer-events: none; background: var(--wash-wide); }
.hero::after { content: ''; position: absolute; inset: auto 0 0; height: var(--sp-7); z-index: var(--z-shade); background: var(--wash-foot); pointer-events: none; }
.hero-in { position: absolute; inset: calc(var(--top-h) + var(--safe-top)) 0 0; z-index: var(--z-words); padding: 0 var(--gutter) var(--sp-7); display: flex; flex-direction: column; justify-content: center; gap: var(--sp-6); pointer-events: none; }
.hero-in a, .hero-in select, .hero-head, .hero-get { pointer-events: auto; }
.hero-head, .hero-get { width: var(--hero-col); }
.title { margin: 0; line-height: 0; }
.tagline { font-size: var(--fs-tagline); font-weight: var(--fw-black); letter-spacing: -0.045em; line-height: 1.08; margin: var(--sp-4) 0 0; max-width: 12em; text-wrap: balance; }
.lead { color: var(--c-muted); margin: var(--sp-4) 0 0; max-width: 28em; }
.soon { font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--c-muted); margin: var(--sp-3) 0 0; }
.more { position: absolute; left: 50%; bottom: var(--sp-5); translate: -50% 0; width: var(--tap); height: var(--tap); display: grid; place-items: center; border-radius: 50%; background: var(--c-paper-glass); border: var(--line) solid var(--c-line); }
.more i { width: var(--chevron); height: var(--chevron); border-right: var(--bw) solid var(--c-ink); border-bottom: var(--bw) solid var(--c-ink); rotate: 45deg; translate: 0 -25%; }

/* The logo, put together from its pieces (src/logo.ts). */
.logo { position: relative; display: block; width: var(--logo-w); aspect-ratio: 1 / 0.72; margin: calc(var(--logo-w) * -0.72 * 0.11) 0 calc(var(--logo-w) * -0.72 * 0.03); }
.logo .pc, .logo .word img { position: absolute; display: block; height: auto; opacity: 0; }
.logo .word { position: absolute; aspect-ratio: 3.27559; }
.logo .flip { transform: scaleX(-1); }
.logo .sign { aspect-ratio: 3.35; filter: var(--logo-shadow); transform-origin: 50% 100%; }
.logo .board2 { filter: var(--logo-shadow); transform-origin: 50% 100%; }
.logo .wheat, .logo .stalk { transform-origin: 50% 100%; }
.logo .leaves { transform-origin: 50% 90%; }
.logo .seedling { transform-origin: 50% 85%; }
.logo .letter, .logo .seam { transform-origin: 50% 85%; }

/* Store buttons. Swap for Apple's and Google's official badge artwork before launch. */
.stores { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.store { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-5) var(--sp-2) var(--sp-3); border-radius: var(--r-md); background: var(--c-badge); color: var(--c-white); text-decoration: none; line-height: 1.15; box-shadow: var(--sh-badge); transition: translate var(--t-fast) ease-out, box-shadow var(--t-fast) ease-out; }
a.store:hover { translate: 0 -2px; }
a.store:active { translate: 0 3px; box-shadow: var(--sh-badge-down); }
.store small { display: block; font-size: var(--fs-xs); font-weight: var(--fw-bold); opacity: 0.85; }
.store b { display: block; font-size: var(--fs-lg); font-weight: var(--fw-black); }
.phone-icon { width: var(--icon-badge); height: var(--icon-badge); fill: none; stroke: currentColor; stroke-width: 2; }
.store .play { display: block; width: calc(var(--icon-badge) * 0.8); height: var(--icon-badge); margin-left: var(--sp-1); background: conic-gradient(from 210deg at 30% 50%, var(--c-play-a) 0 60deg, var(--c-play-c) 60deg 120deg, var(--c-play-d) 120deg 240deg, var(--c-play-b) 240deg); clip-path: polygon(6% 4%, 96% 50%, 6% 96%); border-radius: var(--r-sm); }
.android .store[data-store='googleplay'] { order: -1; }

/* Tall windows (phones): the logo at the top, the badges at the bottom, the farm between them. */
@media not all and (min-width: 760px) and (min-aspect-ratio: 21/20) {
  .shade { background: var(--wash-tall); }
  .hero { background-image: var(--poster-tall); }
  .hero-in { justify-content: flex-start; align-items: center; text-align: center; padding-top: var(--sp-2); padding-bottom: calc(var(--sp-6) + var(--safe-bottom)); gap: var(--sp-4); }
  .hero-head, .hero-get { width: 100%; display: flex; flex-direction: column; align-items: center; }
  .logo { --logo-w: var(--logo-w-tall); }
  .tagline { font-size: var(--fs-tagline-tall); margin-top: var(--sp-2); }
  .lead, .more, .wide-only { display: none; }
  /* Both store buttons fit side by side on a phone. */
  .stores { justify-content: center; flex-wrap: nowrap; gap: var(--sp-2); }
  .store { padding: var(--sp-2) var(--sp-3) var(--sp-2) var(--sp-2); gap: var(--sp-1); }
  .store b { font-size: var(--fs-md); }
  .store small { font-size: var(--fs-tiny); }
  /* The buttons sink to the bottom, leaving the farm open between them and the logo. */
  .hero-get { margin-top: auto; }
  .links { gap: var(--sp-4); }
}
@media (max-width: 340px) {
  .store b { font-size: var(--fs-sm); }
}

/* ---------------------------------------------------------------------------------------------- the sections */

main section { padding: var(--sp-9) 0; }
.about { position: relative; overflow: hidden; }
.about .col { position: relative; z-index: 1; max-width: var(--col-text); text-align: center; }
/* The game's goods drifting in the margins (src/floaters.ts): each bobs and turns on a time of its own. */
.floater { position: absolute; width: var(--size); height: auto; translate: -50% -50%; rotate: var(--tilt); pointer-events: none; opacity: 0; filter: drop-shadow(var(--sh-floater)); transition: opacity var(--t-fade); animation: float var(--float) ease-in-out var(--late) infinite alternate; }
.floater.in { opacity: 1; }
@keyframes float { from { translate: -50% calc(-50% - var(--bob)); rotate: var(--tilt); } to { translate: -50% calc(-50% + var(--bob)); rotate: var(--sway); } }
.about p { font-size: var(--fs-lg); color: var(--c-muted); }
.screens { background: var(--c-meadow); }
.screens h2 { text-align: center; }
/* The gallery: directed shots of the game (art/promo, tools/promo.ts), 4:3, three to a row on wide windows. */
.promos { list-style: none; margin: 0 auto; padding: var(--sp-2) 0 var(--sp-4); width: min(var(--col), 100% - 2 * var(--gutter)); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-6) var(--sp-5); }
.promos li { text-align: center; }
.promos button { display: block; width: 100%; padding: 0; border: 0; border-radius: var(--r-lg); overflow: hidden; background: var(--c-paper); box-shadow: var(--sh-shot); transition: translate var(--t-fast) ease-out; }
.promos button:hover { translate: 0 -4px; }
.promos img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.promos p { font-size: var(--fs-md); font-weight: var(--fw-bold); line-height: 1.35; margin: var(--sp-3) 0 0; }
/* Each shot is framed three ways (tools/promo.ts); the page's <picture> picks by width, and the card takes that shape. */
@media (max-width: 1100px) { .promos img { aspect-ratio: 1; } }
@media (max-width: 600px) { .promos img { aspect-ratio: 4 / 5; } }
.maker-in { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--sp-5); }
.maker p { color: var(--c-muted); }
.patch { position: relative; height: calc(var(--figure-h) * 800 / 683); aspect-ratio: 640 / 800; cursor: pointer; -webkit-user-select: none; user-select: none; }
.patch-still { position: absolute; left: 21.56%; top: 14.13%; width: 63.44%; height: auto; }
.patch.alive .patch-still { display: none; }
.patch-stage { position: absolute; inset: 0; }
.patch-stage img { position: absolute; display: block; }
.patch-stage img[hidden] { display: none; }
/* A hop is a cut, not a slide: he is simply higher in that drawing. */
.patch.up .patch-stage { translate: 0 -9%; }
.patch::after { content: ''; position: absolute; left: 32%; right: 32%; bottom: 2.5%; height: 4%; border-radius: 50%; background: var(--c-soft-shade); z-index: -1; }
.patch.up::after { scale: 0.7; opacity: 0.6; }
.studio { height: calc(var(--figure-h) * 0.9); width: auto; }
.studio-link { display: block; line-height: 0; transition: translate var(--t-fast) ease-out; }
.studio-link:hover { translate: 0 -2px; }
.get { background: var(--c-meadow); text-align: center; }
.get-in { display: flex; flex-direction: column; align-items: center; }
.app-icon { width: var(--app-icon); height: var(--app-icon); border-radius: 22.4%; box-shadow: var(--sh-shot); margin-bottom: var(--sp-5); }
.get h2 { margin-bottom: 0; }
.get .soon { margin: var(--sp-2) 0 var(--sp-5); }
.get .stores { justify-content: center; }

@media not all and (min-width: 760px) and (min-aspect-ratio: 21/20) {
  main section { padding: var(--sp-8) 0; }
  .about p { font-size: var(--fs-md); }
  .promos { width: auto; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: var(--promo-w-tall); overflow-x: auto; scroll-snap-type: x mandatory; padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); gap: var(--sp-4); }
  .promos li { scroll-snap-align: start; }
  .promos p { font-size: var(--fs-sm); }
  .maker-in { grid-template-columns: 1fr 1fr; gap: var(--sp-5); text-align: center; justify-items: center; }
  .maker-text { grid-column: 1 / -1; grid-row: 2; }
}

/* ---------------------------------------------------------------------------------------------- the footer */

.foot { background: var(--c-leaf); color: var(--c-on-leaf-muted); font-size: var(--fs-sm); padding: var(--sp-7) 0 calc(var(--sp-7) + var(--safe-bottom)); }
.foot-in { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--sp-4); }
.foot-in p { margin: 0; }
.foot-links { display: flex; flex-wrap: wrap; gap: var(--sp-5); }
.foot a { color: var(--c-on-leaf); font-weight: var(--fw-bold); text-decoration: none; }
/* The legal link sits in the copyright line, as quiet as it (27 October, Adam). */
.foot a.quiet { color: inherit; font-weight: inherit; text-decoration: underline; }
.foot a:hover { text-decoration: underline; }

/* ---------------------------------------------------------------------------------------------- the screenshot viewer */

.viewer { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: var(--sp-5); border: 0; background: transparent; color: var(--c-on-leaf); }
.viewer[open] { display: grid; grid-template-columns: var(--tap) 1fr var(--tap); grid-template-rows: 1fr auto; align-items: center; justify-items: center; gap: var(--sp-3); }
.viewer::backdrop { background: var(--c-backdrop); }
.viewer img { grid-column: 2; max-height: calc(100dvh - 140px); max-width: 100%; width: auto; border-radius: var(--r-lg); }
.v-step, .v-close { width: var(--tap); height: var(--tap); border-radius: 50%; border: var(--line) solid var(--c-on-leaf-muted); background: transparent; color: var(--c-on-leaf); font-size: var(--fs-xl); line-height: 1; }
.v-close { position: absolute; top: calc(var(--sp-4) + var(--safe-top)); right: var(--sp-4); }
.v-cap { grid-column: 1 / -1; margin: 0; font-weight: var(--fw-bold); text-align: center; }

/* ---------------------------------------------------------------------------------------------- plain pages */

.page .top { border-bottom: var(--line) solid var(--c-line); }
/* A short page (the not-found page) still ends with its footer at the bottom of the window. */
body.page { min-height: 100svh; display: flex; flex-direction: column; }
body.page .doc { flex: 1; }
.doc { padding: var(--sp-8) 0 var(--sp-9); }
.doc .col { max-width: var(--col-text); }
.doc h1 { font-size: var(--fs-h1); margin: 0 0 var(--sp-3); }
.doc h2 { font-size: var(--fs-h3); margin: var(--sp-7) 0 var(--sp-3); }
.doc .intro { font-size: var(--fs-lg); color: var(--c-muted); }
.doc ul { padding-left: var(--sp-5); }
.doc li { margin-bottom: var(--sp-2); }
.doc .updated { font-size: var(--fs-sm); color: var(--c-muted); }
.faq details { border-top: var(--line) solid var(--c-line); padding: var(--sp-4) 0; }
.faq details:last-of-type { border-bottom: var(--line) solid var(--c-line); }
.faq summary { font-weight: var(--fw-bold); font-size: var(--fs-lg); cursor: pointer; list-style-position: outside; }
.faq details p { margin: var(--sp-3) 0 0; color: var(--c-muted); }
.contact { margin-top: var(--sp-7); padding: var(--sp-5); border-radius: var(--r-lg); background: var(--c-meadow); }
.contact p:last-child { margin: 0; }
.facts { display: grid; grid-template-columns: max-content 1fr; gap: var(--sp-2) var(--sp-5); margin: 0; }
.facts dt { font-weight: var(--fw-bold); }
.facts dd { margin: 0; color: var(--c-muted); }
.downloads { list-style: none; padding: 0 !important; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--sp-5); }
.downloads a { display: block; text-decoration: none; font-size: var(--fs-sm); font-weight: var(--fw-bold); }
.downloads img { display: block; width: 100%; aspect-ratio: 1; object-fit: contain; background: var(--c-meadow); border-radius: var(--r-md); margin-bottom: var(--sp-2); }
.downloads .tall img { aspect-ratio: 780 / 1688; object-fit: cover; }
/* Words Adam still has to fill in: plainly marked so none ships by accident (tools/build.ts lists them). */
.todo { background: var(--c-todo); outline: var(--line) dashed var(--c-todo-edge); border-radius: var(--r-sm); padding: 0 var(--sp-1); }

/* No live farm (no WebGL, or the scene failed): the stills stay under the words, fading from one to the next. */
.flat #farm { display: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}