/* Oxford Gun Company — tiled Team page.
   Replacement for experience.css; load after screen.css.
   Scoped to body#instructors; experience.js supplies click behaviour. */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:wght@500;600&display=swap');

body#instructors #container-outer{background:linear-gradient(180deg,#f3eee5 0,#fbfaf7 720px)!important}
body#instructors #container-outer>#container{--wine:#510b1b;--wine2:#741a31;--cream:#f3eee5;--ink:#20231f;--muted:#626760;--line:rgba(32,35,31,.16);--serif:'Playfair Display',Georgia,serif;--sans:'DM Sans',Arial,sans-serif;width:min(1120px,calc(100% - 2*clamp(18px,4vw,56px)))!important;max-width:1120px!important;margin:0 auto!important;padding:clamp(46px,6vw,78px) 0 clamp(58px,7vw,90px)!important;background:transparent!important;color:var(--ink);font:400 16px/1.7 var(--sans);-webkit-font-smoothing:antialiased}
body#instructors #container-outer>#container *,body#instructors #container-outer>#container *::before,body#instructors #container-outer>#container *::after{box-sizing:border-box}
body#instructors #container-outer>#container .contentfullwidth,body#instructors #container-outer>#container .contentfullwidth>.subcontainer{float:none!important;width:100%!important;max-width:none!important;margin:0!important;padding:0!important}
body#instructors #container-outer>#container .contentfullwidth>.subcontainer{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;align-items:start}
body#instructors #container-outer>#container .contentfullwidth>.subcontainer{display:grid!important;grid-template-columns:repeat(6,minmax(0,1fr));gap:22px;align-items:start}
body#instructors #container-outer>#container .clearallclass,body#instructors #container-outer>#container .clearleftclass,body#instructors #container-outer>#container .brownlinedivider{display:none!important}

/* Introduction */
body#instructors #container-outer>#container h1.team,body#instructors #container-outer>#container p.team{grid-column:1/-1}
body#instructors #container-outer>#container h1.team{max-width:850px;margin:0 auto 16px!important;color:var(--wine)!important;text-align:center!important;font:500 clamp(2.7rem,5vw,4rem)/1.08 var(--serif)!important;letter-spacing:-.035em}
body#instructors #container-outer>#container p.team{max-width:790px;margin:0 auto clamp(24px,4vw,42px)!important;color:var(--muted)!important;text-align:center!important;font:400 clamp(16px,1.55vw,18px)/1.75 var(--sans)!important}

/* Tiled portrait cards */
body#instructors #container-outer>#container .experiencesubbox{position:relative;isolation:isolate;display:block!important;float:none!important;width:100%!important;min-width:0!important;height:480px!important;aspect-ratio:auto!important;margin:0!important;padding:0!important;overflow:hidden;background:var(--wine)!important;border:1px solid rgba(81,11,27,.28)!important;box-shadow:0 10px 28px rgba(32,35,31,.13);cursor:pointer;outline:0;transition:transform .2s ease,box-shadow .2s ease}
body#instructors #container-outer>#container .experiencesubbox{position:relative;isolation:isolate;grid-column:span 2;display:block!important;float:none!important;width:100%!important;min-width:0!important;height:480px!important;aspect-ratio:auto!important;margin:0!important;padding:0!important;overflow:hidden;background:var(--wine)!important;border:1px solid rgba(81,11,27,.28)!important;box-shadow:0 10px 28px rgba(32,35,31,.13);cursor:pointer;outline:0;transition:transform .2s ease,box-shadow .2s ease}
body#instructors #container-outer>#container .experiencesubbox:hover{transform:translateY(-4px);box-shadow:0 16px 36px rgba(32,35,31,.2)}
body#instructors #container-outer>#container .experiencesubbox:focus-visible{outline:3px solid var(--wine2);outline-offset:4px}
body#instructors #container-outer>#container .experiencesubbox>a:empty{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}

/* Photographs */
body#instructors #container-outer>#container .experienceimagebox{position:absolute!important;z-index:1;inset:0;display:block!important;float:none!important;width:100%!important;max-width:none!important;height:100%!important;margin:0!important;padding:0!important;background:var(--wine)!important}
body#instructors #container-outer>#container .experienceimagebox img{display:block!important;width:100%!important;max-width:none!important;height:100%!important;margin:0!important;border:0!important;object-fit:cover!important;object-position:center top!important;box-shadow:none!important;transition:transform .45s ease,filter .3s ease}
body#instructors #container-outer>#container .experienceimagebox h2,body#instructors #container-outer>#container .experienceimagebox br{display:none!important}
body#instructors #container-outer>#container .experiencesubbox:hover .experienceimagebox img{transform:scale(1.025)}

/* Name/title caption */
body#instructors #container-outer>#container .experiencetextbox{position:absolute!important;z-index:3;right:0;bottom:0;left:0;display:block!important;float:none!important;width:100%!important;max-width:none!important;height:auto!important;max-height:100%!important;margin:0!important;padding:19px 20px 58px!important;overflow:hidden;background:linear-gradient(180deg,rgba(23,14,15,0) 0,rgba(23,14,15,.9) 34%,rgba(23,14,15,.98) 100%)!important;color:#fff!important;text-align:left!important;transition:inset .3s ease,padding .3s ease,background .3s ease}
body#instructors #container-outer>#container .experiencetextbox h2{margin:22px 0 4px!important;color:#fff!important;text-align:left!important;font:500 clamp(1.45rem,2.2vw,1.9rem)/1.12 var(--serif)!important;letter-spacing:-.02em}
body#instructors #container-outer>#container .experiencetextbox h3{margin:0!important;color:rgba(255,255,255,.84)!important;text-align:left!important;font:700 11px/1.4 var(--sans)!important;letter-spacing:.075em;text-transform:uppercase}
body#instructors #container-outer>#container .experiencetextbox h3::after{content:'View profile  →';position:absolute;right:18px;bottom:16px;display:inline-flex;align-items:center;justify-content:center;min-height:32px;padding:7px 12px;border:1px solid rgba(255,255,255,.72);border-radius:999px;background:#fff;color:var(--wine);box-shadow:0 3px 10px rgba(0,0,0,.2);white-space:nowrap;font:700 11px/1 var(--sans);letter-spacing:.025em;text-transform:none;transition:background .18s ease,color .18s ease,transform .18s ease}
body#instructors #container-outer>#container .experiencesubbox:hover .experiencetextbox h3::after{background:var(--wine);color:#fff;transform:translateX(2px)}
body#instructors #container-outer>#container .experiencetextbox p{max-height:0;margin:0!important;padding:0!important;overflow:hidden;opacity:0;color:rgba(255,255,255,.9)!important;text-align:left!important;font:400 14px/1.65 var(--sans)!important;transition:opacity .2s ease}

/* Open biography */
body#instructors #container-outer>#container .experiencesubbox.is-open{transform:none;cursor:default;box-shadow:0 16px 42px rgba(32,35,31,.25)}
body#instructors #container-outer>#container .experiencesubbox.is-open .experienceimagebox img{transform:scale(1.03);filter:brightness(.28) saturate(.75)}
body#instructors #container-outer>#container .experiencesubbox.is-open .experiencetextbox{top:0;bottom:0;padding:52px 24px 26px!important;overflow-y:auto;overscroll-behavior:contain;background:rgba(40,8,15,.94)!important;scrollbar-color:rgba(255,255,255,.45) transparent;scrollbar-width:thin}
body#instructors #container-outer>#container .experiencesubbox.is-open .experiencetextbox h2{margin:0 42px 5px 0!important}
body#instructors #container-outer>#container .experiencesubbox.is-open .experiencetextbox h3{margin:0 42px 20px 0!important}
body#instructors #container-outer>#container .experiencesubbox.is-open .experiencetextbox h3::after{content:'';display:none}
body#instructors #container-outer>#container .experiencesubbox.is-open .experiencetextbox p{max-height:none;margin:0 0 14px!important;overflow:visible;opacity:1}
body#instructors #container-outer>#container .experiencesubbox.is-open .experiencetextbox p:last-child{margin-bottom:0!important}
body#instructors #container-outer>#container .experience-profile-close{position:absolute;z-index:5;top:13px;right:13px;display:none;width:34px;height:34px;margin:0;padding:0;border:1px solid rgba(255,255,255,.65);border-radius:50%;background:rgba(0,0,0,.32);color:#fff;font:600 22px/30px Arial,sans-serif;text-align:center;cursor:pointer}
body#instructors #container-outer>#container .experiencesubbox.is-open .experience-profile-close{display:block}
body#instructors #container-outer>#container .experience-profile-close:focus-visible{outline:3px solid #fff;outline-offset:2px}
body#instructors #container-outer>#container .experiencesubbox.has-more-text.is-open:not(.is-at-bottom)::after{content:'More below  ↓';position:absolute;z-index:6;bottom:12px;left:50%;display:flex;align-items:center;justify-content:center;width:max-content;min-height:36px;padding:8px 14px;transform:translateX(-50%);border:1px solid rgba(255,255,255,.72);border-radius:999px;background:rgba(255,255,255,.96);color:var(--wine);box-shadow:0 4px 14px rgba(0,0,0,.28);white-space:nowrap;font:700 11px/1 var(--sans);letter-spacing:.035em;text-transform:uppercase;pointer-events:none;animation:experience-scroll-cue 1.35s ease-in-out infinite}
body#instructors #container-outer>#container .experiencesubbox.has-more-text.is-open:not(.is-at-bottom) .experiencetextbox{padding-bottom:72px!important}
body#instructors #container-outer>#container .experiencesubbox.is-open:not(.is-at-bottom)::after{content:'More below  ↓';position:absolute;z-index:6;bottom:12px;left:50%;display:flex;align-items:center;justify-content:center;width:max-content;min-height:36px;padding:8px 14px;transform:translateX(-50%);border:1px solid rgba(255,255,255,.72);border-radius:999px;background:rgba(255,255,255,.96);color:var(--wine);box-shadow:0 4px 14px rgba(0,0,0,.28);white-space:nowrap;font:700 11px/1 var(--sans);letter-spacing:.035em;text-transform:uppercase;pointer-events:none;animation:experience-scroll-cue 1.35s ease-in-out infinite}
body#instructors #container-outer>#container .experiencesubbox.is-open:not(.is-at-bottom) .experiencetextbox{padding-bottom:72px!important}
@keyframes experience-scroll-cue{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,5px)}}

/* Doug and Shirley share one double-width tile. */
body#instructors #container-outer>#container #foundersbox{grid-column:span 2;height:480px!important;aspect-ratio:auto!important}
body#instructors #container-outer>#container #foundersbox{grid-column:span 4;height:480px!important;aspect-ratio:auto!important}
body#instructors #container-outer>#container #foundersbox>.experienceimagebox{display:grid!important;grid-template-columns:1fr 1fr}
body#instructors #container-outer>#container #foundersbox>.experienceimagebox img{position:static!important;width:100%!important;height:100%!important;min-width:0!important;object-position:center top!important}
body#instructors #container-outer>#container #foundersbox>.experienceimagebox img+img{border-left:2px solid rgba(255,255,255,.28)!important}
body#instructors #container-outer>#container #foundersbox.is-open .experienceimagebox img{filter:brightness(.25) saturate(.7)}

/* Centre incomplete final rows while retaining three equal visual columns. */
body#instructors #container-outer>#container .experiencesubbox:nth-last-child(1 of .experiencesubbox):nth-child(3n of .experiencesubbox){grid-column:3/span 2}
body#instructors #container-outer>#container .experiencesubbox:nth-last-child(2 of .experiencesubbox):nth-child(3n of .experiencesubbox){grid-column:2/span 2}
body#instructors #container-outer>#container .experiencesubbox:nth-last-child(1 of .experiencesubbox):nth-child(3n+1 of .experiencesubbox){grid-column:4/span 2}

@media(max-width:900px){body#instructors #container-outer>#container .contentfullwidth>.subcontainer{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}body#instructors #container-outer>#container .experiencesubbox,body#instructors #container-outer>#container #foundersbox{height:460px!important}body#instructors #container-outer>#container #foundersbox{grid-column:1/-1}}
@media(max-width:600px){body#instructors #container-outer>#container{width:calc(100% - 30px)!important;padding:38px 0 58px!important}body#instructors #container-outer>#container .contentfullwidth>.subcontainer{grid-template-columns:1fr;gap:16px}body#instructors #container-outer>#container h1.team{font-size:2.7rem!important}body#instructors #container-outer>#container p.team{margin-bottom:24px!important;text-align:left!important}body#instructors #container-outer>#container .experiencesubbox,body#instructors #container-outer>#container #foundersbox{grid-column:1;height:500px!important;aspect-ratio:auto!important}body#instructors #container-outer>#container #foundersbox>.experienceimagebox{grid-template-columns:1fr 1fr}body#instructors #container-outer>#container .experiencetextbox{padding:18px 18px 58px!important}body#instructors #container-outer>#container .experiencesubbox.is-open .experiencetextbox{padding:50px 20px 23px!important}}
@media(max-width:900px){body#instructors #container-outer>#container .contentfullwidth>.subcontainer{grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}body#instructors #container-outer>#container .experiencesubbox{grid-column:span 2}body#instructors #container-outer>#container .experiencesubbox,body#instructors #container-outer>#container #foundersbox{height:460px!important}body#instructors #container-outer>#container #foundersbox{grid-column:1/-1}body#instructors #container-outer>#container .experiencesubbox:nth-last-child(1 of .experiencesubbox):nth-child(even of .experiencesubbox){grid-column:2/span 2}}
@media(max-width:600px){body#instructors #container-outer>#container{width:calc(100% - 30px)!important;padding:38px 0 58px!important}body#instructors #container-outer>#container .contentfullwidth>.subcontainer{grid-template-columns:1fr;gap:16px}body#instructors #container-outer>#container h1.team{font-size:2.7rem!important}body#instructors #container-outer>#container p.team{margin-bottom:24px!important;text-align:left!important}body#instructors #container-outer>#container .experiencesubbox,body#instructors #container-outer>#container #foundersbox{grid-column:1!important;height:500px!important;aspect-ratio:auto!important}body#instructors #container-outer>#container #foundersbox>.experienceimagebox{grid-template-columns:1fr 1fr}body#instructors #container-outer>#container .experiencetextbox{padding:18px 18px 58px!important}body#instructors #container-outer>#container .experiencesubbox.is-open .experiencetextbox{padding:50px 20px 23px!important}}
@media(prefers-reduced-motion:reduce){body#instructors #container-outer>#container *,body#instructors #container-outer>#container *::before,body#instructors #container-outer>#container *::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}