:root{--paper:#f4ecda;--paper2:#ebe0c8;--ink:#22190f;--red:#9e2a22;--gold:#b0842c;--muted:#6d5f4b;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif}
*{box-sizing:border-box}
html{background:var(--paper)}
body{margin:0;color:var(--ink);font:18px/1.55 var(--serif);
  background:var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .13 0 0 0 0 .1 0 0 0 0 .06 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
a{color:var(--red)}
a:hover{color:var(--ink)}
.wrap{max-width:1080px;margin:0 auto;padding:0 20px}
.sc{font-variant:small-caps;letter-spacing:.08em}

/* masthead */
.mast{text-align:center;padding:30px 0 6px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.logo{margin:0;line-height:0}
.logo svg{display:block;width:min(860px,100%);height:auto;margin:0 auto}
.rule{border:0;border-top:5px double var(--ink);width:min(520px,80%);margin:.7em auto}
.mast .tag{margin-top:.55em}
.tag{font-size:1.35rem;font-style:italic;margin:.2em 0}
.sub{color:var(--muted);margin:.3em auto 0;max-width:36rem}

/* small masthead on inner pages */
.top{display:flex;align-items:center;gap:12px;padding:16px 20px;border-bottom:5px double var(--ink)}
.top a{display:block;line-height:0}
.top svg{display:block;height:32px;width:auto;max-width:100%}

/* the three games */
.plates{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin:34px 0 20px}
.plate{position:relative;display:flex;flex-direction:column;background:#fbf6ea;border:2px solid var(--ink);outline:1px solid var(--ink);outline-offset:4px;
  padding:22px 22px 20px;color:var(--ink);text-decoration:none;transition:transform .18s ease,box-shadow .18s ease;box-shadow:4px 5px 0 rgba(34,25,15,.18)}
.plate:hover,.plate:focus-visible{transform:translateY(-4px) rotate(-.4deg);box-shadow:6px 9px 0 rgba(34,25,15,.22);color:var(--ink)}
.plate:focus-visible{outline:3px solid var(--red)}
.plate .em{width:86px;height:86px;margin:0 0 6px}
.plate h2{font-size:1.55rem;line-height:1.15;margin:.15em 0 .35em;font-weight:600}
.plate p{margin:0 0 .9em;font-size:1.02rem}
.plate .meta{margin-top:auto;color:var(--muted);font-size:.92rem;font-style:italic}
.plate .play{display:inline-block;margin-top:.8em;align-self:flex-start;border:2px solid var(--ink);padding:.3em .95em;font-variant:small-caps;letter-spacing:.12em;background:var(--ink);color:var(--paper)}
.plate:hover .play{background:var(--red);border-color:var(--red)}

/* who is owlglass */
.who{display:grid;grid-template-columns:170px 1fr;gap:24px;align-items:start;border-top:5px double var(--ink);margin:34px 0 0;padding:26px 0 8px}
.who h3{margin:0 0 .3em;font-size:1.35rem;font-weight:600}
.who p{margin:0 0 .7em}
.who .badge{width:170px;padding-top:4px}

/* text pages */
.page{max-width:44rem;margin:0 auto;padding:10px 20px 30px}
.page h1{font-size:2.3rem;font-weight:500;margin:.8em 0 .2em;letter-spacing:.02em}
.page h2{font-size:1.35rem;font-weight:600;margin:1.6em 0 .3em}
.page .lede{font-size:1.2rem;font-style:italic}
.page ul{padding-left:1.2em}
.page li{margin:.35em 0}
.page .fig{float:right;width:180px;margin:6px 0 10px 24px}
.page .fig.solo{width:110px}
.dated{color:var(--muted);font-size:.9rem}

/* footer */
.foot{border-top:5px double var(--ink);margin-top:40px;padding:18px 0 34px;color:var(--muted);font-size:.92rem;text-align:center}
.foot nav{margin-bottom:.4em}
.foot nav a{margin:0 .5em}

@media (max-width:860px){.plates{grid-template-columns:1fr;max-width:520px;margin-left:auto;margin-right:auto}}
@media (max-width:560px){body{font-size:17px}.who{grid-template-columns:1fr}.who .badge{width:150px}.page .fig{width:130px}.page .fig.solo{width:80px}}
@media (prefers-reduced-motion:reduce){.plate{transition:none}}