/* Each image has its own focal point; keep the subject above the bottom fade at every width. */

.subjects{max-width:1080px;padding-top:28px;padding-bottom:35px}.subjects .eyebrow{margin-bottom:12px;font-size:12px}.subjects h1{font-size:46px;line-height:1.15;letter-spacing:-1.8px}.subjects h1 span{color:#7b2cbf}.subject-intro{margin:12px 0 24px;color:#756182;font-size:14px}.subject-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}.subject-tile{border:1px solid #e5d9ed;border-bottom:4px solid #d5c2e4;border-radius:17px;overflow:hidden;background:#fff;display:flex;flex-direction:column;transition:transform .16s,border-color .16s}.subject-tile:hover{transform:translateY(-3px);border-color:#a77bc8}.subject-art{height:155px;position:relative;overflow:hidden;background:#f7f3fa}.subject-info{padding:8px 18px 12px;display:flex;flex-direction:column;flex:1}.subject-info h2{font-size:22px;line-height:1.2;letter-spacing:-.7px}.subject-info p{font-size:12px;line-height:1.55;margin-top:7px;color:#665074}.subject-availability{display:block;font-size:12px;color:#526e82;margin-top:6px;line-height:1.5}.subject-start{display:flex;justify-content:space-between;align-items:center;font-weight:600;color:#7b2cbf;font-size:13px;min-height:44px;margin-top:auto;padding-top:8px}.subject-start b{font-size:23px}.subject-foot{font-size:12px;color:#756182;margin-top:20px;line-height:1.7}.subject-back{font-size:13px;font-weight:600;color:#7b2cbf;min-height:44px;display:flex;align-items:center}@media(max-width:850px){.subject-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.subjects h1{font-size:40px}}@media(max-width:550px){.subjects{padding-top:18px}.subjects h1{font-size:32px;letter-spacing:-1px}.subject-intro{font-size:12px;margin-bottom:18px}.subject-grid{grid-template-columns:1fr;gap:14px}.subject-art{height:125px}.subject-info{padding:4px 16px 8px}.subject-info h2{font-size:22px}.subject-info p{margin-top:5px}.subject-availability{margin-top:4px}.subject-start{padding-top:4px}.subjects .eyebrow{font-size:12px;margin-bottom:10px}}@media(prefers-reduced-motion:reduce){.subject-tile{transition:none}.subject-tile:hover{transform:none}}
/* Subject photos (free Pexels photos, credits in assets/subjects/photo/CREDITS.md): the photo fills the tile and the
   name sits on a dark fade, so the tile reads the same in light and dark mode. Locked subjects turn grey. */
.subject-grid .subject-tile{position:relative;min-height:290px;background:#241731;border-color:#2c1d3a;border-bottom-color:#170e20;color:#fff}.subject-grid .subject-tile:hover{border-color:#7b2cbf}.subject-grid .subject-art{position:absolute;inset:0;height:auto;background:#241731}.subject-photo{position:absolute;inset:0;background:var(--photo) center/cover no-repeat;transition:transform .3s}.subject-grid .subject-tile:hover .subject-photo{transform:scale(1.03)}.subject-art:after{content:'';position:absolute;inset:0;background:linear-gradient(to bottom,rgba(20,8,32,0) 28%,rgba(20,8,32,.55) 55%,rgba(20,8,32,.92) 100%)}.subject-grid .subject-info{position:relative;z-index:1;margin-top:auto;flex:none;padding:12px 18px 10px}.subject-grid .subject-info h2{color:#fff;font-size:24px;text-shadow:0 1px 8px rgba(0,0,0,.35)}.subject-grid .subject-info p{color:#efe6f6}.subject-grid .subject-start{color:#fff}.subject-grid .subject-tile.locked{background:#241731;border-color:#2c1d3a;border-bottom-color:#2c1d3a}.subject-grid .subject-tile.locked .subject-photo{filter:grayscale(1) brightness(.7)}.subject-grid .subject-tile.locked h2{color:#e9e3ee}.subject-grid .subject-tile.locked .subject-info p,.subject-grid .subject-tile.locked .subject-start{color:#d2c8da}@media(max-width:550px){.subject-grid .subject-tile{min-height:210px}.subject-grid .subject-info h2{font-size:22px}}@media(prefers-reduced-motion:reduce){.subject-photo{transition:none}.subject-grid .subject-tile:hover .subject-photo{transform:none}}.photo-biology{--photo:url('assets/subjects/photo/biology.webp')}.photo-chemistry{--photo:url('assets/subjects/photo/chemistry.webp')}.photo-physics{--photo:url('assets/subjects/photo/physics.webp')}.photo-maths{--photo:url('assets/subjects/photo/maths.webp')}.photo-english{--photo:url('assets/subjects/photo/english.webp')}.photo-literature{--photo:url('assets/subjects/photo/literature.webp')}.photo-malti{--photo:url('assets/subjects/photo/malti.webp')}.photo-accounting{--photo:url('assets/subjects/photo/accounting.webp')}.photo-business{--photo:url('assets/subjects/photo/business.webp')}.photo-computing{--photo:url('assets/subjects/photo/computing.webp')}.photo-economics{--photo:url('assets/subjects/photo/economics.webp')}.photo-homeec{--photo:url('assets/subjects/photo/homeec.webp')}.photo-social{--photo:url('assets/subjects/photo/social.webp')}

/* Dark mode for the subject picker and unlock page only (scoped, so the light landing page is untouched). */
@media(prefers-color-scheme:dark){
body:has(main.subjects){color-scheme:dark;--purple:#c99bf0;--ink:#eadff2;--muted:#b3a2c1;--line:#3f2f4b;background:#1d1424}
body:has(main.subjects) .brand{color:#c99bf0}
body:has(main.subjects) .skip{background:#271b31;color:#eadff2}
body:has(main.subjects) a:focus-visible,body:has(main.subjects) button:focus-visible{outline-color:#dcbcf7}
.subjects .eyebrow{color:#c9a6e6}
.subjects h1 span,.subject-start,.subject-back{color:#c99bf0}
.subject-intro,.subject-info p,.subject-foot{color:#b3a2c1}
.subject-availability{color:#9fc0d6}
.subject-tile{background:#271b31;border-color:#3f2f4b;border-bottom-color:#4f3a60}
.subject-tile:hover{border-color:#8a64a8}
.subject-art{background:#2f2239}
/* The mark PNG has a half-white background: sit it on a white chip so it does not show as a grey box. */
body:has(main.subjects) .brand img{background:#fff;border-radius:10px;padding:2px}
}

/* Header logo link: full 44px tap target on the picker and unlock pages. */
body:has(main.subjects) .brand{min-height:44px}