/*
Theme Name: Lysong Academy
Theme URI: https://lysongsun.academy
Author: Lysong Sun
Description: A professional theme for a teacher's academy site — Home, Gallery, About Me, Contact.
Version: 1.0
Requires PHP: 7.4
Text Domain: lysong-academy
*/

/* =========================================================
   DESIGN TOKENS
   Palette pulled from the classroom itself:
   - Chalkboard green (primary / dark surfaces)
   - Chalk white (paper / light surfaces)
   - Gold seal (achievement, certificates, stars)
   - Red pen (teacher's annotation mark, used sparingly)
   ========================================================= */
:root{
  --ink:            #16261F;   /* near-black, chalkboard shadow */
  --board:          #1F3A2E;   /* chalkboard green */
  --board-deep:     #142A21;   /* darker chalkboard for depth */
  --paper:          #F7F4EC;   /* chalk-white paper */
  --paper-dim:      #EFEADC;   /* slightly deeper paper for cards */
  --chalk:          #FBFAF6;   /* brightest chalk white */
  --gold:           #C99A3E;   /* gold seal / star */
  --gold-soft:      #E7C97A;
  --red-pen:        #B5452F;   /* teacher's red pen, sparing use */
  --text:           #22302A;
  --text-muted:     #5B675F;
  --line:           rgba(22,38,31,0.14);

  --font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono:    "Space Mono", "SFMono-Regular", Menlo, monospace;

  --container: 1160px;
  --radius: 4px;
  --transition: 220ms ease;
}

/* =========================================================
   RESET / BASE
   ========================================================= */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  background: var(--paper);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
button{ font-family:inherit; cursor:pointer; }

h1,h2,h3,h4{
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--ink);
  line-height: 1.12;
  margin: 0 0 0.5em;
}
h1{ font-size: clamp(2.4rem, 5vw + 1rem, 4.4rem); font-weight: 500; }
h2{ font-size: clamp(1.8rem, 3vw + 1rem, 2.7rem); }
h3{ font-size: clamp(1.2rem, 1vw + 1rem, 1.5rem); }
p{ margin: 0 0 1em; }

.container{
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 28px;
}
.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
}
.eyebrow::before{
  content:"";
  width:18px; height:1px;
  background: var(--gold);
}

/* Marker-highlight: a hand-inked underline swept beneath a key phrase,
   like a teacher marking the important word in a sentence. */
.mark{
  position:relative;
  white-space:nowrap;
}
.mark::after{
  content:"";
  position:absolute;
  left:-2%; right:-2%; bottom:0.02em;
  height:0.34em;
  background: var(--gold-soft);
  z-index:-1;
  transform: skewX(-6deg) rotate(-0.6deg);
  border-radius: 2px 6px 3px 7px / 4px 2px 6px 3px;
}

.btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding: 14px 28px;
  border-radius: var(--radius);
  font-family: var(--font-mono);
  font-size: 0.82rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border: 1px solid transparent;
  transition: transform var(--transition), background var(--transition), color var(--transition), border-color var(--transition);
}
.btn-primary{
  background: var(--gold);
  color: var(--ink);
}
.btn-primary:hover{ background: var(--gold-soft); transform: translateY(-2px); }
.btn-outline{
  border-color: rgba(247,244,236,0.4);
  color: var(--chalk);
}
.btn-outline:hover{ border-color: var(--chalk); transform: translateY(-2px); }
.btn-outline.on-light{
  border-color: var(--ink);
  color: var(--ink);
}
.btn-outline.on-light:hover{ background: var(--ink); color: var(--chalk); }

/* =========================================================
   HEADER
   ========================================================= */
.site-header{
  position: sticky; top:0; z-index: 50;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}
.site-header .container{
  display:flex; align-items:center; justify-content:space-between;
  padding-top: 18px; padding-bottom: 18px;
}
.site-logo{
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--ink);
  display:flex;
  align-items:baseline;
  gap: 8px;
}
.site-logo .dot{ color: var(--gold); }
.site-logo small{
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 400;
  margin-left: 4px;
}
.main-nav ul{ display:flex; gap: 34px; align-items:center; }
.main-nav a{
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text);
  position:relative;
  padding: 4px 0;
}
.main-nav a::after{
  content:"";
  position:absolute; left:0; bottom:-2px;
  width:0; height:2px;
  background: var(--red-pen);
  transition: width var(--transition);
}
.main-nav a:hover::after,
.main-nav .current-menu-item a::after{ width:100%; }
.header-cta{ display:flex; align-items:center; gap:22px; }
.nav-toggle{
  display:none;
  background:none; border:none;
  flex-direction:column; gap:5px;
  padding: 6px;
}
.nav-toggle span{ width:22px; height:2px; background: var(--ink); display:block; }

@media (max-width: 860px){
  .nav-toggle{ display:flex; }
  .main-nav{
    position:absolute; top:100%; left:0; right:0;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    display:none;
  }
  .main-nav.is-open{ display:block; }
  .main-nav ul{ flex-direction:column; gap:0; padding: 10px 28px 22px; align-items:flex-start; }
  .main-nav li{ width:100%; padding: 12px 0; border-bottom: 1px solid var(--line); }
  .header-cta .btn-outline.on-light{ display:none; }
}

/* =========================================================
   HERO (front page)
   ========================================================= */
.hero{
  background: var(--board);
  background-image:
    radial-gradient(ellipse at 15% 20%, rgba(255,255,255,0.045), transparent 45%),
    radial-gradient(ellipse at 85% 80%, rgba(255,255,255,0.035), transparent 45%);
  color: var(--chalk);
  position: relative;
  overflow:hidden;
}
.hero .container{
  display:grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 56px;
  align-items:center;
  padding-top: 88px;
  padding-bottom: 88px;
}
.hero h1{ color: var(--chalk); }
.hero h1 em{
  font-style: italic;
  color: var(--gold-soft);
}
.hero-lead{
  font-size: 1.08rem;
  max-width: 46ch;
  color: rgba(247,244,236,0.82);
}
.hero-actions{ display:flex; gap:16px; margin-top: 28px; flex-wrap:wrap; }

/* =========================================================
   HERO SLIDER (auto-rotating photo set, replaces static portrait)
   ========================================================= */
.hero-frame{
  position:relative;
  width:100%;
  aspect-ratio: 4/5;
  background: var(--paper-dim);
  border-radius: 6px;
  transform: rotate(0.6deg);
  box-shadow:
    0 30px 70px rgba(0,0,0,0.4),
    0 0 0 1px rgba(247,244,236,0.08);
  outline: 1px solid rgba(201,154,62,0.5);
  outline-offset: 8px;
  overflow:hidden;
}
.hero-frame::after{
  content:"";
  position:absolute; inset:0;
  box-shadow: inset 0 0 0 1px rgba(247,244,236,0.14);
  pointer-events:none;
  z-index:5;
}
.hero-slide{
  position:absolute; inset:0;
  opacity:0;
  transition: opacity 900ms ease;
  z-index:1;
}
.hero-slide.is-active{ opacity:1; z-index:2; }
.hero-slide img{ width:100%; height:100%; object-fit:cover; display:block; }
.hero-frame .placeholder-note{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  flex-direction:column; gap:8px; text-align:center; padding: 24px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  background: repeating-linear-gradient(45deg, var(--paper-dim), var(--paper-dim) 10px, #E7E1D0 10px, #E7E1D0 20px);
}
.hero-dots{
  position:absolute; left:0; right:0; bottom:16px;
  z-index:3;
  display:flex; justify-content:center; gap:7px;
}
.hero-dots button{
  width:7px; height:7px; border-radius:50%;
  background: rgba(247,244,236,0.45);
  border:none; padding:0;
  transition: background var(--transition), transform var(--transition);
}
.hero-dots button.is-active{ background: var(--gold); transform: scale(1.3); }
@media (max-width: 860px){
  .hero .container{ grid-template-columns: 1fr; padding-top:56px; padding-bottom:56px; }
  .hero-frame{ max-width: 320px; margin: 0 auto; outline-offset: 6px; }
}

/* =========================================================
   SECTION: SUBJECTS / SERVICES
   ========================================================= */
.section{ padding: 96px 0; }
.section-head{ max-width: 640px; margin-bottom: 52px; }
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }

.subject-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  background: var(--line);
  border: 1px solid var(--line);
}
.subject-card{
  background: var(--paper);
  padding: 40px 32px;
  transition: background var(--transition);
  position:relative;
}
.subject-card:hover{ background: var(--paper-dim); }
.subject-card::before{
  content:"";
  position:absolute; top:0; left:0; right:0; height:3px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transition);
}
.subject-card:hover::before{ transform: scaleX(1); }
.subject-card .card-icon{
  display:flex; align-items:center; justify-content:center;
  width:44px; height:44px;
  border-radius:50%;
  background: var(--paper-dim);
  color: var(--red-pen);
  margin-bottom: 22px;
}
.subject-card .card-icon svg{ width:22px; height:22px; }
.subject-card .num{
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--gold);
  letter-spacing: 0.08em;
}
.subject-card h3{ margin-top: 14px; margin-bottom: 10px; }
.subject-card p{ color: var(--text-muted); font-size: 0.95rem; margin-bottom:0; }

@media (max-width: 860px){
  .subject-grid{ grid-template-columns: 1fr; }
}

/* =========================================================
   LEDGER / STATS (report-card style row)
   ========================================================= */
.ledger{
  background: var(--ink);
  color: var(--chalk);
}
.ledger .container{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}
.ledger-item{
  padding: 44px 28px;
  border-left: 1px solid rgba(247,244,236,0.14);
  text-align:center;
}
.ledger-item:first-child{ border-left:none; }
.ledger-item .figure{
  font-family: var(--font-mono);
  font-size: clamp(1.8rem, 2vw + 1rem, 2.6rem);
  color: var(--gold-soft);
}
.ledger-item .label{
  margin-top: 8px;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(247,244,236,0.65);
}
@media (max-width: 700px){
  .ledger .container{ grid-template-columns: repeat(2, 1fr); }
  .ledger-item{ border-left:none; border-top: 1px solid rgba(247,244,236,0.14); }
  .ledger-item:nth-child(1),.ledger-item:nth-child(2){ border-top:none; }
}

/* =========================================================
   TESTIMONIALS (sticky-note style)
   ========================================================= */
.testimonials{ background: var(--paper-dim); }
.testi-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.testi-card{
  background: var(--chalk);
  border: 1px solid var(--line);
  padding: 30px 28px;
  position:relative;
}
.testi-card:nth-child(2){ transform: rotate(-0.6deg); }
.testi-card:nth-child(3){ transform: rotate(0.5deg); }
.testi-stars{ color: var(--gold); font-size: 0.85rem; letter-spacing: 2px; margin-bottom: 14px; }
.testi-quote{
  font-family: var(--font-display);
  font-size: 1.06rem;
  color: var(--ink);
  margin-bottom: 18px;
}
.testi-name{ font-family: var(--font-mono); font-size: 0.75rem; text-transform:uppercase; letter-spacing:0.06em; color: var(--text-muted); }

@media (max-width: 860px){ .testi-grid{ grid-template-columns:1fr; } }

/* =========================================================
   CTA BANNER
   ========================================================= */
.cta-banner{
  background: var(--board-deep);
  color: var(--chalk);
  text-align:center;
}
.cta-banner h2{ color: var(--chalk); }
.cta-banner .lead{ color: rgba(247,244,236,0.78); max-width: 52ch; margin: 0 auto 30px; }

/* =========================================================
   GALLERY PAGE
   ========================================================= */
.page-hero{
  background: var(--board);
  color: var(--chalk);
  padding: 72px 0 60px;
}
.page-hero h1{ color: var(--chalk); margin-bottom: 12px; }
.page-hero .lead{ color: rgba(247,244,236,0.78); max-width: 60ch; }

.gallery-wrap{ padding: 80px 0; }
.gallery-wrap .wp-block-gallery,
.gallery-wrap .gallery{
  gap: 4px !important;
}
.gallery-wrap .gallery-item,
.gallery-wrap .wp-block-image{
  position:relative;
  overflow:hidden;
}
.gallery-wrap img{
  transition: transform 420ms ease;
  aspect-ratio: 1;
  object-fit: cover;
  width:100%;
}
.gallery-wrap .gallery-item:hover img,
.gallery-wrap .wp-block-image:hover img{ transform: scale(1.05); }
.gallery-empty{
  border: 1px dashed var(--line);
  padding: 60px 28px;
  text-align:center;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--text-muted);
}

/* =========================================================
   ABOUT PAGE
   ========================================================= */
.about-hero{
  padding: 80px 0;
}
.about-hero .container{
  display:grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 56px;
  align-items:center;
}
.about-photo{
  aspect-ratio: 3/4;
  background: var(--paper-dim);
  border: 1px solid var(--line);
  position:relative;
  overflow:hidden;
}
.about-photo img{ width:100%; height:100%; object-fit:cover; }
.about-bio{ max-width: 60ch; }
.about-bio .role{
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform:uppercase;
  color: var(--red-pen);
  margin-bottom: 14px;
  display:block;
}
@media (max-width: 860px){ .about-hero .container{ grid-template-columns:1fr; } .about-photo{ max-width:280px; } }

.report-card{
  background: var(--paper-dim);
  padding: 20px 0 96px;
}
.report-card .inner{
  background: var(--chalk);
  border: 1px solid var(--line);
  padding: 8px 0;
}
.ledger-row{
  display:grid;
  grid-template-columns: 120px 1fr auto;
  gap: 24px;
  align-items:baseline;
  padding: 20px 36px;
  border-bottom: 1px solid var(--line);
}
.ledger-row:last-child{ border-bottom:none; }
.ledger-row .yr{ font-family: var(--font-mono); color: var(--gold); font-size: 0.85rem; }
.ledger-row .desc h4{ margin:0 0 4px; font-size: 1.05rem; }
.ledger-row .desc p{ margin:0; color: var(--text-muted); font-size: 0.9rem; }
.ledger-row .tag{
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform:uppercase;
  color: var(--text-muted);
  white-space:nowrap;
}
@media (max-width: 700px){
  .ledger-row{ grid-template-columns: 1fr; gap:6px; }
}

.philosophy{
  padding: 90px 0;
  text-align:center;
}
.philosophy blockquote{
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2vw + 1rem, 2.1rem);
  color: var(--ink);
  max-width: 800px;
  margin: 0 auto;
  font-style: italic;
}
.philosophy cite{
  display:block;
  margin-top: 24px;
  font-family: var(--font-mono);
  font-style: normal;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* =========================================================
   CONTACT PAGE
   ========================================================= */
.contact-wrap{ padding: 80px 0; }
.contact-grid{
  display:grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 64px;
}
.contact-info h3{ margin-bottom: 6px; }
.contact-list{ margin-top: 30px; display:flex; flex-direction:column; gap:22px; }
.contact-item .label{
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--red-pen);
  display:block;
  margin-bottom: 4px;
}
.contact-item .value{ font-size: 1.05rem; }
.social-row{ margin-top: 30px; display:flex; gap:12px; flex-wrap:wrap; }
.social-row a{
  display:inline-flex; align-items:center; gap:9px;
  border:1px solid var(--line);
  padding: 10px 16px 10px 12px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.social-row a svg{ width:16px; height:16px; flex-shrink:0; }
.social-row a:hover{ background: var(--ink); color: var(--chalk); border-color: var(--ink); }

.contact-form{
  background: var(--paper-dim);
  border: 1px solid var(--line);
  padding: 40px;
}
.form-row{ margin-bottom: 20px; }
.form-row label{
  display:block;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 8px;
  color: var(--text-muted);
}
.form-row input,
.form-row textarea{
  width:100%;
  border: 1px solid var(--line);
  background: var(--chalk);
  padding: 13px 14px;
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--text);
  border-radius: 2px;
}
.form-row input:focus,
.form-row textarea:focus{
  outline: none;
  border-color: var(--gold);
}
.form-row textarea{ min-height: 140px; resize: vertical; }
.form-honeypot{ position:absolute; left:-9999px; }
.form-note{
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 20px;
}
.form-msg{
  margin-top: 16px;
  padding: 12px 16px;
  font-size: 0.9rem;
  border-radius: 2px;
}
.form-msg.success{ background: #E4EFE6; color: #2A5F3A; }
.form-msg.error{ background: #F3E1DC; color: var(--red-pen); }

@media (max-width: 860px){
  .contact-grid{ grid-template-columns:1fr; }
  .contact-form{ padding: 28px; }
}

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer{
  background: var(--ink);
  color: rgba(247,244,236,0.75);
  padding: 60px 0 28px;
}
.footer-top{
  display:flex;
  justify-content:space-between;
  gap: 40px;
  flex-wrap:wrap;
  padding-bottom: 36px;
  border-bottom: 1px solid rgba(247,244,236,0.14);
  margin-bottom: 24px;
}
.footer-brand{ font-family: var(--font-display); font-size:1.3rem; color: var(--chalk); }
.footer-nav ul{ display:flex; gap:24px; flex-wrap:wrap; }
.footer-nav a{ font-family: var(--font-mono); font-size:0.75rem; text-transform:uppercase; letter-spacing:0.05em; }
.footer-nav a:hover{ color: var(--gold-soft); }
.footer-mid{
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px;
  padding-bottom: 24px;
}
.footer-tag{
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(247,244,236,0.5);
}
.footer-social{ display:flex; gap:12px; }
.footer-social a{
  width:36px; height:36px;
  border-radius:50%;
  border: 1px solid rgba(247,244,236,0.25);
  display:flex; align-items:center; justify-content:center;
  color: rgba(247,244,236,0.8);
  transition: background var(--transition), border-color var(--transition), color var(--transition), transform var(--transition);
}
.footer-social a svg{ width:16px; height:16px; }
.footer-social a:hover{ background: var(--gold); border-color: var(--gold); color: var(--ink); transform: translateY(-2px); }
.footer-bottom{
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px;
  font-family: var(--font-mono); font-size: 0.72rem; color: rgba(247,244,236,0.5);
}

/* =========================================================
   CREDENTIAL STRIP (home page — clickable certificate preview)
   ========================================================= */
.cred-strip{ background: var(--paper); }
.cred-strip .section-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.cred-strip .section-head .view-all{
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--red-pen);
  border-bottom: 1px solid var(--red-pen);
  padding-bottom: 2px;
  white-space:nowrap;
}
.cred-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.cred-card{
  position:relative;
  display:block;
  border: 1px solid var(--line);
  background: var(--paper-dim);
  overflow:hidden;
  cursor: zoom-in;
}
.cred-card .cred-thumb{
  aspect-ratio: 4/3;
  overflow:hidden;
  position:relative;
}
.cred-card img{
  width:100%; height:100%; object-fit:cover;
  transition: transform 420ms ease;
}
.cred-card:hover img{ transform: scale(1.06); }
.cred-card .cred-zoom{
  position:absolute; top:10px; right:10px;
  width:30px; height:30px;
  border-radius:50%;
  background: rgba(22,38,31,0.72);
  color: var(--chalk);
  display:flex; align-items:center; justify-content:center;
  font-size: 0.9rem;
  opacity:0;
  transform: translateY(-4px);
  transition: opacity var(--transition), transform var(--transition);
}
.cred-card:hover .cred-zoom{ opacity:1; transform:translateY(0); }
.cred-card .cred-cap{ padding: 16px 18px; }
.cred-card .cred-cap h4{ font-size:0.92rem; margin:0 0 4px; font-family: var(--font-display); color: var(--ink); }
.cred-card .cred-cap span{ font-family: var(--font-mono); font-size:0.68rem; letter-spacing:0.05em; text-transform:uppercase; color: var(--text-muted); }
@media (max-width: 960px){ .cred-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px){ .cred-grid{ grid-template-columns: 1fr; } }

/* =========================================================
   GALLERY: category grouping + clickable "view" affordance
   ========================================================= */
.gallery-category{ margin-bottom: 64px; }
.gallery-category:last-child{ margin-bottom:0; }
.gallery-category .cat-head{
  display:flex; align-items:baseline; gap:16px;
  margin-bottom: 26px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 14px;
}
.gallery-category .cat-head h2{ font-size: clamp(1.3rem, 1.4vw + 1rem, 1.7rem); margin:0; }
.gallery-category .cat-count{
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.subject-card.cert-card{ cursor: zoom-in; }
.subject-card.cert-card .cert-thumb{ position:relative; overflow:hidden; }
.subject-card.cert-card .cert-thumb::after{
  content:"⤢ View Certificate";
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  background: rgba(22,38,31,0.55);
  color: var(--chalk);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity:0;
  transition: opacity var(--transition);
}
.subject-card.cert-card:hover .cert-thumb::after{ opacity:1; }
.subject-card.cert-card img{ transition: transform 420ms ease; }
.subject-card.cert-card:hover img{ transform: scale(1.04); }

/* =========================================================
   LIGHTBOX
   ========================================================= */
.lightbox{
  position:fixed; inset:0; z-index:200;
  background: rgba(20,30,25,0.92);
  display:none;
  align-items:center; justify-content:center;
  padding: 40px 24px;
}
.lightbox.is-open{ display:flex; }
.lightbox-inner{
  position:relative;
  max-width: 900px;
  width:100%;
  max-height: 88vh;
  display:flex;
  flex-direction:column;
  align-items:center;
}
.lightbox-inner img{
  max-width:100%;
  max-height: 72vh;
  width:auto;
  object-fit:contain;
  background: var(--chalk);
  border: 1px solid rgba(247,244,236,0.2);
  box-shadow: 0 30px 70px rgba(0,0,0,0.5);
}
.lightbox-cap{
  margin-top: 18px;
  text-align:center;
  color: var(--chalk);
}
.lightbox-cap h4{ font-family: var(--font-display); font-size:1.1rem; margin:0 0 4px; color: var(--chalk); }
.lightbox-cap span{ font-family: var(--font-mono); font-size:0.72rem; letter-spacing:0.06em; text-transform:uppercase; color: rgba(247,244,236,0.6); }
.lightbox-close{
  position:absolute; top:-46px; right:0;
  width:38px; height:38px;
  border-radius:50%;
  background: rgba(247,244,236,0.12);
  color: var(--chalk);
  border:1px solid rgba(247,244,236,0.3);
  font-size: 1.1rem;
  display:flex; align-items:center; justify-content:center;
}
.lightbox-close:hover{ background: var(--red-pen); border-color: var(--red-pen); }
.lightbox-nav{
  position:absolute; top:50%; transform: translateY(-50%);
  width:44px; height:44px;
  border-radius:50%;
  background: rgba(247,244,236,0.12);
  color: var(--chalk);
  border:1px solid rgba(247,244,236,0.3);
  font-size: 1.2rem;
  display:flex; align-items:center; justify-content:center;
}
.lightbox-nav:hover{ background: var(--gold); color: var(--ink); border-color: var(--gold); }
.lightbox-prev{ left: -20px; }
.lightbox-next{ right: -20px; }
@media (max-width: 760px){
  .lightbox-prev{ left: 4px; }
  .lightbox-next{ right: 4px; }
  .lightbox-close{ top:-42px; right: 4px; }
}

/* =========================================================
   MISC / A11Y
   ========================================================= */
:focus-visible{ outline: 2px solid var(--red-pen); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce){
  *{ animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; scroll-behavior:auto !important; }
}
.skip-link{
  position:absolute; left:-9999px; top:0; background: var(--gold); color:var(--ink); padding:10px 16px; z-index:100;
}
.skip-link:focus{ left: 12px; top: 12px; }