@font-face {
  font-family:Bricolage;
  src:url('/assets/bricolage-grotesque-latin-wght-normal-DLoelf7F.woff2') format('woff2');
  font-display:swap;
}

* {
  box-sizing:border-box;
}

body {
  margin:0;
  background:#fffaf3;
  color:#1d1a17;
  font:16px/1.5 Bricolage,system-ui,sans-serif;
}

.topbar,main>section,footer {
  width:min(1160px,calc(100% - 40px));
  margin:auto;
}

.topbar {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:20px 0;
}

.brand,nav a,footer a {
  color:inherit;
  text-decoration:none;
}

.brand {
  display:flex;
  align-items:center;
  gap:9px;
  font-weight:800;
  font-size:20px;
}

.brand img {
  border-radius:10px;
}

nav {
  display:flex;
  gap:22px;
  font-size:14px;
  font-weight:650;
}

nav a:hover,footer a:hover {
  color:#c2410c;
}

.hero {
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:70px;
  align-items:center;
  padding:74px 0 96px;
}

.hero h1 {
  max-width:680px;
  margin:0;
  font-size:clamp(42px,6vw,78px);
  line-height:.98;
  letter-spacing:-.055em;
}

.lede {
  max-width:560px;
  margin:26px 0;
  font-size:20px;
  color:#5c5146;
}

.fine {
  margin:15px 0 0;
  color:#786d63;
  font-size:13px;
}

.hero-media {
  padding:14px;
  border:1px solid #eadccf;
  border-radius:28px;
  background:#fff;
  box-shadow:12px 18px 0 #f0dfcd;
}

.hero-media video {
  display:block;
  width:100%;
  max-height:560px;
  object-fit:cover;
  border-radius:18px;
  background:#211d1a;
}

.hero-media p {
  margin:12px 4px 0;
  color:#786d63;
  font-size:12px;
}

.button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:48px;
  border:0;
  border-radius:999px;
  padding:0 22px;
  font:inherit;
  font-weight:800;
  cursor:pointer;
}

.primary {
  background:#f97316;
  color:#22150e;
}

.primary:hover {
  background:#fb923c;
}

.secondary {
  border:1px solid #29231f;
  background:#fff;
  color:#29231f;
}

.workbench {
  padding:56px 0 68px;
}

.section-heading {
  max-width:620px;
  margin-bottom:28px;
}

.section-heading h2,.faq h2 {
  margin:0;
  font-size:clamp(30px,4vw,48px);
  line-height:1.05;
  letter-spacing:-.04em;
}

.section-heading p {
  color:#6b5f54;
}

.workbench form {
  max-width:760px;
  padding:24px;
  border:1px solid #eadccf;
  border-radius:24px;
  background:#fff;
  box-shadow:0 16px 50px #44291412;
}

.mode-switch {
  display:flex;
  gap:4px;
  margin-bottom:22px;
  padding:4px;
  border-radius:999px;
  background:#f6eee5;
}

.mode-switch button {
  flex:1;
  min-height:40px;
  border:0;
  border-radius:999px;
  background:transparent;
  color:#6b5f54;
  font:inherit;
  font-weight:700;
  cursor:pointer;
}

.mode-switch button.active {
  background:#fff;
  box-shadow:0 1px 3px #2d1b0d24;
  color:#221b17;
}

.photo-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}

.upload-card {
  display:grid;
  gap:5px;
  min-height:150px;
  align-content:center;
  padding:18px;
  border:1.5px dashed #c9b6a5;
  border-radius:18px;
  background:#fffaf5;
  cursor:pointer;
}

.upload-card:hover {
  border-color:#f97316;
  background:#fff7ed;
}

.upload-card input {
  position:absolute;
  width:1px;
  height:1px;
  opacity:0;
}

.upload-title {
  font-size:17px;
  font-weight:800;
}

.upload-help,small {
  color:#786d63;
  font-size:12px;
}

.preview-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
  margin-top:14px;
}

.preview-grid img {
  width:100%;
  max-height:170px;
  object-fit:cover;
  border-radius:14px;
  background:#f2e7db;
}

.fields {
  display:grid;
  gap:16px;
  margin-top:22px;
}

.fields label {
  display:grid;
  gap:7px;
  font-weight:750;
}

.fields input,.fields textarea {
  width:100%;
  border:1px solid #d9cabe;
  border-radius:12px;
  padding:13px 14px;
  background:#fff;
  font:inherit;
}

.fields textarea {
  min-height:96px;
  resize:vertical;
}

.fields input:focus,.fields textarea:focus {
  outline:3px solid #f9731633;
  border-color:#f97316;
}

.settings {
  display:flex;
  flex-wrap:wrap;
  gap:8px 18px;
  margin:20px 0;
  padding:14px 16px;
  border-radius:14px;
  background:#fff7ed;
  color:#6b5f54;
  font-size:13px;
}

.settings strong {
  color:#221b17;
}

.submit {
  width:100%;
  margin-top:4px;
}

.status {
  min-height:24px;
  margin:12px 0 0;
  color:#9a3412;
  font-size:14px;
}

.status.ok {
  color:#166534;
}

.result {
  max-width:760px;
  margin-top:22px;
  padding:18px;
  border-radius:18px;
  background:#211d1a;
  color:#fff;
}

.result video {
  display:block;
  width:min(100%,420px);
  max-height:540px;
  margin:auto;
  border-radius:12px;
}

.result a {
  display:block;
  width:max-content;
  margin:14px auto 0;
  color:#fdba74;
}

.credits {
  display:flex;
  align-items:center;
  gap:14px;
  max-width:760px;
  margin-top:18px;
  padding:14px 16px;
  border:1px solid #eadccf;
  border-radius:14px;
  background:#fff;
}

.credits span {
  color:#786d63;
  font-size:13px;
}

.credits strong {
  margin-right:auto;
}

.faq {
  padding:20px 0 80px;
  max-width:820px;
}

.faq details {
  padding:18px 0;
  border-bottom:1px solid #eadccf;
}

.faq summary {
  font-weight:750;
  cursor:pointer;
}

.faq p {
  max-width:650px;
  color:#6b5f54;
}

footer {
  display:flex;
  justify-content:space-between;
  padding:22px 0 32px;
  border-top:1px solid #eadccf;
  color:#786d63;
  font-size:13px;
}

@media(max-width:760px) {
  .topbar,main>section,footer {
    width:min(100% - 28px,600px);
  }
  .topbar {
    padding:14px 0;
  }
  nav {
    gap:12px;
    font-size:12px;
  }
  .hero {
    grid-template-columns:1fr;
    gap:34px;
    padding:48px 0 64px;
  }
  .hero h1 {
    font-size:clamp(40px,13vw,62px);
  }
  .hero-media {
    box-shadow:7px 10px 0 #f0dfcd;
  }
  .workbench {
    padding-top:34px;
  }
  .photo-grid,.preview-grid {
    grid-template-columns: 1fr;
  }
  .credits {
    flex-wrap:wrap;
  }
  .credits strong {
    margin-right:auto;
  }
  .credits .button {
    width:100%;
  }
  footer {
    gap:10px;
    flex-wrap:wrap;
  }
}

.topbar nav button {
  border: 0;
  padding: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: 650;
  cursor: pointer;
}

.topbar nav button:hover {
  color: #c2410c;
}

[hidden] {
  display: none !important;
}

.upload-card:focus-within {
  outline: 3px solid #c2410c;
  outline-offset: 3px;
}

.button:disabled {
  opacity: .55;
  cursor: default;
}

.button {
  text-decoration: none;
}

.hero-media video {
  object-fit: contain;
}