/* A page for one object: the object in its compartment, then where it comes from, how to play it, what it teaches */
.ob-hero{padding-top:clamp(108px,13vw,160px)}
.ob-grid{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(28px,5vw,80px);align-items:center}
.ob-copy .kicker a{color:inherit;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:3px}
.ob-name{margin:16px 0 18px;max-width:14ch}
.ob-line{margin:0 0 12px;max-width:34ch;font-family:var(--serif);font-style:italic;font-size:clamp(1.25rem,2vw,1.5rem);line-height:1.35}
.ob-meta{margin:0 0 26px;max-width:46ch;font-size:.9rem;color:var(--ink-2)}
.ob-acts{display:flex;flex-wrap:wrap;gap:12px}
.ob-case-wrap{display:grid;justify-items:center}
.ob-case{--u:clamp(170px,21vw,250px)}

.ob-body{padding-top:clamp(40px,5vw,72px)}
.ob-cols{display:grid;grid-template-columns:1.4fr 1fr;gap:clamp(18px,2.4vw,32px)}
.ob-card{padding:clamp(22px,2.6vw,34px);background:#fbf9f4;border:2px solid var(--ink);box-shadow:5px 5px 0 var(--coral-2)}
.ob-card h2{margin:0 0 12px}
.ob-card p{margin:0;font-size:1.04rem;line-height:1.6}
.ob-card-act{margin-top:20px !important}
.ob-teach{margin-top:clamp(18px,2.4vw,32px);padding:18px 24px;border:2px dashed var(--ink);background:var(--paper)}
.ob-teach summary{cursor:pointer;font-weight:620;list-style:none}
.ob-teach summary::-webkit-details-marker{display:none}
.ob-teach summary::before{content:"+";display:inline-block;width:1.2em;font-weight:700;color:var(--coral-ink)}
.ob-teach[open] summary::before{content:"\2212"}
.ob-teach summary span{font-weight:400;color:var(--ink-2)}
.ob-teach p{margin:14px 0 0;max-width:62ch;font-size:1.04rem;line-height:1.6}
.ob-ask{font-family:var(--serif);font-style:italic;font-size:1.15rem !important}
.ob-ask b{font-family:var(--sans);font-style:normal;font-weight:620}

.ob-more{padding-top:clamp(40px,5vw,72px)}
.ob-nbs{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:18px 0 26px}
.ob-nb{display:block;padding:18px 22px;border:2px solid var(--ink);background:#fbf9f4;color:var(--ink);text-decoration:none;box-shadow:3px 3px 0 var(--coral-2);transition:transform .14s var(--ease),box-shadow .14s var(--ease)}
.ob-nb:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--coral-2)}
.ob-nb small{display:block;margin-bottom:4px;font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
.ob-nb b{font-family:var(--display);font-size:1.3rem;font-weight:700}
.ob-nb:last-child{text-align:right}
.ob-all{display:flex;flex-wrap:wrap;gap:12px}

@media (max-width:860px){
  .ob-grid{grid-template-columns:1fr}
  .ob-case-wrap{order:-1}
  .ob-case{--u:clamp(140px,38vw,200px)}
  .ob-cols{grid-template-columns:1fr}
}
@media (max-width:520px){
  .ob-nbs{grid-template-columns:1fr}
  .ob-nb:last-child{text-align:left}
}
.ob-dare{margin-top:clamp(18px,2.4vw,32px);padding:clamp(20px,2.4vw,30px);background:var(--grain-c),var(--coral-l);border:2px solid var(--ink);box-shadow:5px 5px 0 var(--ink)}
.ob-dare .dare-k{margin:0 0 8px;font-size:.72rem;font-weight:650;letter-spacing:.16em;text-transform:uppercase;color:var(--coral-ink)}
.ob-dare-t{margin:0 0 10px;max-width:46ch;font-family:var(--display);font-weight:700;font-size:clamp(1.2rem,2vw,1.45rem);line-height:1.3}
.ob-dare-n{margin:0;font-size:.92rem;color:var(--ink-2)}
