/*
Theme Name: N.Learners Magazine
Theme URI: http://nlearners.org
Author: nlearners.org migration
Description: Editorial magazine theme for Prof. Jeongkoo Yoon's Natural Learning columns. Photo hero for the newest column; text-forward cards below, with images shown automatically on recent posts.
Version: 1.1
Text Domain: nlearners
*/
:root{
  --bg:#fff;--n50:#fafafa;--n100:#f5f5f5;--n200:#e5e5e5;--n300:#d4d4d4;
  --n400:#a3a3a3;--n500:#737373;--n600:#525252;--n700:#404040;--n800:#262626;--n900:#171717;
  --maxw:1152px;--pad:24px;
  --serif:Georgia,"Nanum Myeongjo",serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans KR",sans-serif;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--n900);font-family:var(--sans);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}
.eyebrow{font-size:12px;text-transform:uppercase;letter-spacing:.15em;color:var(--n500)}

/* Header */
.site-header{border-bottom:1px solid var(--n200)}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;padding:20px var(--pad);gap:16px}
.brand{display:flex;align-items:center;gap:12px}
.brand .mark{width:40px;height:40px;border-radius:9999px;background:var(--n900);color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-size:20px}
.brand .name{font-family:var(--serif);font-size:20px;line-height:1.1}
.brand .tag{font-size:11px;text-transform:uppercase;letter-spacing:.14em;color:var(--n500);margin-top:2px}
.main-nav{display:none;align-items:center;gap:30px;font-size:14px}
.main-nav a{color:var(--n600)}.main-nav a:hover,.main-nav a.active{color:var(--n900)}
.btn-primary{display:inline-flex;align-items:center;gap:8px;background:var(--n900);color:#fff;border-radius:9999px;padding:9px 18px;font-size:14px;border:0;cursor:pointer}
.btn-primary:hover{background:var(--n700)}
@media(min-width:900px){.main-nav{display:flex}}

/* Hero */
.hero{padding-top:40px}
.hero-head{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:24px;gap:16px;flex-wrap:wrap}
.hero-head h1{font-family:var(--serif);font-size:38px;line-height:1.12;margin:8px 0 0;font-weight:800}
.search{position:relative}
.search input{width:288px;max-width:60vw;border:1px solid var(--n300);border-radius:9999px;padding:9px 16px 9px 38px;font-size:14px;outline:none;font-family:var(--sans);background:#fff}
.search input:focus{border-color:var(--n900)}
.search svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--n400)}

.feature{border:1px solid var(--n200);border-radius:16px;overflow:hidden;background:#fff}
.feature.has-photo{display:grid;grid-template-columns:1fr 1fr}
.feature-txt{padding:32px;display:flex;flex-direction:column;justify-content:center}
.feature.no-photo .feature-txt{border-left:3px solid #0F6E56}
.feature .cat{display:inline-flex;align-items:center;gap:7px;font-size:11px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;margin-bottom:10px}
.feature h2{font-family:var(--serif);font-size:30px;line-height:1.18;margin:0;font-weight:700}
.feature .lead{font-family:var(--serif);font-style:italic;color:var(--n600);margin-top:14px;font-size:16px;line-height:1.6}
.feature .meta{display:flex;align-items:center;gap:14px;font-size:14px;color:var(--n500);margin-top:20px;flex-wrap:wrap}
.feature .readmore{margin-top:20px;display:inline-flex;align-items:center;gap:8px;font-size:14px;color:var(--n900)}
.feature-pic{background:var(--n100);overflow:hidden}
.feature-pic img{width:100%;height:100%;object-fit:cover;min-height:260px;transition:transform .5s}
.feature.has-photo:hover .feature-pic img{transform:scale(1.04)}
@media(max-width:640px){.feature.has-photo{grid-template-columns:1fr}.feature-pic img{min-height:200px}}

/* Chips */
.chips-wrap{padding-top:40px}
.chips{display:flex;flex-wrap:wrap;align-items:center;gap:8px;border-bottom:1px solid var(--n200);padding-bottom:16px}
.chip{border:1px solid var(--n300);background:#fff;color:var(--n700);border-radius:9999px;padding:6px 16px;font-size:14px;cursor:pointer;font-family:var(--sans)}
.chip:hover{border-color:var(--n500)}
.chip.active{border-color:var(--n900);background:var(--n900);color:#fff}

/* Grid + cards */
.grid-wrap{padding-top:32px;padding-bottom:32px}
.grid{display:grid;gap:1px;background:var(--n200);grid-template-columns:1fr;border-top:1px solid var(--n200);border-bottom:1px solid var(--n200)}
.card{background:#fff;padding:22px 20px;display:block}
.card .thumb{aspect-ratio:16/10;border-radius:8px;overflow:hidden;background:var(--n100);margin-bottom:14px}
.card .thumb img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.card:hover .thumb img{transform:scale(1.04)}
.card .tg{font-size:11px;letter-spacing:.08em;text-transform:uppercase;font-weight:700}
.card h3{font-family:var(--serif);font-size:19px;line-height:1.24;margin:8px 0 0;font-weight:700}
.card:hover h3{color:var(--n600)}
.card .cq{font-family:var(--serif);font-style:italic;color:var(--n600);font-size:14px;line-height:1.55;margin:8px 0 0}
.card .m{font-size:12px;color:var(--n500);margin-top:12px}
@media(min-width:640px){.grid{grid-template-columns:1fr 1fr}}
@media(min-width:1024px){.grid{grid-template-columns:1fr 1fr 1fr}}

/* Author bio */
.author{padding:56px 0}
.author .wrap{display:grid;gap:32px;grid-template-columns:1fr}
.author .photo{aspect-ratio:1;border-radius:16px;overflow:hidden;background:var(--n100);max-width:340px}
.author .photo img{width:100%;height:100%;object-fit:cover}
.author h2{font-family:var(--serif);font-size:32px;margin:8px 0 0}
.author .desc{color:var(--n600);line-height:1.7;margin-top:16px;max-width:640px}
.author .links{display:flex;gap:24px;flex-wrap:wrap;margin-top:24px;font-size:14px;color:var(--n700)}
.author .links a{display:inline-flex;align-items:center;gap:8px}
.author .ph{width:100%;height:100%;background:linear-gradient(135deg,var(--n200),var(--n100))}
@media(min-width:768px){.author .wrap{grid-template-columns:340px 1fr;align-items:center}}

/* Footer */
.site-footer{background:var(--n900);color:#fff}
.site-footer .wrap{display:flex;align-items:center;justify-content:space-between;padding:28px var(--pad);gap:16px;flex-wrap:wrap}
.site-footer .fname{font-family:var(--serif);font-size:20px}
.site-footer .fnote{font-size:13px;color:var(--n400)}

/* Article */
.article{padding:48px 0}
.article .wrap{max-width:760px}
.article .eyebrow{margin-bottom:12px;font-weight:700}
.article h1{font-family:var(--serif);font-size:38px;line-height:1.15;margin:0}
.article .meta{display:flex;align-items:center;gap:14px;font-size:14px;color:var(--n500);margin-top:16px;padding-bottom:24px;border-bottom:1px solid var(--n200);flex-wrap:wrap}
.article-hero{margin-top:28px;border-radius:12px;overflow:hidden}
.article .content{margin-top:32px;font-size:17px;line-height:1.85;color:var(--n800)}
.article .content p{margin:0 0 1.3em}
.article .content img{border-radius:8px;margin:1.5em auto}
.article .content a{color:var(--n900);text-decoration:underline;text-underline-offset:2px}
.article .content h2,.article .content h3{font-family:var(--serif);line-height:1.25;margin:1.6em 0 .6em}
.back{display:inline-flex;align-items:center;gap:8px;font-size:14px;color:var(--n500);margin-top:40px}
.back:hover{color:var(--n900)}

.page-head{padding-top:40px}
.page-head .eyebrow{margin-bottom:8px}
.page-head h1{font-family:var(--serif);font-size:38px;line-height:1.1;margin:0}
.pager{display:flex;justify-content:center;gap:8px;padding:28px 0 56px}
.pager a,.pager span{border:1px solid var(--n300);border-radius:9999px;padding:8px 16px;font-size:14px;color:var(--n700)}
.pager .current{background:var(--n900);color:#fff;border-color:var(--n900)}
.skip-link{position:absolute;left:-9999px}
.skip-link:focus{left:16px;top:16px;background:#fff;padding:8px 16px;z-index:100}
:focus-visible{outline:2px solid var(--n900);outline-offset:2px}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}

/* Dropdown navigation */
.main-nav .nav-list{display:flex;gap:30px;align-items:center;list-style:none;margin:0;padding:0}
.main-nav .nav-list>li{position:relative}
.main-nav .nav-list a{color:var(--n600);font-size:14px}
.main-nav .nav-list a:hover,.main-nav .nav-list .active>a,.main-nav .nav-list .active{color:var(--n900)}
.main-nav .menu-item-has-children>a::after{content:"⌄";margin-left:5px;font-size:12px;position:relative;top:-2px}
.main-nav .nav-list>li>.sub-menu{position:absolute;top:100%;left:0;min-width:190px;background:#fff;border:1px solid var(--n200);border-radius:10px;padding:8px 0;list-style:none;display:none;box-shadow:0 10px 28px rgba(0,0,0,.09);z-index:60}
/* invisible bridge so the mouse can cross from label to menu without a gap */
.main-nav .menu-item-has-children{padding-bottom:10px;margin-bottom:-10px}
.main-nav .nav-list>li>.sub-menu{margin-top:0}
.main-nav .nav-list>li:hover>.sub-menu,
.main-nav .nav-list>li:focus-within>.sub-menu,
.main-nav .nav-list>li.open>.sub-menu{display:block}
.main-nav .sub-menu li{display:block}
.main-nav .sub-menu a{display:block;padding:9px 20px;white-space:nowrap;color:var(--n700)}
.main-nav .sub-menu a:hover{background:var(--n50);color:var(--n900)}

/* Page featured photo (e.g. the professor's portrait) */
.page-photo{margin-top:24px;border-radius:16px;overflow:hidden;max-width:360px}
.page-photo img{width:100%;height:auto;display:block}

/* Gallery board — photo grid */
.gallery-grid{display:grid;grid-template-columns:1fr;gap:24px}
@media(min-width:640px){.gallery-grid{grid-template-columns:1fr 1fr}}
@media(min-width:1024px){.gallery-grid{grid-template-columns:1fr 1fr 1fr}}
.gcard .gthumb{aspect-ratio:4/3;border-radius:12px;overflow:hidden;background:var(--n100)}
.gcard .gthumb img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.gcard:hover .gthumb img{transform:scale(1.04)}
.gcard .gmeta{margin-top:12px}
.gcard h3{font-family:var(--serif);font-size:18px;margin:0;font-weight:700}
.gcard:hover h3{color:var(--n600)}
.gcard .gmeta span{font-size:13px;color:var(--n500);display:block;margin-top:2px}

/* Links board — link list */
.link-list{list-style:none;margin:0;padding:0}
.link-list li{border-bottom:1px solid var(--n200)}
.link-list a{display:block;padding:18px 6px}
.link-list a:hover{background:var(--n50)}
.link-list .ltitle{font-family:var(--serif);font-size:19px;display:block;font-weight:700}
.link-list .ext{color:var(--n400);font-size:15px}
.link-list .ldesc{font-size:14px;color:var(--n500);display:block;margin-top:4px}
.nl-linkout a{font-size:14px;color:var(--n600);text-decoration:underline;text-underline-offset:2px}

/* Column browse toolbar */
.browse{padding-top:36px}
.search-lg{display:flex;align-items:center;gap:10px;border:1px solid var(--n300);border-radius:9999px;padding:12px 20px;margin-bottom:8px}
.search-lg svg{color:var(--n400);flex:none}
.search-lg input{border:0;outline:0;background:transparent;font-size:16px;flex:1;font-family:var(--sans)}
.rowlabel{font-size:12px;color:var(--n400);text-transform:uppercase;letter-spacing:.08em;margin:18px 0 8px}
.browse .chips{display:flex;flex-wrap:wrap;gap:8px;border:0;padding:0}
.years{display:flex;flex-wrap:wrap;gap:6px}
.yr{border:1px solid var(--n200);border-radius:8px;padding:6px 13px;font-size:13px;color:var(--n600);background:var(--n50)}
.yr:hover{border-color:var(--n400)}
.yr.on{border-color:#0F6E56;color:#0F6E56;background:#fff}
.count{font-size:14px;color:var(--n500);margin:8px 0 20px}
.count b{color:var(--n900);font-weight:700}
.more-wrap{text-align:center;padding:28px 0 56px}
#nl-more-btn{border:1px solid var(--n900);background:#fff;border-radius:9999px;padding:11px 26px;font-size:15px;font-family:var(--sans);cursor:pointer;color:var(--n900)}
#nl-more-btn:hover{background:var(--n900);color:#fff}
#nl-more-btn:disabled{opacity:.6;cursor:default}

/* ===== Mobile / responsive ===== */
.brand .tag{display:block}
.nav-toggle{display:none;background:none;border:0;cursor:pointer;color:var(--n900);padding:8px;line-height:0}
.nl-burger,.nl-burger::before,.nl-burger::after{display:block;width:22px;height:2px;background:currentColor;border-radius:2px;transition:.2s}
.nl-burger{position:relative}
.nl-burger::before,.nl-burger::after{content:"";position:absolute;left:0}
.nl-burger::before{top:-7px}.nl-burger::after{top:7px}
.site-header.nav-open .nl-burger{background:transparent}
.site-header.nav-open .nl-burger::before{top:0;transform:rotate(45deg)}
.site-header.nav-open .nl-burger::after{top:0;transform:rotate(-45deg)}

@media(max-width:899px){
  .site-header{position:relative}
  .nav-toggle{display:inline-flex;align-items:center}
  .site-header .btn-primary{display:none}
  .main-nav{display:none;position:absolute;left:0;right:0;top:100%;background:#fff;border-bottom:1px solid var(--n200);box-shadow:0 14px 28px rgba(0,0,0,.07);z-index:80;padding:6px 0}
  .site-header.nav-open .main-nav{display:block}
  .main-nav .nav-list{flex-direction:column;align-items:stretch;gap:0}
  .main-nav .nav-list>li{position:static}
  .main-nav .nav-list a{display:block;padding:13px 24px;font-size:15px;color:var(--n900)}
  .main-nav .menu-item-has-children>a::after{content:"";}
  .main-nav .sub-menu{position:static;display:block;box-shadow:none;border:0;border-radius:0;margin:0;padding:0;min-width:0}
  .main-nav .sub-menu a{padding:11px 24px 11px 42px;color:var(--n600);font-size:14px}
}

@media(max-width:640px){
  .wrap{padding:0 18px}
  .hero-head h1{font-size:27px}
  .feature h2{font-size:22px}
  .feature-txt{padding:22px}
  .article h1,.page-head h1{font-size:26px}
  .article .content{font-size:16px}
  .brand .name{font-size:18px}
  .search-lg input{font-size:15px}
  .author h2{font-size:26px}
}
@media(max-width:420px){
  .brand .tag{display:none}
}

/* View + visitor counts */
.article .meta .views{display:inline-flex;align-items:center;gap:5px}
.site-footer .visits{color:var(--n300)}
.site-footer .visits b{color:#fff;font-weight:600}
.site-footer .sep{margin:0 8px;color:var(--n600)}
@media(max-width:640px){
  .site-footer .wrap{flex-direction:column;align-items:flex-start;gap:8px}
}