:root {
  --cork: #95613d;
  --paper: #efe3bc;
  --paper-light: #faf1d2;
  --ink: #35291d;
  --muted: #71624d;
  --green: #456e52;
  --brown: #4b301f;
  --line: rgba(91, 68, 40, 0.28);
  --shadow: 9px 12px 0 rgba(54, 31, 16, 0.15), 0 22px 45px rgba(42, 24, 12, 0.2);
}

* { box-sizing: border-box; }
body {
  margin: 0;
  min-width: 320px;
  color: var(--ink);
  background-color: var(--cork);
  background-image:
    radial-gradient(circle at 13px 19px, rgba(48, 29, 17, 0.18) 0 1px, transparent 1.7px),
    radial-gradient(circle at 43px 47px, rgba(247, 214, 161, 0.12) 0 1.1px, transparent 1.9px),
    repeating-linear-gradient(19deg, rgba(255, 226, 179, 0.018) 0 2px, transparent 2px 7px),
    linear-gradient(135deg, #ad7b51, #885737 56%, #9b6844);
  background-size: 82px 64px, 91px 73px, auto, auto;
  font: 16px/1.5 Inter, ui-sans-serif, system-ui, sans-serif;
}

a { color: inherit; }
h1, h2, h3, p { margin-top: 0; }
main { width: min(1180px, calc(100% - 30px)); margin: 0 auto; padding: 46px 0 88px; }
.eyebrow { margin: 0 0 10px; color: #8a5628; font-size: .67rem; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }

.tcg-hero { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(330px, .72fr); align-items: center; gap: 35px; min-height: 610px; }
.hero-sheet, .rules-sheet {
  position: relative;
  padding: clamp(35px, 5vw, 62px);
  border: 1px solid var(--line);
  border-radius: 4px 15px 5px 11px;
  background:
    linear-gradient(90deg, transparent 0 43px, rgba(154, 76, 59, .075) 44px, transparent 45px),
    repeating-linear-gradient(0deg, transparent 0 35px, rgba(82, 72, 54, .07) 36px),
    linear-gradient(145deg, #f4e8c1, #dac695);
  box-shadow: var(--shadow);
}
.hero-sheet::before, .feature-card::before, .rules-sheet::before {
  position: absolute; top: -10px; left: 50%; width: 88px; height: 21px;
  background: rgba(225, 202, 152, .84); content: ""; transform: translateX(-50%) rotate(-2deg);
}
h1 { margin-bottom: 21px; font: 700 clamp(3rem, 6.2vw, 5.5rem)/.96 Georgia, serif; letter-spacing: -.05em; }
h1 em { color: var(--green); font-weight: 500; }
.hero-copy { max-width: 690px; color: #5f513e; font: italic 1.02rem/1.7 Georgia, serif; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.button { display: inline-flex; align-items: center; min-height: 44px; padding: 11px 16px; border-radius: 4px 9px 4px 8px; font-size: .76rem; font-weight: 900; text-decoration: none; }
.button-primary { color: #fbf0d4; background: #34583f; }
.button-muted { color: #756850; background: rgba(255, 249, 221, .45); border: 1px dashed rgba(85, 65, 40, .35); }
.launch-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin: 30px 0 0; }
.launch-strip div { padding: 11px 12px; border-left: 3px solid var(--green); background: rgba(255, 250, 224, .35); }
.launch-strip dt { color: #806c4f; font-size: .58rem; font-weight: 900; text-transform: uppercase; }
.launch-strip dd { margin: 3px 0 0; font: 700 .92rem Georgia, serif; }

.color-board { position: relative; padding: 42px 27px 30px; border: 11px solid #52341f; border-radius: 7px; background: #8b5c39; box-shadow: 0 22px 48px rgba(43, 24, 12, .28); transform: rotate(.35deg); }
.board-pin { position: absolute; top: 13px; left: 50%; width: 13px; height: 13px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #f2af80, #a64c31 65%, #692b1f); box-shadow: 0 2px 3px rgba(45, 24, 12, .35); }
.scribble, .margin-note { color: #efe2c1; font: italic 1rem Georgia, serif; text-align: center; }
.color-notes { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.color-note { min-height: 122px; padding: 22px 15px; border: 1px solid rgba(50, 36, 24, .22); border-radius: 2px 8px 3px 6px; box-shadow: 4px 6px 0 rgba(42, 24, 12, .16); text-align: center; text-decoration: none; transition: transform 140ms ease; }
.color-note:hover { transform: translateY(-3px) rotate(0); }
.color-note strong, .color-note span { display: block; }
.color-note strong { font: 700 1.22rem Georgia, serif; }
.color-note span { margin-top: 7px; font-size: .68rem; font-weight: 800; }
.color-note.red { background: #dfa89b; transform: rotate(-1deg); }
.color-note.blue { background: #a9cbd9; transform: rotate(1deg); }
.color-note.green { background: #b7cba5; transform: rotate(.5deg); }
.color-note.purple { background: #c3afd1; transform: rotate(-.8deg); }
.margin-note { margin: 24px 0 0; font-size: .82rem; }

.desk-section { margin-top: 58px; }
.section-heading { margin-bottom: 24px; color: #f3e4c7; }
.section-heading .eyebrow { color: #edc58b; }
.section-heading h2, .rules-sheet h2 { margin: 0; font: 700 clamp(2.1rem, 4vw, 3.6rem)/1 Georgia, serif; }
.feature-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.feature-card { position: relative; display: grid; grid-template-columns: auto 1fr; gap: 14px; min-height: 275px; padding: 29px 24px; border: 1px solid var(--line); border-radius: 4px 13px 5px 10px; background: linear-gradient(145deg, #f0e4bd, #d6c28f); box-shadow: 7px 9px 0 rgba(54, 31, 16, .15); text-decoration: none; }
.feature-card:nth-child(2) { background: linear-gradient(145deg, #d7e0ad, #b9c68f); transform: rotate(.3deg); }
.feature-card:nth-child(3) { background: linear-gradient(145deg, #d9d4e5, #bcb2cf); transform: rotate(-.25deg); }
.feature-number { color: rgba(83, 65, 42, .5); font: 700 1.25rem Georgia, serif; }
.feature-card small { color: #895a2b; font-size: .6rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.feature-card h3 { margin: 7px 0 12px; font: 700 1.4rem Georgia, serif; }
.feature-card p { color: #655743; font-size: .82rem; line-height: 1.65; }
.feature-card strong { display: block; margin-top: 20px; color: #34583f; font-size: .75rem; }
.card-guide:hover { transform: translateY(-4px) rotate(-.2deg); }

.rules-desk { display: grid; grid-template-columns: minmax(0, 1fr) 340px; align-items: center; gap: 32px; }
.rules-sheet h2 { margin-bottom: 25px; }
.rule-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.rule-grid div { padding: 15px 12px; border-left: 3px solid var(--green); background: rgba(255, 250, 225, .35); }
.rule-grid strong, .rule-grid span { display: block; }
.rule-grid strong { color: var(--green); font: 700 2rem Georgia, serif; }
.rule-grid span { color: #77674d; font-size: .65rem; font-weight: 850; text-transform: uppercase; }
.rules-note { margin: 24px 0 16px; color: #62543f; }
.rules-sheet > a, .product-clipping a { color: #34583f; font-size: .75rem; font-weight: 900; }
.product-clipping { position: relative; padding: 39px 28px 30px; border: 1px solid var(--line); border-radius: 3px 9px 3px 7px; background: linear-gradient(145deg, #e6d4a5, #cbb280); box-shadow: 7px 9px 0 rgba(54, 31, 16, .15); transform: rotate(1deg); }
.clip-tape { position: absolute; top: -11px; left: 50%; width: 92px; height: 22px; background: rgba(226, 204, 157, .84); transform: translateX(-50%) rotate(-2deg); }
.product-clipping small { color: #895a2b; font-weight: 900; text-transform: uppercase; }
.product-clipping h3 { margin: 8px 0 15px; font: 700 1.55rem Georgia, serif; }
.product-clipping ul { padding-left: 19px; color: #62543f; font-size: .8rem; line-height: 1.75; }

.bulletin-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.bulletin-grid a { min-height: 160px; padding: 25px; border: 1px solid var(--line); border-radius: 4px 12px 5px 9px; color: var(--ink); background: linear-gradient(145deg, #efe1b8, #d5be8a); box-shadow: 6px 8px 0 rgba(54,31,16,.14); text-decoration: none; transition: transform 140ms ease; }
.bulletin-grid a:nth-child(2) { background: linear-gradient(145deg, #d8dfb0, #b8c58c); transform: rotate(.3deg); }
.bulletin-grid a:nth-child(3) { background: linear-gradient(145deg, #d9d1e4, #bdb1cd); transform: rotate(-.25deg); }
.bulletin-grid a:hover { transform: translateY(-3px); }
.bulletin-grid small, .bulletin-grid strong, .bulletin-grid span { display: block; }
.bulletin-grid small { color: #87562c; font-size: .61rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.bulletin-grid strong { margin: 8px 0 12px; font: 700 1.25rem Georgia, serif; }
.bulletin-grid span { color: #665743; font-size: .77rem; line-height: 1.55; }

.tcg-footer { display: grid; grid-template-columns: 1fr minmax(260px, 560px); gap: 24px; padding: 27px max(20px, calc((100vw - 1180px) / 2)); color: #d9c6a4; background: #2e2116; }
.tcg-footer strong { font: 700 1rem Georgia, serif; }
.tcg-footer p, .tcg-footer small { margin: 4px 0 0; color: #aa987b; font-size: .68rem; }
.tcg-footer small { text-align: right; }

@media (max-width: 900px) {
  .tcg-hero, .rules-desk { grid-template-columns: 1fr; }
  .color-board { width: min(100%, 590px); justify-self: center; }
  .feature-grid, .bulletin-grid { grid-template-columns: 1fr; }
}
@media (max-width: 650px) {
  main { width: min(100% - 20px, 1180px); padding-top: 25px; }
  .tcg-hero { gap: 25px; }
  .hero-sheet { padding: 38px 23px; }
  h1 { font-size: clamp(2.7rem, 14vw, 4.2rem); }
  .launch-strip, .rule-grid { grid-template-columns: 1fr 1fr; }
  .color-board { padding-inline: 17px; border-width: 8px; }
  .tcg-footer { grid-template-columns: 1fr; }
  .tcg-footer small { text-align: left; }
}