/* LowPoly Pad: soft and muted, from the colours of the videos themselves: warm off-white, deep brown, dusty maroon,
   sand and blush. A tight clean sans for everything, an italic serif for the words that matter (like the videos'
   captions), and slow low-poly shapes drifting in the background. */
@font-face { font-family: 'Inter Tight'; font-weight: 400; src: url('/fonts/it-400.woff2') format('woff2'); }
@font-face { font-family: 'Inter Tight'; font-weight: 500; src: url('/fonts/it-500.woff2') format('woff2'); }
@font-face { font-family: 'Inter Tight'; font-weight: 600; src: url('/fonts/it-600.woff2') format('woff2'); }
@font-face { font-family: 'Inter Tight'; font-weight: 700; src: url('/fonts/it-700.woff2') format('woff2'); }
@font-face { font-family: 'Instrument Serif'; font-weight: 400; font-style: italic; src: url('/fonts/is-400-italic.woff2') format('woff2'); }
@font-face { font-family: 'Instrument Serif'; font-weight: 400; src: url('/fonts/is-400.woff2') format('woff2'); }

:root {
  --bg: #f7f1ea; --bg-2: #f0e6da; --card: #fffbf6; --line: #eadccd; --line-2: #ddc9b6;
  --ink: #2a1814; --muted: #7b6558; --dim: #a8968a;
  --maroon: #76342f; --maroon-2: #5c2622; --brick: #a2483a; --tan: #b68f56; --sand: #d9c09a; --blush: #ebc7bd; --wood: #7d5839;
  --accent: var(--maroon); --accent-ink: #fff7f2;
  --sans: "Inter Tight", Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  --serif: "Instrument Serif", Georgia, "Times New Roman", serif;
  --soft: 0 1px 2px rgba(42, 24, 20, 0.05), 0 12px 32px rgba(42, 24, 20, 0.07);
  --lift: 0 1px 2px rgba(42, 24, 20, 0.06), 0 24px 60px rgba(42, 24, 20, 0.12);
  /* names older pages still use */
  --panel: var(--card); --panel-2: var(--bg-2); --body: var(--sans); --display: var(--sans);
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { font: 17px/1.55 var(--sans); color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; }
a { color: inherit; }
img, video, iframe { display: block; max-width: 100%; }
h1, h2, h3 { font-family: var(--sans); font-weight: 700; letter-spacing: -0.035em; line-height: 1; margin: 0; }
h1 { font-size: clamp(44px, 6.6vw, 88px); }
h2 { font-size: clamp(32px, 4.2vw, 54px); }
h3 { font-size: 21px; letter-spacing: -0.02em; line-height: 1.15; }
/* the words that matter: an italic serif in the videos' warm colours */
h1 em, h2 em, h3 em, .serif { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -0.01em; }
h1 em, h2 em { background: linear-gradient(100deg, var(--maroon) 0%, var(--brick) 45%, var(--tan) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: 0.06em; }
p { margin: 0; }
.wrap { width: min(1160px, calc(100% - 40px)); margin: 0 auto; }
.label { font: 600 12px/1 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.caption { color: var(--muted); }
.pill { display: inline-block; background: var(--blush); color: var(--maroon-2); font: 600 11px/1 var(--sans); letter-spacing: 0.06em; text-transform: uppercase; padding: 5px 8px 4px; border-radius: 999px; }
.center { text-align: center; }

/* the header */
.top { position: sticky; top: 0; z-index: 20; background: rgba(247, 241, 234, 0.82); backdrop-filter: blur(14px); }
.top .wrap { display: flex; align-items: center; gap: 24px; height: 68px; }
.logo { display: flex; align-items: center; gap: 8px; text-decoration: none; font: italic 400 29px/1 var(--serif); letter-spacing: -0.01em; color: var(--ink); }
.logo svg { width: 26px; height: 26px; }
.nav { display: flex; gap: 26px; margin: 0 auto; }
.nav a { text-decoration: none; color: var(--muted); font-size: 15px; font-weight: 500; display: flex; align-items: center; gap: 6px; }
.nav a:hover, .nav a.on { color: var(--ink); }
.top .right { display: flex; align-items: center; gap: 10px; }
.credits { font-size: 14px; color: var(--muted); white-space: nowrap; text-decoration: none; }
.credits b { color: var(--ink); font-weight: 600; }

/* buttons: deep brown, soft and round; maroon for the main action */
.btn { --bg: var(--ink); --fg: #fff7f2; appearance: none; border: 0; background: var(--bg); color: var(--fg); font: 600 15px/1 var(--sans);
  padding: 13px 18px 12px; border-radius: 12px; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.15) inset, 0 6px 16px rgba(42, 24, 20, 0.18);
  cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px; transition: transform 0.12s, box-shadow 0.12s, background 0.12s; white-space: nowrap; }
.btn:hover { transform: translateY(-1px); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.15) inset, 0 10px 22px rgba(42, 24, 20, 0.22); }
.btn:active { transform: translateY(1px); }
.btn.go { --bg: var(--maroon); }
.btn.go:hover { --bg: var(--maroon-2); }
.btn.big { font-size: 17px; padding: 17px 24px 16px; border-radius: 14px; }
.btn.light, .btn.ghost { --bg: var(--card); --fg: var(--ink); box-shadow: 0 0 0 1px var(--line-2) inset; }
.btn.small { font-size: 14px; padding: 9px 13px 8px; border-radius: 10px; }
.btn[disabled] { opacity: 0.45; pointer-events: none; }
.link { background: none; border: 0; padding: 0; font: inherit; color: var(--muted); text-decoration: underline; cursor: pointer; }
.more { color: var(--maroon); text-decoration: none; font-weight: 600; font-size: 15px; }
.more:hover { text-decoration: underline; }

/* inputs */
.field { display: block; width: 100%; font: 400 17px/1.4 var(--sans); color: var(--ink); background: var(--card); border: 1px solid var(--line-2); border-radius: 12px; padding: 14px 15px; outline: none; }
.field::placeholder { color: var(--dim); }
.field:focus { border-color: var(--maroon); box-shadow: 0 0 0 4px rgba(118, 52, 47, 0.12); }
textarea.field { resize: vertical; min-height: 104px; }
select.field { appearance: none; }

/* blocks */
.section { padding: 100px 0; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--soft); }
.grid { display: grid; gap: 18px; }
.grid.three { grid-template-columns: repeat(3, 1fr); }
.grid.four { grid-template-columns: repeat(4, 1fr); }
.head-row { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 30px; }
@media (max-width: 960px) { .grid.three, .grid.four { grid-template-columns: repeat(2, 1fr); } .section { padding: 72px 0; } }
/* phones and small tablets: the logo and sign-in on one row, the pages as a row of tabs under it (nothing hidden) */
@media (max-width: 960px) {
  .top .wrap { flex-wrap: wrap; height: auto; column-gap: 12px; row-gap: 0; }
  .logo { height: 54px; }
  .top .right { margin-left: auto; }
  .top .right .btn { min-height: 40px; display: inline-flex; align-items: center; }
  .nav { order: 3; flex: 1 0 100%; margin: 0 0 6px; gap: 4px; overflow-x: auto; scrollbar-width: none; }
  .nav::-webkit-scrollbar { display: none; }
  .nav a { padding: 9px 12px; border-radius: 999px; white-space: nowrap; min-height: 36px; }
  .nav a:first-child { margin-left: -12px; }
  .nav a.on { background: rgba(60, 30, 20, 0.06); }
}
@media (max-width: 600px) { .grid.three, .grid.four { grid-template-columns: 1fr; } .credits { display: none; } .head-row { flex-direction: column; align-items: start; } .btn.small { min-height: 40px; } }

/* a phone holding a video */
.phone { width: 100%; aspect-ratio: 9 / 16; border-radius: 28px; overflow: hidden; background: #1c1210; border: 7px solid var(--card); box-shadow: var(--lift), 0 0 0 1px var(--line); position: relative; }
.phone iframe, .phone video { width: 100%; height: 100%; border: 0; object-fit: cover; }
.phone .wait { position: absolute; inset: 0; display: grid; place-items: center; color: var(--dim); text-align: center; padding: 24px; }

/* character cards: portraits on a soft blush backdrop */
.chars { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
.char { background: linear-gradient(180deg, #f3e3d8, #ead2c4); border-radius: 18px; overflow: hidden; border: 1px solid var(--line); cursor: pointer; color: var(--ink); text-decoration: none; position: relative; display: block; transition: transform 0.15s, box-shadow 0.15s; }
.char:hover { transform: translateY(-2px); box-shadow: var(--soft); }
.char img { aspect-ratio: 4 / 5; width: 100%; object-fit: cover; }
.char span { display: block; padding: 10px 12px 12px; font: 600 15px/1 var(--sans); background: var(--card); border-top: 1px solid var(--line); }
.char.on { border-color: var(--maroon); box-shadow: 0 0 0 2px var(--maroon); }
.char .coin { position: absolute; top: 10px; right: 10px; }

/* the build log */
.log { display: flex; flex-direction: column; gap: 12px; max-height: 70vh; overflow: auto; padding-right: 4px; }
.log .say { font-size: 16px; }
.log .step { color: var(--muted); font-size: 14px; display: flex; gap: 9px; align-items: baseline; }
.log .step::before { content: ''; width: 7px; height: 7px; border-radius: 2px; background: var(--tan); flex: none; transform: translateY(-1px); }
.log .step.err::before { background: var(--brick); }
.log img { border-radius: 12px; border: 1px solid var(--line); cursor: zoom-in; }
.log .end { padding: 14px 16px; border-radius: 14px; background: var(--bg-2); border: 1px solid var(--line-2); }
.bar { height: 8px; border-radius: 6px; background: var(--bg-2); overflow: hidden; }
.bar i { display: block; height: 100%; width: 0; background: var(--maroon); transition: width 0.2s; }

/* modals and notices */
.modal { position: fixed; inset: 0; z-index: 50; background: rgba(42, 24, 20, 0.35); backdrop-filter: blur(4px); display: grid; place-items: center; padding: 16px; }
.modal .card { width: min(440px, 100%); padding: 26px; box-shadow: var(--lift); }
.modal h3 { margin-bottom: 14px; }
.wallets { display: grid; gap: 10px; margin-top: 14px; }
.wallets button { display: flex; align-items: center; gap: 12px; width: 100%; justify-content: flex-start; }
.wallets img { width: 26px; height: 26px; border-radius: 6px; }
.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 60; background: var(--ink); color: #fff7f2; padding: 12px 18px; border-radius: 12px; font-size: 15px; box-shadow: var(--lift); max-width: calc(100% - 32px); }
.toast.bad { background: var(--maroon); }
.foot { padding: 40px 0 56px; color: var(--muted); font-size: 14px; border-top: 1px solid var(--line); }
.foot .wrap { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.hide { display: none !important; }

/* the drifting low-poly shapes behind a section (js/polyfield.js) */
.poly-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.poly-bg canvas { width: 100% !important; height: 100% !important; }

/* the loading screen, on the first page of a visit (html.boot, set in each page's head): the logo's three faces fly in
   and put it together while the page loads, then it all fades away (js/site.js) */
html.boot body::before, html.boot body::after { position: fixed; z-index: 1000; pointer-events: none; transition: opacity 0.4s; }
html.boot body::before { content: ''; inset: 0; background-color: var(--bg); background-repeat: no-repeat; background-size: 84px 84px;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M6.94 2 3.44 4.66 10.45 11.21 28.61 15.22z' fill='%23dda086'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M3.44 4.66 3.39 27.68 6.05 30 10.45 11.21z' fill='%235e362c'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M10.45 11.21 6.05 30 28.61 16.82 28.61 15.22z' fill='%23b25b47'/%3E%3C/svg%3E");
  background-position: calc(50% + 0px) calc(46% + 0px), calc(50% + 0px) calc(46% + 0px), calc(50% + 0px) calc(46% + 0px);
  animation: boot-build 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) both, boot-breathe 1.6s ease-in-out 0.8s infinite; }
html.boot body::after { content: 'LowPoly'; left: 0; right: 0; top: calc(46% + 66px); text-align: center; font: italic 400 34px/1 var(--serif); letter-spacing: -0.01em; color: var(--ink); animation: boot-word 0.5s ease 0.45s both; }
html.boot.booted body::before, html.boot.booted body::after { opacity: 0; }
@keyframes boot-build {
  from { background-position: calc(50% + 0px) calc(46% - 70px), calc(50% - 60px) calc(46% + 40px), calc(50% + 60px) calc(46% + 40px); }
  to { background-position: calc(50% + 0px) calc(46% + 0px), calc(50% + 0px) calc(46% + 0px), calc(50% + 0px) calc(46% + 0px); }
}
@keyframes boot-breathe { 50% { background-size: 90px 90px; } }
@keyframes boot-word { from { opacity: 0; transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) { html.boot body::before, html.boot body::after { animation: none; } }

/* the account button in the header: their picture and name */
.me-btn { display: inline-flex; align-items: center; gap: 7px; max-width: 180px; }
.me-btn img { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; margin: -4px 0 -4px -5px; }
.me-btn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }