/* ===========================================================
   Questionnaire page — Japan Ikigai Trip
   The Mystery Trip Questionnaire, embedded from Tally so the URL,
   the analytics and the brand all stay on japanikigaitrip.com.
   Palette: paper ground, espresso bar, one butter accent. A form page
   earns its keep by being calm, so nothing here competes with the form.
   2026-09-10
   =========================================================== */
:root{
  --espresso:#341517;--paper:#FDFCF8;--greige:#CFCABF;--butter:#FFDD87;
  --sky:#B1E0FF;--spark:#F03617;--royal:#285697;
  --ink-soft:#3f2e2f;--ink-hair:rgba(52,21,23,.24);
  --paper-soft:rgba(253,252,248,.82);--paper-hair:rgba(253,252,248,.26);
  --serif:"Instrument Serif",Georgia,serif;--display:"Oswald","Arial Narrow",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;--body:"Hanken Grotesk","General Sans",system-ui,sans-serif;
}
*,*::before,*::after{box-sizing:border-box;border-radius:0}
body{margin:0;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;background:var(--paper);color:var(--espresso);font-family:var(--body);font-size:.95rem;line-height:1.62}
body > *{flex-shrink:0}
body > .wrap{width:100%}
img{max-width:100%;display:block}
a{color:inherit}
.wrap{max-width:56rem;margin:0 auto;padding:0 1.5rem}

/* ── the bar carries the mark and nothing else: this page is the destination,
      so there is no navigation to wander off into ── */
.bar{background:var(--espresso);color:var(--paper)}
.bar__in{max-width:56rem;margin:0 auto;padding:.9rem 1.5rem;display:flex;align-items:center;justify-content:space-between;gap:1rem}
.bar__brand{display:flex;align-items:center;gap:.7rem;text-decoration:none}
.bar__brand img{height:1.6rem;width:auto;filter:brightness(0) invert(1)}
.bar__brand span{font:600 .72rem/1 var(--mono);letter-spacing:.18em;text-transform:uppercase}
.bar__back{font:600 .62rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--paper-soft);text-decoration:none}
.bar__back:hover{color:var(--butter)}

/* ── the form gets the page. Everyone here has already clicked "Design my
      trip", and Tally's own first screen carries the title and the welcome,
      so anything above the form would be said twice. ── */
.formwrap{margin:clamp(1.5rem,3vw,2.5rem) 0 clamp(1.5rem,3vw,2.5rem)}
/* the Tally iframe grows itself; this is only the placeholder for the mockup */
.tally-slot{min-height:36rem;display:grid;place-items:center;text-align:center;padding:3rem 1.5rem;
  border:1px dashed var(--ink-hair);
  background:repeating-linear-gradient(135deg,rgba(52,21,23,.03) 0 12px,transparent 12px 24px)}
.tally-slot p{margin:0 0 .5rem;font:600 .72rem/1.6 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft)}
.tally-slot small{font-family:var(--mono);font-size:.66rem;letter-spacing:.06em;color:var(--ink-soft);opacity:.8;max-width:34rem;display:block;text-transform:none;line-height:1.7}

/* ── the way out, quiet and after the form, for anyone who stalls ── */
.aside{margin-top:auto;border-top:1px solid var(--ink-hair);padding:1.3rem 0 clamp(2rem,4vw,3rem);
  font-size:.92rem;color:var(--ink-soft)}
.aside a{font-weight:700;text-decoration:underline;text-underline-offset:.2em}

/* ── footer: the legal minimum, nothing to click away with ── */
.foot{background:var(--espresso);color:var(--paper-soft);padding:1.6rem 0}
.foot__in{max-width:56rem;margin:0 auto;padding:0 1.5rem;display:flex;flex-wrap:wrap;gap:.6rem 1.4rem;justify-content:space-between;
  font:600 .6rem/1.6 var(--mono);letter-spacing:.12em;text-transform:uppercase}
.foot a{text-decoration:none}
.foot a:hover{color:var(--butter)}

/* build note, for the mockup only — delete when the page is built */
.note{background:var(--sky);border-top:2px solid var(--espresso);border-bottom:2px solid var(--espresso);
  padding:1.4rem 0;font-size:.9rem}
.note h2{font:600 .68rem/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase;margin:0 0 .6rem}
.note ul{margin:0;padding-left:1.1rem}
.note li{margin:.35rem 0}
.note code{font-family:var(--mono);font-size:.85em;background:rgba(52,21,23,.08);padding:.1em .35em}