:root{--paper:#F4E3CB;--ink:#2E1E15;--terracotta:#B0472A;--olive:#2F3A2E;--gold:#D9A441;--peach:#E8A37E;--umber:#3A2A20}

body{margin:0;background:#F4E3CB}
a{color:#B0472A}a:hover{color:#7A2C17}
.tile{transition:transform .3s cubic-bezier(.2,.7,.2,1)}
.tile:hover{transform:rotate(0deg) scale(1.04)!important;z-index:9}
.mast{opacity:0;animation:in .9s .1s cubic-bezier(.2,.7,.2,1) forwards}
@keyframes in{from{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:none}}
.slap{opacity:0;animation:slap .5s cubic-bezier(.3,1.4,.5,1) forwards}
@keyframes slap{from{opacity:0;transform:scale(1.25) rotate(var(--r))}to{opacity:1;transform:scale(1) rotate(var(--r))}}
@supports (animation-timeline: view()){
.drift-a{animation:da linear both;animation-timeline:scroll(root);animation-range:0 900px}
@keyframes da{to{translate:0 -90px}}
.drift-b{animation:db linear both;animation-timeline:scroll(root);animation-range:0 900px}
@keyframes db{to{translate:0 60px}}
.reveal{animation:rise linear both;animation-timeline:view();animation-range:entry 0% entry 50%}
@keyframes rise{from{opacity:0;translate:0 30px}to{opacity:1;translate:0 0}}
.row-in{animation:rowin linear both;animation-timeline:view();animation-range:entry 0% entry 60%}
@keyframes rowin{from{opacity:0;translate:-40px 0}to{opacity:1;translate:0 0}}
}
.row:hover .big{color:#2E1E15}
@media (prefers-reduced-motion: reduce){.mast,.slap,.drift-a,.drift-b,.reveal,.row-in{animation:none!important;opacity:1!important;translate:none!important}.tile{transition:none}}

/* The approved desktop composition is retained; these rules let its fixed pieces wrap. */
*{box-sizing:content-box}body{font-family:'EB Garamond',Georgia,serif;color:var(--ink)}
body.certamen{background:var(--umber);color:var(--paper)}
body.certamen a{color:var(--gold)}body.certamen a:hover{color:#F0C46A}
body.nle .tile{transition:transform .3s}body.nle .tile:hover{transform:rotate(0deg) scale(1.03)!important}
button,input{font:inherit}button,a{touch-action:manipulation}button{cursor:pointer}
a,button{overflow-wrap:anywhere}nav a,nav b{display:inline-flex;align-items:center;min-height:44px}
button{min-height:44px;min-width:44px}button:disabled{cursor:default;opacity:.6}
:focus-visible{outline:3px solid var(--terracotta);outline-offset:4px}.certamen :focus-visible{outline-color:var(--gold)}
.skip{position:absolute;left:16px;top:-100px;z-index:100;background:var(--paper);padding:12px}.skip:focus{top:16px}
[hidden]{display:none!important}img{display:block;width:100%;height:100%;object-fit:cover}iframe{border:0;width:100%;height:100%}
.empty{font-family:'Courier Prime',monospace;font-size:14px;line-height:1.5;padding:12px 0;margin:0}
.caption-card{padding:16px;text-align:center;display:flex;flex-direction:column;justify-content:center;gap:10px;width:100%;height:100%;font-size:14px}
.chip{display:inline-flex;align-items:center;min-height:44px;font-family:'Courier Prime',monospace;font-size:14px;background:#FFFAF1;border:1px solid var(--ink);padding:10px 12px;color:var(--ink);text-decoration:none}
.dark-links .chip{background:transparent;color:var(--paper);border-color:var(--gold)}
.material-card{display:flex;flex-wrap:wrap;gap:8px 24px;align-items:center;padding:16px 0;border:0;border-bottom:1px solid #CDB896;background:transparent;text-decoration:none;color:var(--ink);text-align:left;width:100%}
.material-card .kind{font-family:'Courier Prime',monospace;font-size:13px;width:90px;color:var(--terracotta)}
.material-card .title{flex:1 1 260px;font-size:22px}.material-card .added{font-family:'Courier Prime',monospace;font-size:13px;color:#5E4535}
.slide-thumb{box-sizing:border-box;aspect-ratio:16/9;background:var(--umber);color:var(--paper);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;font-family:'Courier Prime',monospace;text-align:center}
.slide-open{background:var(--terracotta);color:#FFF6EA;border:0;padding:12px 20px;font-family:'Courier Prime',monospace}
.slide-dialog{box-sizing:border-box;width:min(1100px,calc(100% - 24px));max-height:95vh;padding:20px;background:var(--paper);color:var(--ink);border:2px solid var(--ink)}
.slide-dialog::backdrop{background:rgba(0,0,0,.75)}.viewer-top{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:12px}.viewer-top h2{font-size:22px;margin:0}.viewer-frame{aspect-ratio:16/9}
.data-status{font-family:'Courier Prime',monospace;font-size:13px;padding:8px 32px;color:#5E4535;background:var(--paper)}
.past{opacity:.9}section[id],article[id]{scroll-margin-top:16px}.archive-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:28px 24px}
/* The original olive poster hover turned its dates dark; keep readable light text. */
.row:hover .big{color:var(--paper)}
@media(max-width:600px){
 *{box-sizing:border-box}
 .hero-collage figure>div:not([style*="position: absolute"]){min-height:150px;height:170px;aspect-ratio:auto!important}
 .hero-collage>div{min-width:0}
 .hero-collage .caption-card{padding:12px;font-size:13px}
 header,main>section,.page-shell>section{padding-left:20px!important;padding-right:20px!important}
 header h1{font-size:clamp(42px,11vw,64px)!important;overflow-wrap:normal}
 .hero-section{min-height:0!important;padding-top:32px!important;padding-bottom:44px!important}
 .hero-collage{height:auto!important;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 12px}
 .hero-collage>.drift-a,.hero-collage>.drift-b{position:relative!important;left:auto!important;right:auto!important;top:auto!important;width:auto!important;animation:none!important;translate:none!important}
 .hero-collage>.slap{position:relative!important;right:auto!important;bottom:auto!important;width:auto!important;grid-column:1/-1;margin:12px 8px 0}
 .friday-grid,.study-grid{grid-template-columns:1fr!important}.friday-grid figure{padding-top:0!important}
 #dates>div,#all>div,.certamen-band>div{padding-left:20px!important;padding-right:20px!important}
 .meeting-photo{flex-basis:100%!important}.certamen-dates>div{flex-wrap:wrap;gap:8px 16px!important}
 .toss-up{flex-basis:100%!important;min-width:0}.next-exam{padding:20px!important}
 footer{padding-left:20px!important;padding-right:20px!important}
 .nle-featured{flex-basis:100%!important}.nle-countdown{margin:12px 4px 0}
 .viewer-frame{aspect-ratio:4/3}
}
@media(prefers-reduced-motion:reduce){.tile:hover{transform:none!important}.nle .tile{transition:none}}

header>div:first-child>a,a[href="#all"],.viewer-top~p a{display:inline-flex;align-items:center;min-height:44px}
#nle-filters{display:flex;flex-wrap:wrap;gap:6px}

/* #B0472A on paper is 4.42:1. Keep the approved palette and inline values,
   with this slight text-only adjustment to meet the requested 4.5:1 minimum. */
:root{--accent-text:#AC4428}
[style*="color: #B0472A"],.material-card .kind{color:var(--accent-text)!important}
#contest-rows a{display:inline-flex;align-items:center;min-height:44px;min-width:44px}
/* Size tap targets including their padding, without enlarging the approved cards. */
.caption-card,.chip,.material-card,.slide-open,button,nav a,nav b,
header>div:first-child>a,a[href="#all"],.viewer-top~p a,#contest-rows a{box-sizing:border-box}
nav a{min-width:44px}
