/* Live design: E · fall Swiss poster with wind-driven leaf motion (see designs/ for the alternatives)
   Built on A's layout. Seeded draw: pumpkin + cranberry + oat, a leaf block (oak, not maple,
   so it doesn't read as the Canadian flag), Bricolage Grotesque throughout. */

:root {
  --ink: #2a1a12;
  --bone: #efe4d0;      /* oat */
  --oat-deep: #e3d3b6;
  --blue: #9b1d3a;      /* cranberry takes the old blue role */
  --orange: #d65a1a;    /* pumpkin */
  --gold: #f2c14e;
  --muted: #6b5747;

  --yes: #c4501a;
  --layer: #c99a3e;
  --coat: #4a3426;
  --borderline: #ebbf98;
  --no: var(--blue);
  --verdict: var(--orange);

  /* meter.js reads these */
  --garment: var(--blue);
  --garment-dark: #6e1027;
  --shirt: var(--bone);
  --jacket: #7a5a3a;
  --puffer: #4a3426;
  --outline: var(--ink);
  --accent: var(--gold);
}

body[data-verdict="yes"] { --verdict: var(--orange); }
body[data-verdict="layer"] { --verdict: #b3832a; }
body[data-verdict="coat"] { --verdict: var(--coat); }
body[data-verdict="borderline"] { --verdict: #b3832a; }
body[data-verdict="no"] { --verdict: var(--blue); }

[hidden] { display: none !important; }
* { box-sizing: border-box; }
html, body { margin: 0; }

body {
  background: var(--bone);
  color: var(--ink);
  font: 500 17px/1.4 "Bricolage Grotesque", "Helvetica Neue", Arial, sans-serif;
  font-variation-settings: "wdth" 100;
  -webkit-text-size-adjust: 100%;
  counter-reset: section;
}

a { color: inherit; }

.page {
  max-width: 1180px;
  margin: 0 auto;
  padding: 20px 32px 40px;
}

/* ---------- masthead: title beside a small oak-leaf block ---------- */

.masthead {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  align-items: end;
  margin: 22px 0 26px;
}

.masthead .title { margin: 0; }

/* --wind (mph) is set on <body> by app.js after each lookup. */
:root { --wind: 4; }

.leaf-block {
  --sway-amp: min(calc(1.5deg + var(--wind) * 0.5deg), 14deg);
  --sway-dur: max(0.9s, calc(4.2s - var(--wind) * 0.13s));
  width: clamp(150px, 19vw, 210px);
  aspect-ratio: 1;
  background: var(--coat);
  color: var(--bone);
  position: relative;
  overflow: hidden;
}

.leaf {
  position: absolute;
  background: var(--orange);
  -webkit-mask: url(oak.svg) center / contain no-repeat;
  mask: url(oak.svg) center / contain no-repeat;
  transform-origin: 50% 96%; /* the stem */
}

.leaf.one {
  width: 80%; height: 80%; left: 28%; top: 16%;
  transform: rotate(-24deg);
  animation: sway var(--sway-dur) ease-in-out infinite alternate;
}

.leaf.two {
  width: 54%; height: 54%; left: -8%; top: 44%;
  background: var(--gold);
  transform: rotate(30deg);
  animation: sway calc(var(--sway-dur) * 1.3) ease-in-out -0.8s infinite alternate;
}

/* Lands on the pile once per page load. */
.leaf.fall {
  width: 34%; height: 34%; left: 34%; top: 54%;
  background: var(--blue);
  transform: rotate(-72deg);
  animation: fall 3.4s ease-in-out 0.4s both;
}

@keyframes sway {
  from { rotate: calc(var(--sway-amp) * -1); }
  to { rotate: var(--sway-amp); }
}

@keyframes fall {
  0%   { translate: 20% -280%; rotate: 60deg; }
  20%  { translate: 90% -210%; rotate: 110deg; }
  40%  { translate: -40% -140%; rotate: 30deg; }
  60%  { translate: 60% -70%; rotate: 100deg; }
  80%  { translate: -10% -20%; rotate: 50deg; }
  100% { translate: 0 0; rotate: 0deg; }
}

@media (prefers-reduced-motion: reduce) {
  .leaf { animation: none !important; }
}

.tagline {
  margin: 10px 0 0;
  font-weight: 700;
  font-size: clamp(1rem, 1.8vw, 1.3rem);
  color: var(--muted);
}

/* A small wind readout so the motion has a visible reason. */
.leaf-block::before {
  counter-reset: wind var(--wind);
  content: "Wind " counter(wind) " mph";
  position: absolute;
  top: 8px;
  left: 10px;
  z-index: 1;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0;
  transition: opacity 0.4s;
}

body[data-verdict] .leaf-block::before { opacity: 0.85; }

.top {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 3px solid var(--ink);
  padding-bottom: 8px;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.title {
  font-weight: 800;
  font-variation-settings: "wdth" 88, "opsz" 96;
  font-size: clamp(3rem, 7.6vw, 6.6rem);
  line-height: 0.88;
  letter-spacing: -0.025em;
  color: var(--blue);
  margin: 28px 0 32px;
}

/* ---------- lookup ---------- */

.lookup {
  display: flex;
  align-items: end;
  flex-wrap: wrap;
  gap: 12px 16px;
  border-top: 3px solid var(--ink);
  padding-top: 12px;
}

.lbl {
  flex-basis: 100%;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.lookup input {
  font: inherit;
  font-weight: 800;
  font-size: 3rem;
  letter-spacing: 0.04em;
  width: 4.2em;
  padding: 0 0 2px;
  border: 0;
  border-bottom: 5px solid var(--ink);
  border-radius: 0;
  background: transparent;
  color: var(--ink);
}

.lookup input::placeholder { color: rgba(17, 17, 17, 0.2); }
.lookup input:focus { outline: none; border-bottom-color: var(--blue); }

.btn {
  font: inherit;
  font-weight: 700;
  min-height: 48px;
  padding: 0 20px;
  border: 3px solid var(--ink);
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  text-decoration: none;
}

.btn.primary { background: var(--ink); color: var(--bone); }
.btn.primary:hover { background: var(--blue); border-color: var(--blue); }
.btn.ghost:hover { background: var(--ink); color: var(--bone); }
.btn.small { font-size: 0.9rem; min-height: 44px; }
.btn:disabled { opacity: 0.5; cursor: progress; }

.lookup-msg { min-height: 1.4em; margin: 10px 0 0; font-weight: 700; }
.lookup-msg.error { color: var(--orange); }

/* ---------- verdict ---------- */

.result { margin-top: 28px; }

.place {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 700;
  border-top: 3px solid var(--ink);
  padding-top: 8px;
}

.verdict {
  display: grid;
  grid-template-columns: 1fr minmax(160px, 240px);
  align-items: end;
  gap: 24px;
}

.answer {
  margin: 0;
  font-weight: 800;
  font-variation-settings: "wdth" 85, "opsz" 96;
  font-size: clamp(6rem, 25vw, 18rem);
  line-height: 0.8;
  letter-spacing: -0.035em;
  color: var(--verdict);
  padding: 12px 0 8px;
}

.meter { margin: 0 0 12px; }
.meter-svg { width: 100%; height: auto; overflow: visible; }
.meter #meter { position: relative; padding: 22%; aspect-ratio: 1; display: grid; place-items: center; }
.meter #meter::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--orange);
  -webkit-mask: url(oak.svg) center / contain no-repeat;
  mask: url(oak.svg) center / contain no-repeat;
  transform: rotate(-10deg);
}
.meter #meter > svg { position: relative; }
body[data-verdict="no"] .meter #meter::before, body[data-verdict="borderline"] .meter #meter::before { background: var(--gold); }
body[data-verdict="coat"] .meter #meter::before { background: var(--layer); }
.meter figcaption { font-size: 0.8rem; font-weight: 700; margin-top: 6px; text-transform: uppercase; letter-spacing: 0.03em; }

.reason {
  font-size: clamp(1.25rem, 2.6vw, 1.9rem);
  line-height: 1.2;
  font-weight: 500;
  max-width: 28em;
  margin: 8px 0 28px;
}

.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin: 0 0 36px;
}

.stats div { border-top: 3px solid var(--ink); padding-top: 6px; }
.stats dt { font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
.stats dd { margin: 0; font-size: 2.6rem; font-weight: 800; letter-spacing: -0.03em; }

/* ---------- numbered sections ---------- */

.num {
  counter-increment: section;
  display: flex;
  gap: 16px;
  font-size: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-top: 3px solid var(--ink);
  padding-top: 8px;
  margin: 0 0 14px;
}

.num::before { content: counter(section, decimal-leading-zero); color: var(--orange); }

.block { margin-bottom: 28px; }

.strip {
  list-style: none;
  padding: 0;
  margin: 0 0 10px;
  display: grid;
  gap: 2px;
}

.strip-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
.strip-7 { grid-template-columns: repeat(7, minmax(0, 1fr)); }

.strip li {
  background: var(--c);
  color: #fff;
  padding: 10px 8px 8px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-height: 72px;
  justify-content: space-between;
}

.strip li[data-key="borderline"], .strip li[data-key="layer"] { color: var(--ink); }
.strip .h { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; }
.strip .t { font-size: 1.35rem; font-weight: 800; letter-spacing: -0.03em; }

.legend { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 0.8rem; font-weight: 700; text-transform: uppercase; }
.legend span::before {
  content: "";
  display: inline-block;
  width: 12px;
  height: 12px;
  background: var(--c);
  margin-right: 6px;
  vertical-align: -1px;
}

/* ---------- week ---------- */

.week { margin-top: 40px; }

.week-head {
  display: flex;
  align-items: flex-end;
  gap: 24px;
  margin-bottom: 16px;
}

.week-count {
  font-weight: 800;
  font-size: clamp(5rem, 14vw, 9rem);
  line-height: 0.8;
  letter-spacing: -0.06em;
  color: var(--orange);
}

.week-count small { font-size: 0.4em; color: var(--ink); letter-spacing: -0.02em; }

.week-head p { margin: 0; font-size: clamp(1.2rem, 2.4vw, 1.8rem); line-height: 1.15; max-width: 16em; }

/* ---------- shop ---------- */

.shop { margin-top: 40px; }

.hero-pick {
  background: var(--blue);
  color: var(--bone);
  padding: 28px 32px 32px;
  margin-bottom: 40px;
}

.hero-pick .kicker { margin: 0 0 8px; font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
.hero-pick h2 { margin: 0 0 8px; font-size: clamp(2rem, 5vw, 3.6rem); font-weight: 800; line-height: 0.95; letter-spacing: -0.04em; }
.hero-pick p { margin: 0 0 20px; font-size: 1.15rem; max-width: 30em; }
.hero-pick .btn { border-color: var(--bone); color: var(--bone); }
.hero-pick .btn.primary { background: var(--gold); border-color: var(--gold); color: var(--ink); }
.hero-pick .btn.primary:hover { background: var(--bone); border-color: var(--bone); }

.shop-links { display: flex; flex-wrap: wrap; gap: 10px; }

.personas {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px 24px;
}

.personas li { border-top: 3px solid var(--ink); padding-top: 10px; display: flex; flex-direction: column; }
.personas .name { font-size: 1.6rem; font-weight: 800; letter-spacing: -0.03em; }
.personas .blurb { color: var(--muted); margin: 4px 0 14px; flex: 1; }
.personas .shop-links > * { flex: 1 1 auto; }

.chip {
  font-weight: 700;
  font-size: 0.95rem;
  min-height: 44px;
  padding: 0 14px;
  border: 2px solid var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  white-space: nowrap;
}

.chip:hover { background: var(--ink); color: var(--bone); }

.footer {
  margin-top: 56px;
  border-top: 3px solid var(--ink);
  padding-top: 10px;
  font-size: 0.82rem;
  color: var(--muted);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.footer p { margin: 0; }

/* ---------- phones ---------- */

@media (max-width: 640px) {
  .page { padding: 14px 16px 32px; }
  .masthead { gap: 12px; margin: 14px 0 16px; }
  .leaf-block { width: 76px; }
  .leaf-block::before { display: none; }
  .tagline { font-size: 0.9rem; margin-top: 6px; }
  .title { font-size: 11.5vw; }
  .lookup { gap: 10px; }
  .lookup input { font-size: 2.4rem; flex: 1 1 100%; min-width: 0; width: auto; }
  .lookup .btn { flex: 1; }
  .result { margin-top: 20px; }
  .verdict { grid-template-columns: 1fr 96px; gap: 12px; }
  .answer { font-size: 27vw; }
  .meter figcaption { font-size: 0.68rem; }
  .meter #meter { padding: 8px; }
  .reason { font-size: 1.2rem; margin-bottom: 20px; }
  .stats { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .stats dd { font-size: 2rem; }
  .strip-12 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .strip li { min-height: 60px; padding: 8px 5px 6px; }
  .strip .t { font-size: 1.1rem; }
  .strip-7 .h { font-size: 0.66rem; }
  .strip-7 .t { font-size: 0.95rem; }
  .week-head { gap: 14px; }
  .hero-pick { padding: 20px 18px 22px; margin-bottom: 32px; }
  .shop-links > * { flex: 1; }
  .hero-pick .btn { padding: 0 10px; }
  .personas { grid-template-columns: 1fr; gap: 22px; }
  .footer { grid-template-columns: 1fr; gap: 10px; }
}

@media (min-width: 641px) and (max-width: 900px) {
  .personas { grid-template-columns: repeat(2, 1fr); }
}