/* The //ACADEMY instructors index (academy/instructors.php), from the Claude Design instructors page.
   Tokens (--ink, --paper, --g, --gut) and the header, Academy bar and footer come from the shell. */
.ix { --soft: #4a4a46; font-family: 'Archivo', sans-serif; color: var(--paper); background: var(--ink); overflow-x: clip; }
.ix *, .ix *::before, .ix *::after { box-sizing: border-box; border-radius: 0; }
.ix [hidden] { display: none !important; }
.ix a { text-decoration: none; color: inherit; }
.ix h1, .ix h2, .ix p { margin: 0; }
.ix button { font-family: inherit; }
.ix-in { max-width: 1440px; margin: 0 auto; padding: 0 var(--gut); }

/* — the hero — */
.ix-hero { position: relative; overflow: hidden; margin-top: 74px; padding: clamp(40px, 5vw, 70px) 0 30px; background: var(--ink); color: var(--paper); }
.hp-has-sub .ix-hero { margin-top: 124px; }
.ix-stripes { position: absolute; inset: 0; background: repeating-linear-gradient(-45deg, rgba(0,255,80,.05) 0 2px, transparent 2px 22px); }
.ix-ghost { position: absolute; right: -3%; top: 20px; font: 900 clamp(130px, 20vw, 340px)/.8 'Archivo', sans-serif; letter-spacing: -.07em; color: transparent; -webkit-text-stroke: 1px rgba(0,255,80,.24); white-space: nowrap; pointer-events: none; user-select: none; }
.ix-hero-grid { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 28px; align-items: end; }
.ix-hero-txt { min-width: 0; }
.ix-kicker { display: flex; align-items: center; gap: 12px; margin-bottom: 16px !important; font: 800 10.5px 'Archivo', sans-serif; letter-spacing: .16em; color: var(--g); }
.ix-hero h1 { font: 900 clamp(56px, 8.4vw, 148px)/.82 'Archivo', sans-serif; letter-spacing: -.065em; margin-bottom: 16px; color: var(--paper); }
.ix-hero h1 .is-out { color: transparent; -webkit-text-stroke: 2px var(--paper); }
.ix-lede { font: 500 clamp(15px, 1.3vw, 18px)/1.5 'Archivo', sans-serif; color: #d0d0cc; max-width: 56ch; margin-bottom: 24px !important; }
.ix-search { position: relative; display: block; max-width: 780px; }
.ix-search svg { position: absolute; left: 18px; top: 19px; width: 22px; height: 22px; color: var(--ink); pointer-events: none; }
.ix .ix-search input { width: 100%; height: 60px; margin: 0; background: var(--paper) !important; color: var(--ink) !important; border: 2px solid var(--paper) !important; padding: 0 170px 0 52px; outline: none; box-shadow: none !important; font: 700 16px 'Archivo', sans-serif; -webkit-appearance: none; appearance: none; }
.ix-search input::-webkit-search-cancel-button { display: none; }
.ix-search input:focus-visible { outline: 2px solid var(--g); outline-offset: 3px; }
.ix-search b { position: absolute; right: 6px; top: 6px; bottom: 6px; display: grid; place-items: center; padding: 0 16px; background: var(--g); color: var(--ink); font: 800 11px 'Archivo', sans-serif; letter-spacing: .16em; white-space: nowrap; }
.ix-stats { display: flex; border: 1px solid #2a2a2a; }
.ix-stats > div { padding: 14px 18px; border-right: 1px solid #2a2a2a; }
.ix-stats > div:last-child { border-right: 0; }
.ix-stats > div.is-g { background: rgba(0,255,80,.08); }
.ix-stats strong { display: block; font: 900 clamp(30px, 3vw, 46px)/1 'Archivo', sans-serif; letter-spacing: -.05em; }
.ix-stats span { display: block; margin-top: 7px; font: 800 9.5px 'Archivo', sans-serif; letter-spacing: .16em; color: #bdbdb8; }
.ix-stats .is-g span { color: var(--g); }

/* — the sticky bar, under the header and the Academy bar — */
.ix-bar { position: sticky; top: 74px; z-index: 15; background: rgba(10,10,10,.96); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-top: 1px solid #1e1e1e; border-bottom: 1px solid #1e1e1e; color: var(--paper); transition: top .35s cubic-bezier(.2,.7,.2,1); }
.hp-has-sub .ix-bar { top: 126px; }
.hp-scrolled .ix-bar { top: 40px; }
.hp-scrolled.hp-has-sub .ix-bar { top: 80px; }
.ix-bar > .ix-in { padding-top: 10px; padding-bottom: 10px; }
.ix-bar-row { display: flex; align-items: center; gap: 10px; }
.ix-disc { flex: 1; min-width: 0; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.ix-disc::-webkit-scrollbar { display: none; }
.ix-disc button { flex: none; cursor: pointer; white-space: nowrap; padding: 9px 12px; border: 1px solid #3a3a3a; background: transparent; color: var(--paper); font: 800 12px 'Archivo', sans-serif; }
.ix-disc button i { font-style: normal; opacity: .55; margin-left: 6px; }
.ix-disc button.on { background: var(--g); border-color: var(--g); color: var(--ink); }
.ix-disc button:not(.on):hover { border-color: var(--g); }
.ix-toggle { flex: none; cursor: pointer; display: flex; align-items: center; gap: 8px; padding: 9px 12px; border: 1px solid #3a3a3a; background: transparent; color: var(--paper); font: 800 11.5px 'Archivo', sans-serif; letter-spacing: .12em; }
.ix-toggle b { display: grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; background: var(--g); color: var(--ink); font: 900 10.5px 'Archivo', sans-serif; letter-spacing: 0; }
.ix-toggle i { font-style: normal; transition: transform .2s; }
.ix-open .ix-toggle { background: var(--paper); border-color: var(--paper); color: var(--ink); }
.ix-open .ix-toggle i { transform: rotate(180deg); }
.ix-sorts { flex: none; display: flex; border: 1px solid #3a3a3a; }
.ix-sorts button { cursor: pointer; white-space: nowrap; padding: 9px 10px; border: 0; background: transparent; color: #bdbdb8; font: 800 10.5px 'Archivo', sans-serif; letter-spacing: .1em; }
.ix-sorts button.on { background: var(--paper); color: var(--ink); }
.ix-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s ease; overflow: hidden; }
.ix-panel > .ix-groups { min-height: 0; overflow: hidden; }
.ix-open .ix-panel { grid-template-rows: 1fr; }
.ix-groups { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); }
.ix-open .ix-groups { border: 1px solid #2a2a2a; margin-top: 10px; }
.ix-groups > div { min-width: 0; padding: 12px 14px; border-right: 1px solid #2a2a2a; }
.ix-groups > div:last-child { border-right: 0; }
.ix-groups p { margin-bottom: 9px; font: 800 9.5px 'Archivo', sans-serif; letter-spacing: .16em; color: #9a9a95; }
.ix-groups > div > div { display: flex; flex-wrap: wrap; gap: 5px; }
.ix-groups button { cursor: pointer; white-space: nowrap; padding: 6px 9px; border: 1px solid #3a3a3a; background: transparent; color: var(--paper); font: 800 11.5px 'Archivo', sans-serif; }
.ix-groups button.on { background: var(--g); border-color: var(--g); color: var(--ink); }
.ix-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 9px; }
.ix-chips button { cursor: pointer; display: inline-flex; align-items: center; gap: 7px; padding: 5px 9px; border: 0; background: var(--g); color: var(--ink); font: 800 11.5px 'Archivo', sans-serif; }
.ix-chips button span { font-weight: 400; }
.ix-chips .ix-clearall { margin-left: 4px; padding: 5px 0; background: transparent; color: #bdbdb8; font-size: 11px; letter-spacing: .12em; text-decoration: underline; }
.ix-chips .ix-clearall:hover { color: var(--g); }

/* — the lists — */
.ix-main { background: var(--paper); color: var(--ink); }
.ix-main > .ix-in { padding-top: clamp(28px, 3vw, 44px); padding-bottom: 80px; }
.ix-sec + .ix-sec { margin-top: clamp(40px, 5vw, 64px); }
.ix-h2 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px; padding-bottom: 12px; border-bottom: 2px solid var(--ink); margin-bottom: 16px !important; font: 900 clamp(30px, 3.4vw, 52px)/.9 'Archivo', sans-serif; letter-spacing: -.05em; color: var(--ink); }
.ix-h2 i { font: 800 12px 'Archivo', sans-serif; font-style: normal; letter-spacing: .2em; }
.ix-h2 small { font: 600 13px 'Archivo', sans-serif; letter-spacing: 0; color: var(--soft); }

/* the instructor of the month */
.ix-feat { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); border: 2px solid var(--ink); background: var(--ink); color: var(--paper); }
.ix-feat-img { position: relative; min-height: clamp(340px, 34vw, 480px); overflow: hidden; }
.ix-feat-bg { position: absolute; inset: 0; background-size: cover; background-position: center; }
.ix-feat-shade { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(10,10,10,.95) 0%, rgba(10,10,10,.3) 55%, rgba(10,10,10,.05) 100%); }
.ix-feat-who { position: absolute; left: clamp(18px, 2.4vw, 30px); right: clamp(18px, 2.4vw, 30px); bottom: clamp(18px, 2.4vw, 28px); display: flex; align-items: flex-end; gap: 18px; }
.ix-feat-who > div { min-width: 0; }
.ix-feat-tag { display: inline-block; padding: 4px 8px; margin-bottom: 10px; background: var(--g); color: var(--ink); font: 800 9.5px 'Archivo', sans-serif; letter-spacing: .14em; }
.ix .ix-feat-name { display: block; font: 900 clamp(34px, 4vw, 64px)/.88 'Archivo', sans-serif; letter-spacing: -.05em; color: var(--paper); overflow-wrap: anywhere; }
.ix .ix-feat-name:hover { color: var(--g); }
.ix-feat-role { font: 800 14px 'Archivo', sans-serif; color: var(--g); margin-top: 8px; }
.ix-feat-txt { display: flex; flex-direction: column; min-width: 0; padding: clamp(20px, 2.6vw, 32px); }
.ix-quote { font: 600 clamp(16px, 1.4vw, 20px)/1.45 'Archivo', sans-serif; margin-bottom: 18px !important; text-wrap: pretty; }
.ix-lab { font: 800 9.5px 'Archivo', sans-serif; letter-spacing: .16em; color: #9a9a95; margin-bottom: 8px !important; }
.ix-feat-cred { font: 800 14px/1.5 'Archivo', sans-serif; margin-bottom: 18px !important; }
.ix-feat-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid #2a2a2a; margin-bottom: 18px; }
.ix-feat-stats > div { padding: 12px 14px; border-right: 1px solid #2a2a2a; min-width: 0; }
.ix-feat-stats > div:last-child { border-right: 0; }
.ix-feat-stats strong { display: block; font: 900 26px/1 'Archivo', sans-serif; letter-spacing: -.04em; }
.ix-feat-stats span { display: block; font: 800 9px 'Archivo', sans-serif; letter-spacing: .14em; color: #9a9a95; margin-top: 6px; }
.ix-feat-none { font: 600 14px 'Archivo', sans-serif; color: #bdbdb8; padding: 11px 0; border-top: 1px solid #262626; }
.ix-offer { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-top: 1px solid #262626; }
.ix-offer-k { flex: none; padding: 3px 7px; border: 1px solid var(--g); color: var(--g); font: 800 9px 'Archivo', sans-serif; letter-spacing: .13em; }
.ix-offer-k.is-g { background: var(--g); color: var(--ink); }
.ix-offer-t { min-width: 0; flex: 1; font: 800 14px 'Archivo', sans-serif; }
.ix-offer:hover .ix-offer-t { color: var(--g); }
.ix-offer-m { flex: none; font: 800 12.5px 'Archivo', sans-serif; color: #bdbdb8; }
.ix-feat-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 18px; }

/* buttons */
.ix .ix-btn { display: inline-flex; align-items: center; justify-content: center; text-align: center; cursor: pointer; padding: 12px 16px; border: 2px solid var(--ink); background: transparent; color: var(--ink); font: 800 11.5px 'Archivo', sans-serif; letter-spacing: .14em; transition: background .2s, color .2s; }
.ix .ix-btn.is-g { background: var(--g); }
.ix .ix-btn.is-g:hover { background: var(--ink); color: var(--g); }
.ix .ix-btn.is-o:hover { background: var(--ink); color: var(--paper); }
.ix .ix-feat .ix-btn.is-g { border-color: var(--g); padding: 14px 18px; }
.ix .ix-feat .ix-btn.is-g:hover { background: var(--paper); border-color: var(--paper); color: var(--ink); }
.ix .ix-feat .ix-btn.is-o { border-color: var(--paper); color: var(--paper); padding: 12px 16px; }
.ix .ix-feat .ix-btn.is-o:hover { background: var(--paper); color: var(--ink); }

/* the cards */
.ix-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.ix-card { display: flex; flex-direction: column; min-width: 0; background: #fff; border: 2px solid var(--ink); transition: box-shadow .2s; }
.ix-card:hover { box-shadow: 7px 7px 0 var(--g); }
.ix-cover { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; border-bottom: 2px solid var(--ink); background: #141414; }
.ix-cover-img { position: absolute; inset: 0; background-size: cover; background-position: center; transition: transform .8s cubic-bezier(.2,.7,.2,1); }
.ix-card:hover .ix-cover-img { transform: scale(1.05); }
.ix-nobg { background: repeating-linear-gradient(-45deg, #0f0f0f 0 22px, #161616 22px 44px); }
.ix-avail { position: absolute; left: 10px; top: 10px; max-width: calc(100% - 20px); padding: 4px 8px; background: var(--ink); color: var(--paper); font: 800 9.5px 'Archivo', sans-serif; letter-spacing: .12em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ix-avail.is-on { background: var(--g); color: var(--ink); }
.ix-body { position: relative; flex: 1; display: flex; flex-direction: column; padding: 0 15px 15px; }
.ix-av { position: relative; display: grid; place-items: center; width: 64px; height: 64px; flex: none; margin-top: -34px; margin-bottom: 10px; border-radius: 999px !important; background: var(--ink) center / cover no-repeat; border: 3px solid var(--paper); box-shadow: 0 0 0 2px var(--ink); color: var(--g); font: 900 21px 'Archivo', sans-serif; }
.ix-av.is-big { width: 96px; height: 96px; margin: 0; border-color: var(--g); box-shadow: none; font-size: 32px; }
.ix .ix-name { font: 900 20px/1.05 'Archivo', sans-serif; letter-spacing: -.025em; color: var(--ink); overflow-wrap: anywhere; }
.ix .ix-name:hover { color: #0a6b2a; }
.ix-role { font: 700 12.5px 'Archivo', sans-serif; color: var(--soft); margin-top: 4px; }
.ix-cred { font: 600 12px/1.45 'Archivo', sans-serif; margin-top: 8px; color: #2a2a2a; }
.ix-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 10px; }
.ix-tags span { padding: 3px 6px; border: 1px solid var(--ink); font: 800 10px 'Archivo', sans-serif; }
.ix-top { margin-bottom: 12px; }
.ix-nums { margin-top: auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--ink); padding-top: 9px; }
.ix-nums strong { display: block; font: 900 16px 'Archivo', sans-serif; }
.ix-nums span { display: block; font: 800 8.5px 'Archivo', sans-serif; letter-spacing: .14em; margin-top: 2px; }
.ix-next { font: 800 12px 'Archivo', sans-serif; margin-top: 10px; }
.ix-card-btns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-top: 12px; }
.ix .ix-card-btns .ix-btn { padding: 10px 6px; font-size: 10.5px; letter-spacing: .12em; }

.ix-none { padding: clamp(30px, 4vw, 56px); background: #fff; border: 2px dashed var(--ink); }
.ix-none b { display: block; font: 900 clamp(26px, 3vw, 40px)/1 'Archivo', sans-serif; letter-spacing: -.04em; margin-bottom: 10px; }
.ix-none p { font: 600 14.5px 'Archivo', sans-serif; color: var(--soft); margin-bottom: 16px !important; }
.ix .ix-none .ix-btn { padding: 13px 17px; letter-spacing: .16em; }

/* — teach — */
.ix-teach { position: relative; overflow: hidden; background: var(--g); color: var(--ink); }
.ix-teach-stripe { height: 14px; background: repeating-linear-gradient(-45deg, var(--ink) 0 7px, var(--g) 7px 14px); }
.ix-teach-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 28px; align-items: end; padding-top: clamp(60px, 7vw, 100px); padding-bottom: clamp(60px, 7vw, 100px); }
.ix-teach-k { font: 800 10.5px 'Archivo', sans-serif; letter-spacing: .16em; margin-bottom: 14px !important; }
.ix-teach h2 { font: 900 clamp(46px, 6.6vw, 112px)/.84 'Archivo', sans-serif; letter-spacing: -.06em; margin-bottom: 16px; color: var(--ink); overflow-wrap: anywhere; }
.ix-teach-d { font: 700 clamp(15px, 1.3vw, 18px)/1.5 'Archivo', sans-serif; max-width: 52ch; }
.ix .ix-teach-go { padding: 20px 24px; background: var(--ink); color: var(--g); font: 800 13px 'Archivo', sans-serif; letter-spacing: .14em; white-space: nowrap; transition: background .2s, color .2s; }
.ix .ix-teach-go:hover { background: var(--paper); color: var(--ink); }

.ix button:focus-visible, .ix a:focus-visible { outline: 2px solid var(--g); outline-offset: 3px; }

/* — narrower — */
@media (max-width: 1200px){ .ix-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1000px){
    .ix-hero-grid, .ix-feat, .ix-teach-grid { grid-template-columns: minmax(0, 1fr); }
    .ix-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ix-bar-row { flex-wrap: wrap; }
    .ix-disc { order: 5; flex-basis: 100%; }
    .ix-sorts { margin-left: auto; }
    .ix-teach-go { justify-self: start; }
}
@media (max-width: 560px){
    .ix-grid, .ix-groups { grid-template-columns: minmax(0, 1fr); }
    .ix-groups > div { border-right: 0; border-bottom: 1px solid #2a2a2a; }
    .ix-groups > div:last-child { border-bottom: 0; }
    .ix-stats { flex-wrap: wrap; }
    .ix-stats > div { flex: 1 1 0; min-width: 0; padding: 12px 12px; }
    .ix .ix-search input { padding-right: 16px; font-size: 15px; }
    .ix-search b { position: static; display: inline-grid; margin-top: 8px; padding: 8px 12px; }
    .ix-sorts { margin-left: 0; }
    .ix-sorts button { padding: 9px 8px; }
    .ix-feat-who { flex-direction: column; align-items: flex-start; gap: 12px; }
    .ix-av.is-big { width: 72px; height: 72px; font-size: 24px; }
    .ix-offer { flex-wrap: wrap; gap: 6px 12px; }
    .ix-offer-m { flex-basis: 100%; }
    .ix .ix-teach-go { white-space: normal; }
}