:root {
  --bg: #19150e;
  --panel: #282015;
  --light: #fbb12c;
  --ink: #fff7e8;
  --soft: #e7d5b7;
  --line: #fbb12c60;
}
.word .jackaroo-logo {
  width: clamp(130px, 33vw, 185px);
  height: auto;
  border-radius: 0;
}
.intro {
  background: linear-gradient(135deg, #ffc452, #fbb12c);
  color: #211606;
}
.intro .tag, .intro .lead { color: #39260d; }
.intro .btn { border-color: #21160680; color: #211606; }
.intro .primary { background: #211606; border-color: #211606; color: #fff7e8; }
.intro a:focus-visible { outline-color: #211606; }
.tile h2 { color: var(--light); }

.detail { width: min(1060px, calc(100% - 36px)); }
.showcase { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 4vw, 46px); align-items: center; padding: clamp(20px, 4vw, 46px); }
.board-photo { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 17px; box-shadow: 0 12px 30px #45270845; }
.order-panel { max-width: 700px; margin-inline: auto; padding: clamp(20px, 4vw, 40px); scroll-margin-top: 18px; }
#board-order, #board-order label { display: grid; gap: 8px; }
#board-order { gap: 16px; }
#board-order input:not([type=checkbox]), #board-order textarea { width: 100%; padding: 12px; border: 1px solid var(--line); border-radius: 9px; background: var(--bg); color: var(--ink); font: inherit; }
#board-order textarea { resize: vertical; }
#board-order :is(input,textarea):focus-visible { outline: 2px solid var(--light); outline-offset: 2px; }
#board-order .photo-option { display: flex; align-items: center; }
#board-order input[type=checkbox] { accent-color: var(--light); inline-size: 18px; block-size: 18px; flex: none; }
#board-order .primary { justify-self: start; background: var(--light); border-color: var(--light); color: #211606; }
@media (max-width: 700px) {
  .showcase { grid-template-columns: 1fr; }
  .board-photo { order: -1; aspect-ratio: 5 / 4; }
}