/* ===== Tinkers / 4FALT.media – site styles =====
   Fonts are self-hosted (see fonts.css) — no request ever reaches Google. */

:root {
  --teal:   #2FBDB6;
  --yellow: #F4C220;
  --purple: #9B82C9;
  --coral:  #EC5A4F;

  --ink:    #2b2b2b;
  --ink-soft: #555;
  --cream:  #FBF1D6;
  --cream-deep: #F6E7BE;
  --paper:  #fffdf7;
  --line:   #ece2c4;

  --radius: 20px;
  --shadow: 0 10px 30px rgba(80, 60, 20, 0.10);
  --maxw: 1040px;

  --font-head: 'Baloo 2', system-ui, sans-serif;
  --font-body: 'Nunito', system-ui, sans-serif;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.6;
  font-size: 18px;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }

a { color: var(--coral); }

.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 24px;
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip: rect(0 0 0 0); clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

/* ===== Construction bar ===== */
.constr-bar {
  height: 32px;
  background: repeating-linear-gradient(-45deg, var(--yellow) 0 34px, var(--ink) 34px 68px);
  opacity: .9;
}

/* ===== Language switch ===== */
.lang-switch {
  position: fixed; top: 40px; right: 16px; z-index: 1000;
  display: flex; gap: 3px;
  background: rgba(255,255,255,.82); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);
  border: 1px solid var(--line); border-radius: 999px; padding: 3px;
  box-shadow: 0 5px 14px rgba(80,60,20,.14);
}
.lang-switch button {
  font-family: var(--font-head); font-weight: 800; font-size: 12px; letter-spacing: .04em;
  border: 0; background: transparent; color: var(--ink-soft);
  padding: 5px 11px; border-radius: 999px; cursor: pointer; line-height: 1;
  transition: background .15s ease, color .15s ease;
}
.lang-switch button.active { background: var(--teal); color: #fff; }

/* ===== Hero ===== */
.hero {
  position: relative;
  overflow: hidden;
  min-height: 100svh;
  display: flex; flex-direction: column; justify-content: center;
  padding-top: clamp(8px, 2vh, 28px);
  background: radial-gradient(130% 100% at 82% -10%, #fffefb 0%, var(--paper) 55%, var(--cream) 100%);
}
.hero::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 30px 30px; opacity: .3; pointer-events: none;
}
.hero-inner {
  position: relative; z-index: 2;
  max-width: 1200px; margin: 0 auto; width: 100%;
  padding: clamp(28px,4vw,56px) clamp(20px,4vw,48px) clamp(40px,5vw,68px);
  display: grid; grid-template-columns: minmax(0,0.92fr) minmax(0,1.08fr);
  align-items: start; gap: clamp(26px,4vw,56px);
}

/* Left: logo above the headline */
.logo { width: min(420px, 74vw); height: auto; display: block; margin: 0 0 26px; }
.hero h1 {
  font-family: var(--font-head); font-weight: 800;
  font-size: clamp(34px, 5vw, 60px); line-height: 1.1;
  margin: 0; color: var(--ink); text-wrap: balance;
}
.hero h1 .hl { position: relative; white-space: nowrap; }
.hero h1 .hl::after {
  content: ""; position: absolute;
  left: -4px; right: -8px; bottom: .02em; height: .17em;
  background: var(--yellow); border-radius: 6px;
  transform: rotate(-1deg); z-index: -1;
}
.hero .sub {
  font-family: var(--font-head); font-weight: 600;
  font-size: clamp(17px,2.1vw,23px); line-height: 1.4; text-wrap: pretty;
  color: var(--ink-soft); margin: 22px 0 0; max-width: 32ch;
}
.cta {
  display: inline-flex; align-items: center; gap: 11px; white-space: nowrap;
  font-family: var(--font-head); font-weight: 800;
  font-size: clamp(16px,1.9vw,20px); color: #fff; background: var(--coral);
  text-decoration: none; padding: 15px 28px; border-radius: 999px;
  box-shadow: 0 12px 26px rgba(236,90,79,.34);
  transition: transform .14s ease, filter .14s ease; margin-top: 30px;
}
.cta:hover { transform: translateY(-2px); filter: brightness(1.04); }
.cta .arrow { display:inline-block; animation: nudge 1.5s ease-in-out infinite; }
@keyframes nudge { 0%,100%{transform:translateY(0)} 50%{transform:translateY(4px)} }

/* Right: sketch + notes + hand */
.visual { position: relative; }

.sketch-card {
  position: relative;
  aspect-ratio: 460 / 412;
  background: #fffdf8;
  border: 7px solid #fff; border-radius: 14px;
  box-shadow: 0 24px 52px rgba(80,60,20,.20);
  transform: rotate(.8deg); overflow: hidden;
}
.sketch-card::after {
  content: attr(data-stamp); position: absolute; right: 14px; bottom: 10px;
  font-family: ui-monospace,'SF Mono',Menlo,monospace;
  font-size: 11px; letter-spacing: .3em; color: #c9bd98;
}
.wire { position: absolute; inset: 0; width: 100%; height: 100%; }
.wire .draw {
  fill: none; stroke: #44423c; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 1600; stroke-dashoffset: 1600;
  animation: draw 10s ease-in-out infinite;
}
.wire .thin   { stroke-width: 1.3; stroke: #79746a; }
.wire .accent { stroke: var(--teal); stroke-width: 2.4; }
@keyframes draw {
  0%{stroke-dashoffset:1600} 15%{stroke-dashoffset:0}
  88%{stroke-dashoffset:0} 100%{stroke-dashoffset:1600}
}

/* real hand (cut out), drawing over the sketch */
.hand-cut {
  position: absolute; z-index: 6;
  width: 126%; right: -29.5%; top: 0%;
  filter: drop-shadow(0 14px 16px rgba(60,45,15,.22));
  transform-origin: 12% 48%;
  animation: sketch 1.7s ease-in-out infinite;
  pointer-events: none;
}
@keyframes sketch {
  0%, 100% { transform: translateX(0) rotate(0deg); }
  25%      { transform: translateX(-5px) rotate(-.5deg); }
  75%      { transform: translateX(5px) rotate(.5deg); }
}

/* character notes over the sketch */
.notes {
  position: absolute; z-index: 9;
  top: -22px; left: -4%; right: 2%;
  display: flex; gap: clamp(7px,1vw,14px);
  pointer-events: none;
}
.note {
  position: relative; flex: 1 1 0; min-width: 0;
  padding: 11px 6px 13px; text-align: center; color: #fff;
  font-family: var(--font-head);
  box-shadow: 0 10px 18px rgba(70,50,15,.24);
  animation: pop .55s cubic-bezier(.2,1.4,.4,1) both;
}
.note::after {
  content:""; position:absolute; right:0; bottom:0; width:18px; height:18px;
  background: linear-gradient(135deg, rgba(0,0,0,.16) 0 50%, rgba(255,255,255,.30) 50%);
  box-shadow: -2px -2px 4px rgba(0,0,0,.10); border-top-left-radius: 4px;
}
.note::before {
  content:""; position:absolute; top:-10px; left:50%;
  transform: translateX(-50%) rotate(-2.5deg); width:50px; height:19px;
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(245,243,235,.82));
  box-shadow: 0 3px 5px rgba(0,0,0,.22);
  border-left: 1px solid rgba(0,0,0,.10); border-right: 1px solid rgba(0,0,0,.10);
}
.note:nth-child(1){ background: var(--teal);   transform: rotate(-3deg);  animation-delay:.10s;}
.note:nth-child(2){ background: var(--yellow); color:#6a4e00; transform: rotate(2deg); animation-delay:.22s;}
.note:nth-child(3){ background: var(--purple); transform: rotate(-1.6deg); animation-delay:.34s;}
.note:nth-child(4){ background: var(--coral);  transform: rotate(2.6deg);  animation-delay:.46s;}
@keyframes pop { 0%{opacity:0} 60%{opacity:1} 100%{opacity:1} }
.note .nm { font-weight: 800; font-size: clamp(13px,1.55vw,18px); line-height:1; margin:0 0 4px; }
.note .ro { font-weight: 700; font-size: clamp(10px,1.15vw,12.5px); line-height:1.18; margin:0; }
.note .ro .role { display:block; }
.note .ro .part { display:block; font-weight:600; opacity:.85; }

/* ===== Trailer ===== */
.trailer {
  position: relative; z-index: 2; max-width: 1000px; margin: 0 auto;
  padding: clamp(28px,5vw,56px) clamp(20px,4vw,40px) clamp(40px,6vw,72px); text-align: center;
}
.eyebrow {
  font-family: ui-monospace,'SF Mono',Menlo,monospace;
  font-size: 13px; letter-spacing:.28em; text-transform: uppercase;
  color: var(--ink-soft); margin: 0 0 10px;
}
.trailer h2 {
  font-family: var(--font-head); font-weight: 800;
  font-size: clamp(24px,3.4vw,36px); margin: 0 0 22px; color: var(--ink);
}
.video-frame {
  position: relative; aspect-ratio: 16/9; width: 100%; margin: 0 auto;
  border-radius: 18px; overflow: hidden;
  background: repeating-linear-gradient(45deg, #efe3c2 0 16px, #f4ead0 16px 32px);
  border: 4px solid #fff; box-shadow: 0 18px 40px rgba(70,50,15,.20);
  display: flex; align-items: center; justify-content: center;
}
.video-frame video, .video-frame iframe {
  position: absolute; inset: 0; width: 100%; height: 100%;
  border: 0; object-fit: cover; background: #000;
}
.video-placeholder { text-align: center; padding: 20px; }
.play-badge {
  width: clamp(62px,8vw,84px); aspect-ratio: 1; margin: 0 auto 16px;
  border-radius: 50%; background: var(--coral);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 12px 26px rgba(236,90,79,.42);
}
.play-badge::after {
  content:""; border-style: solid; border-width: 14px 0 14px 24px;
  border-color: transparent transparent transparent #fff; margin-left: 6px;
}
.video-placeholder .ph-main {
  font-family: var(--font-head); font-weight: 700;
  font-size: clamp(17px,2.2vw,21px); color: var(--ink); margin: 0 0 5px;
}
.video-placeholder .ph-sub {
  font-family: ui-monospace,'SF Mono',Menlo,monospace;
  font-size: 12.5px; color: var(--ink-soft); margin: 0;
}

/* ===== Footer ===== */
.site-footer {
  position: relative; z-index: 1;
  margin-top: 0;
  border-top: 2px dashed var(--line);
  background: var(--cream-deep);
}
.site-footer .wrap {
  padding-top: 32px; padding-bottom: 40px;
  display: flex; flex-wrap: wrap; gap: 18px 32px;
  align-items: center; justify-content: space-between;
}
.footer-brand {
  display: flex; align-items: center; gap: 13px;
  font-family: var(--font-head); font-weight: 700; font-size: 18px; color: var(--ink);
  text-decoration: none;
}
.falt-mark { height: 46px; width: auto; flex: none; }
.footer-brand small {
  display: block; font-family: var(--font-body); font-weight: 600;
  color: var(--ink-soft); font-size: 14px;
}
.footer-links {
  display: flex; flex-wrap: wrap; gap: 8px 22px;
  list-style: none; margin: 0; padding: 0;
}
.footer-links a {
  color: var(--ink-soft); text-decoration: none; font-weight: 600; font-size: 15px;
}
.footer-links a:hover { color: var(--coral); }
.footer-links a[aria-current="page"] { color: var(--coral); }

/* ===== Legal pages ===== */
.topbar {
  display: flex; align-items: center; justify-content: center;
  gap: 10px; padding: 18px 24px;
}
.topbar img { height: 46px; width: auto; }
.legal {
  background: var(--paper);
  max-width: 820px; margin: 40px auto 0;
  padding: 48px 56px; border-radius: var(--radius); box-shadow: var(--shadow);
}
.legal h1 {
  font-family: var(--font-head); font-weight: 800;
  font-size: clamp(30px, 5vw, 40px); margin: 0 0 6px; color: var(--ink);
}
.legal .lead { color: var(--ink-soft); margin: 0 0 28px; font-weight: 600; }
.legal h2 {
  font-family: var(--font-head); font-weight: 700;
  font-size: 22px; margin: 34px 0 8px; color: var(--teal);
}
.legal h2.alt2 { color: var(--purple); }
.legal h2.alt3 { color: var(--coral); }
.legal p, .legal li { color: #3a3a3a; }
.legal a { color: var(--coral); font-weight: 600; }
.legal address { font-style: normal; font-weight: 600; line-height: 1.8; }
.legal ul { padding-left: 1.2em; }
.legal li { margin: 4px 0; }
.legal .note {
  background: var(--cream); border: 1px solid var(--line); border-radius: 14px;
  padding: 14px 18px; font-size: 15px; color: var(--ink-soft); margin: 16px 0;
}
.back-link {
  display: block; width: 100%; max-width: 820px;
  margin: 26px auto 48px; padding: 0 clamp(22px, 5vw, 56px);
  font-weight: 700; text-decoration: none; color: var(--teal);
}
.back-link:hover { color: var(--coral); }

/* ===== Responsive ===== */
@media (max-width: 880px) {
  .hero { justify-content: flex-start; }
  .hero-inner { grid-template-columns: 1fr; gap: 24px; padding: clamp(22px,5vw,40px) clamp(18px,5vw,40px) clamp(34px,6vw,52px); }
  .text { text-align: center; }
  .logo { margin-left: auto; margin-right: auto; margin-bottom: 20px; }
  .hero .sub { margin-left: auto; margin-right: auto; }
  .hero h1 { font-size: clamp(30px, 8.5vw, 48px); }
  .cta { margin-top: 24px; }
  .visual { width: 100%; max-width: min(600px, 92vw); margin: 26px auto 0; }
  .notes { top: -16px; }
}
@media (max-width: 640px) {
  body { font-size: 17px; }
  .legal { padding: 32px 22px; border-radius: 16px; margin-top: 20px; }
  .site-footer .wrap { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 560px) {
  .constr-bar { height: 24px; }
  .visual { max-width: 100%; }
  .note { padding: 9px 4px 11px; }
  .note::before { width: 32px; height: 12px; top: -7px; }
  .trailer { padding-top: 24px; }
}
@media (max-width: 380px) {
  .hero h1 { font-size: 30px; }
  .note .nm { font-size: 13px; }
  .note .ro { font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .wire .draw { stroke-dashoffset: 0; animation: none; }
  .hand-cut, .note, .cta .arrow { animation: none; }
  .note { opacity: 1; }
}