.gr-page {--gr-panel:#E9C6A5;--gr-mark:#713451;color:var(--ink,#342332);padding-bottom:36px}
.gr-page *, .gr-page *::before, .gr-page *::after {box-sizing:border-box}
.gr-page .gr-crumb {display:flex;flex-wrap:wrap;align-items:center;gap:.75em;margin:18px 0 31px;font-size:.88rem;color:var(--muted,#68545B)}
.gr-crumb a,.gr-end a {color:inherit;text-decoration:none}
.gr-crumb a:hover,.gr-end a:hover {text-decoration:underline;text-underline-offset:.2em}
.gr-page :focus-visible {outline:3px solid #70425f;outline-offset:4px}
.gr-page .gr-intro {display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);align-items:center;gap:clamp(32px,5vw,76px);padding:12px 0 30px}
.gr-copy .eyebrow,.gr-play-head .eyebrow {color:#614352}
.gr-page h1 {font-size:clamp(2.35rem,5.4vw,5.15rem);line-height:1.015;letter-spacing:-.052em;max-width:15ch;margin:12px 0 20px;text-wrap:balance}
.gr-copy .lead,.gr-play-head .lead {max-width:48ch;font-size:clamp(1.04rem,1.35vw,1.28rem);line-height:1.52;margin:0 0 20px}
.gr-copy .actions {margin:21px 0 10px}
.gr-caption {font-size:.85rem;color:var(--muted,#68545B);margin:12px 0 0}
.gr-art {margin:0;min-width:0}
.gr-art>div {position:relative;background:var(--gr-panel);isolation:isolate;overflow:hidden}
.gr-art svg,.gr-trial-art svg,.gr-exhibit svg {display:block;width:100%;height:auto;font-family:inherit}
.gr-art figcaption {padding:10px 0 0;font-size:.86rem;color:var(--muted,#68545B);text-align:right}
.gr-rules {--gr-panel:#563048}
.gr-pairs {--gr-panel:#EDBA96}
.gr-detective {--gr-panel:#694857}
.gr-quiz {--gr-panel:#E7BD87}
.gr-photo {--gr-panel:#442F45}
.gr-logic {--gr-panel:#DCC9AD}
.gr-page.gr-detective .gr-art>div {clip-path:polygon(0 5%,58% 5%,62% 0,100% 0,100% 100%,0 100%)}
.gr-page.gr-photo .gr-intro {grid-template-columns:minmax(0,.84fr) minmax(0,1.16fr)}
.gr-contact {background:#3C2C40;display:flex;align-items:start;gap:8px;padding:clamp(14px,3vw,36px) 15px}
.gr-contact>div {width:50%;min-width:0}
.gr-contact>div:first-child {padding-top:32px}
.gr-contact svg {display:block;width:100%;height:auto}
.gr-reading {display:grid;grid-template-columns:minmax(0,1.18fr) minmax(0,.82fr);gap:clamp(36px,8vw,120px);margin:clamp(40px,6vw,84px) 0}
.gr-reading>div:last-child {align-self:center}
.gr-reading h2,.gr-faq h2,.gr-verdict h2 {font-size:clamp(1.48rem,2.7vw,2.55rem);letter-spacing:-.035em;line-height:1.13;margin:.35em 0}
.gr-reading p:not(.eyebrow),.gr-faq details p,.gr-verdict p {max-width:63ch;line-height:1.63}
.gr-faq {display:grid;grid-template-columns:minmax(200px,.7fr) minmax(0,1.3fr);gap:32px;background:#F1E4D5;padding:clamp(22px,3.6vw,48px)}
.gr-faq details+details {margin-top:6px}
.gr-faq summary {cursor:pointer;padding:12px 0;font-weight:650}
.gr-faq details p {margin:0 0 16px}
.gr-end {display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:28px;font-size:.96rem;font-weight:650}
.gr-end a,.gr-crumb a {display:inline-flex;align-items:center;min-height:36px}
.gr-play-head {max-width:900px;padding:8px 0 18px}
.gr-page .gr-play-head h1 {max-width:none}
.gr-play-head .lead {max-width:66ch}
.gr-board {background:#F2E6D8;padding:clamp(20px,4vw,54px);max-width:1100px}
.gr-board:has(.gr-trial-art),.gr-board:has(.gr-exhibit),.gr-board:has(.gr-notehand) {display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);align-items:center;gap:clamp(24px,4vw,52px)}
.gr-trial-art,.gr-exhibit {margin:0;background:var(--gr-panel)}
.gr-exhibit figcaption {background:#543947;color:#FFF3DF;padding:12px 18px;line-height:1.5}
.gr-control {min-width:0}
.gr-control .btn {min-height:44px;cursor:pointer}
.gr-answers {display:grid;gap:9px}
.gr-answer {appearance:none;cursor:pointer;border:0;background:#FFF8EB;color:var(--ink,#342332);display:flex;width:100%;gap:16px;align-items:center;text-align:left;min-height:54px;padding:13px 18px;font:inherit;font-weight:640}
.gr-answer span {font-family:var(--mono,monospace);font-size:.82rem;color:#755466}
.gr-answer:hover,.gr-photo-options button:hover {background:#E8CFB4}
.gr-verdict p {margin:13px 0}
.gr-verdict h2:focus {outline:none}
.gr-verdict .btn {margin-top:12px}
.gr-page .gr-context-link {color:#66394E;font-weight:650;text-decoration:underline;text-underline-offset:.18em}
.gr-verdict .actions {align-items:baseline}
.gr-range {width:min(660px,100%);margin:0 0 25px}
.gr-range label {display:flex;justify-content:space-between;align-items:center;font-size:1.15rem;font-weight:650}
.gr-range output {font:600 2.05rem var(--mono,monospace);color:#733854}
.gr-range input {width:100%;min-height:44px;accent-color:#713451}
.gr-range>div {display:flex;justify-content:space-between;color:#634C59}
.gr-notehand {display:flex;align-items:center;justify-content:center;gap:8px;padding:38px 10px;background:#DAC6AC}
.gr-notehand span {display:grid;place-content:center;min-width:0;flex:1;min-height:110px;font-weight:650;font-size:.94rem;color:#392E3D}
.gr-notehand span:nth-child(1) {background:#FAF2DE;transform:rotate(-3deg)}
.gr-notehand span:nth-child(2) {background:#9FADBF;transform:rotate(3deg)}
.gr-notehand span:nth-child(3) {background:#EDC374;transform:rotate(-4deg)}
.gr-photo-options {display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,3vw,30px)}
.gr-photo-options button {appearance:none;border:0;background:#FFF6E5;color:var(--ink,#342332);padding:0 0 14px;text-align:left;cursor:pointer;font:inherit}
.gr-photo-options svg {display:block;width:100%;height:auto}
.gr-photo-options strong,.gr-photo-options button>span {display:block;margin:10px 14px 0}
.gr-photo-options button>span {font-size:.87rem;color:#673C54}
@media (max-width:760px) {
  .gr-page .gr-intro,.gr-page.gr-photo .gr-intro,.gr-reading,.gr-faq,.gr-board:has(.gr-trial-art),.gr-board:has(.gr-exhibit),.gr-board:has(.gr-notehand) {grid-template-columns:1fr}
  .gr-page .gr-crumb {margin:7px 0 12px}
  .gr-page .gr-intro {gap:25px;padding:7px 0}
  .gr-art {width:100%;max-width:560px}
  .gr-reading {margin:36px 0;gap:20px}
  .gr-faq {gap:4px}
  .gr-board {padding:18px}
  .gr-trial-art,.gr-exhibit {max-width:390px}
  .gr-play-head {padding:0 0 9px}
}
@media (max-width:420px) {
  .gr-page h1 {font-size:clamp(2.15rem,10vw,2.6rem);overflow-wrap:anywhere}
  .gr-photo-options {gap:9px}
  .gr-photo-options strong,.gr-photo-options button>span {margin:8px 9px 0}
  .gr-board {padding:13px}
  .gr-notehand {padding:25px 7px}
  .gr-notehand span {min-height:86px;font-size:.85rem}
}
/* The case cover, question deck and contact sheet keep the object of play visible. */
.gr-page.gr-detective .gr-intro {
  background:#583E50;color:#FFF0DA;padding:clamp(24px,3.9vw,60px);
  grid-template-columns:minmax(0,.95fr) minmax(0,1fr);gap:clamp(20px,4vw,60px);
}
.gr-page.gr-detective .gr-copy .eyebrow,.gr-page.gr-detective .gr-caption,.gr-page.gr-detective figcaption {color:#F0D1BB}
.gr-page.gr-detective .gr-copy .lead,.gr-page.gr-detective .gr-copy h1 {color:#FFF0DA}
.gr-page.gr-detective .gr-copy .btn {background:#F5D39F;color:#3C2936}
.gr-page.gr-quiz .gr-art {grid-column:1;grid-row:1}
.gr-page.gr-quiz .gr-copy {grid-column:2;grid-row:1}
.gr-page.gr-pairs .gr-art>div {border-radius:45% 45% 0 0}
.gr-page.gr-photo .gr-intro {display:block;padding-top:2px}
.gr-page.gr-photo .gr-copy {display:grid;grid-template-columns:1.05fr 1fr;gap:0 clamp(24px,7vw,100px);align-items:start}
.gr-page.gr-photo .gr-copy .eyebrow {grid-column:1;grid-row:1}
.gr-page.gr-photo h1 {grid-column:1;grid-row:2;margin-bottom:8px}
.gr-page.gr-photo .gr-copy .lead {grid-column:2;grid-row:1 / span 3;margin:4px 0 0}
.gr-page.gr-photo .gr-copy .actions {grid-column:1;grid-row:3;margin-top:6px}
.gr-page.gr-photo .gr-caption {grid-column:1 / -1}
.gr-page.gr-photo .gr-art {margin-top:22px}
.gr-page.gr-photo .gr-contact {justify-content:center;align-items:center;background:#392B3C;gap:clamp(16px,3vw,32px);padding:20px clamp(16px,4vw,54px)}
.gr-page.gr-photo .gr-contact>div {width:min(40%,310px);padding:0}
@media (max-width:760px){
  .gr-page.gr-detective .gr-intro {grid-template-columns:1fr}
  .gr-page.gr-quiz .gr-art,.gr-page.gr-quiz .gr-copy {grid-row:auto;grid-column:auto}
  .gr-page.gr-photo .gr-copy {display:block}
  .gr-page.gr-photo .gr-copy .lead {margin-bottom:16px}
  .gr-page.gr-photo .gr-contact>div {width:50%}
  .gr-page.gr-photo .gr-contact {gap:8px;padding:12px}
}
.gr-mode-link {display:flex;align-items:center;justify-content:space-between;gap:24px;background:#F2E3D0;padding:clamp(18px,3vw,35px);margin:28px 0}
.gr-mode-link p {margin:.25em 0;max-width:58ch}.gr-mode-link .btn {flex:none}
.gr-full .gr-mode-board {background:#F3E6D6;padding:clamp(19px,3.8vw,52px)}
.gr-mode-board p:not(.eyebrow) {max-width:65ch;line-height:1.55}
.gr-mode-board h2 {font-size:clamp(1.48rem,3vw,2.5rem);margin:.25em 0 .35em;line-height:1.15}
.gr-mode-board .gr-mode-step {font:500 .86rem var(--mono,monospace);color:#6D4354;margin:0 0 24px}
.gr-mode-split,.gr-photo-result {display:grid;grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr);gap:clamp(18px,4vw,54px);align-items:center}
.gr-mode-split svg,.gr-photo-result svg {display:block;width:100%;height:auto}
.gr-proof-list {padding:0;display:grid;gap:9px;list-style:none}
.gr-proof-list p {padding:0 15px}
.gr-result-list {display:grid;grid-template-columns:minmax(140px,.55fr) minmax(0,1fr);gap:12px;max-width:650px;margin:18px 0 25px}
.gr-result-list dd {margin:0;font-weight:700}
.gr-mode-board button[aria-pressed="true"] {outline:3px solid var(--plum,#713451);outline-offset:-3px}
@media(max-width:760px){.gr-mode-split,.gr-photo-result {grid-template-columns:1fr}.gr-mode-link {flex-direction:column;align-items:start}.gr-mode-link .btn {flex:auto}.gr-result-list {grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}