/*
Theme Name: Mesotes
Theme URI: https://mesotes.studio
Author: Mesotes Studio
Description: Bilingual editorial theme for Mesotes Studio. Fully customizable via Appearance → Customize: colors, fonts, all text, homepage sections. Supports pages, blog posts, custom post types.
Version: 4.0.0
License: GPL-2.0-or-later
Text Domain: mesotes
Requires at least: 6.0
Tested up to: 6.7
*/

/* ─── CSS Custom Properties (set by Customizer via wp_add_inline_style) ─── */
:root {
  --paper:  #f7f6f3;
  --mist:   #ececea;
  --ink:    #1c2230;
  --marker: #c2461a;
  --rule:   #c8ccd3;
  --rule-soft: #dadde2;
  --muted:  #6b7180;
  --orange: #d6531f;
  --cream:  #ecead2;
  --font-body:    'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-display: 'Instrument Serif', 'Cormorant Garamond', ui-serif, Georgia, serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SFMono-Regular', monospace;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;border:0 solid #d4d8df}
html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);font-family:var(--font-body);font-feature-settings:"ss01","cv11";line-height:1.5}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
::selection{background:#3e5764;color:#f7f6f3}

.display{font-family:var(--font-display);font-weight:400;letter-spacing:-0.01em;line-height:1.05}
.italic{font-style:italic}
.mono{font-family:var(--font-mono)}
.eyebrow{font-family:var(--font-mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.marker{color:var(--marker)}
.muted{color:var(--muted)}
.text-80{color:rgba(28,34,48,.8)}
.text-75{color:rgba(28,34,48,.75)}

.container{max-width:1320px;margin:0 auto;padding:0 24px}
@media(min-width:768px){.container{padding:0 40px}}
.section{border-top:1px solid var(--rule)}
.bg-mist{background:var(--mist)}
.bg-cream{background:var(--cream)}
.py-xl{padding:64px 0}
@media(min-width:768px){.py-xl{padding:96px 0}}
.pt-page{padding:64px 24px 32px}
@media(min-width:768px){.pt-page{padding:96px 40px 48px}}

/* ── Header ── */
.site-header{position:sticky;top:0;z-index:40;background:rgba(247,246,243,.9);backdrop-filter:blur(8px);border-bottom:1px solid var(--rule)}
.site-header-inner{max-width:1320px;margin:0 auto;padding:0 24px;height:64px;display:flex;align-items:center;justify-content:space-between;gap:16px}
@media(min-width:768px){.site-header-inner{padding:0 40px}}
.brand{font-family:var(--font-display);font-size:22px;letter-spacing:-.01em}
.clocks{display:none;font-family:var(--font-mono);font-size:11px;color:var(--muted);gap:18px}
@media(min-width:900px){.clocks{display:flex}}
.nav-links{display:none;align-items:center;gap:22px;font-size:13px}
@media(min-width:768px){.nav-links{display:flex}}
.nav-links a{color:rgba(28,34,48,.78);transition:color .2s}
.nav-links a:hover,.nav-links a.current-menu-item{color:#1c2230}
.lang{display:flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:11px}
.lang a{color:var(--muted)}
.lang a:hover{color:#1c2230}
.lang .on{color:#1c2230}
.menu-toggle{display:flex;align-items:center;background:none;border:none;cursor:pointer;padding:8px;color:var(--ink)}
@media(min-width:768px){.menu-toggle{display:none}}
.mobile-nav{display:none;position:fixed;inset:64px 0 0;background:var(--paper);z-index:39;padding:32px 24px;flex-direction:column;gap:20px;border-top:1px solid var(--rule);overflow-y:auto}
.mobile-nav.open{display:flex}
.mobile-nav a{font-size:20px;font-family:var(--font-display);border-bottom:1px solid var(--rule-soft);padding-bottom:16px}

/* ── Hero ── */
.hero{display:grid;grid-template-columns:1fr;border-bottom:1px solid var(--rule)}
@media(min-width:1024px){.hero{grid-template-columns:9fr 3fr}}
.hero .left{border-right:1px solid var(--rule);display:flex;flex-direction:column}
.wordmark{padding:32px 24px 0;font-family:var(--font-display);font-weight:400;line-height:.82;letter-spacing:-.04em;font-size:22vw}
@media(min-width:1024px){.wordmark{font-size:15vw;padding:40px 40px 0}}
.wordmark sup{font-family:var(--font-body);font-size:.15em;vertical-align:super;margin-left:8px;letter-spacing:normal}
.hero-intro{margin-top:24px;display:grid;grid-template-columns:1fr;gap:24px;padding:24px 24px 32px}
@media(min-width:768px){.hero-intro{grid-template-columns:8fr 4fr;padding:24px 40px 32px}}
.hero-intro p{font-size:18px;line-height:1.35}
@media(min-width:768px){.hero-intro p{font-size:20px}}
.hero-intro .ctas{display:flex;gap:12px;align-items:flex-end}
@media(min-width:768px){.hero-intro .ctas{justify-content:flex-end}}

/* ── Buttons ── */
.btn{display:inline-block;font-size:14px;border:1px solid var(--ink);padding:10px 16px;transition:all .2s;color:var(--ink);background:transparent}
.btn:hover{background:var(--ink);color:var(--paper)}
.btn-primary{background:var(--ink);color:var(--paper)}
.btn-primary:hover{background:var(--marker);border-color:var(--marker);color:var(--paper)}
.btn-link{font-size:14px;text-decoration:underline;text-decoration-color:var(--marker);text-decoration-thickness:2px;text-underline-offset:4px;padding-bottom:8px}

/* ── Research rail ── */
.rail{background:var(--orange);color:var(--ink)}
.rail-head{padding:20px 24px;display:flex;align-items:center;gap:12px;border-bottom:1px solid rgba(28,34,48,.15)}
.rail-head .dot{width:12px;height:12px;background:var(--ink);flex-shrink:0}
.rail-head h2{font-family:var(--font-display);font-size:22px}
.rail article{padding:20px 24px;border-bottom:1px solid rgba(28,34,48,.15)}
.rail article .meta{font-family:var(--font-mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase}
.rail article h3{margin-top:6px;font-family:var(--font-display);font-size:18px;line-height:1.2}
.rail article a{display:inline-block;margin-top:8px;font-size:12px;text-decoration:underline;text-underline-offset:4px}
.rail-all{padding:20px 24px;font-family:var(--font-mono);font-size:13px;text-decoration:underline;text-underline-offset:4px;display:block}

/* ── Programs ── */
.programs{background:var(--cream);border-bottom:1px solid var(--rule)}
.programs-head{max-width:1320px;margin:0 auto;padding:48px 24px 24px;display:grid;grid-template-columns:1fr;gap:24px;align-items:end}
@media(min-width:768px){.programs-head{grid-template-columns:5fr 7fr;padding:64px 40px 24px}}
.programs-head h2{font-family:var(--font-display);font-size:56px;line-height:.9}
@media(min-width:768px){.programs-head h2{font-size:88px}}
.programs-head h2 sup{font-family:var(--font-mono);font-size:.28em;vertical-align:super;margin-left:12px;letter-spacing:normal;color:rgba(28,34,48,.7)}
.programs-head p{font-size:16px;line-height:1.6;color:rgba(28,34,48,.85)}
@media(min-width:768px){.programs-head p{font-size:18px;padding-left:48px}}
.programs-grid{max-width:1320px;margin:0 auto;padding:0 24px 80px;display:grid;grid-template-columns:1fr;gap:1px;background:rgba(28,34,48,.15);border:1px solid rgba(28,34,48,.15)}
@media(min-width:768px){.programs-grid{grid-template-columns:1fr 1fr;padding:0 40px 80px}}
.prog-card{background:var(--paper);padding:32px;display:flex;flex-direction:column;gap:24px;min-height:420px;transition:background .2s}
.prog-card:hover{background:var(--mist)}
.prog-card .top{display:flex;justify-content:space-between;font-family:var(--font-mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase}
.prog-card .top span:last-child{color:var(--muted)}
.prog-card .fill{flex:1;border:1px solid var(--rule);background-image:linear-gradient(to right,rgba(28,34,48,.06) 1px,transparent 1px),linear-gradient(to bottom,rgba(28,34,48,.06) 1px,transparent 1px);background-size:48px 48px}
.prog-card .fill.dot{background-image:radial-gradient(rgba(28,34,48,.18) 1px,transparent 1px);background-size:22px 22px}
.prog-card h3{font-family:var(--font-display);font-size:28px;line-height:1.1}
@media(min-width:768px){.prog-card h3{font-size:36px}}
.prog-card p{margin-top:12px;font-size:15px;color:rgba(28,34,48,.8)}
.prog-card .row{margin-top:20px;display:flex;justify-content:space-between;font-family:var(--font-mono);font-size:11px}
.prog-card .row span:first-child{color:var(--muted)}
.prog-card .row span:last-child{text-decoration:underline;text-decoration-color:var(--marker);text-underline-offset:4px}
.programs-foot{max-width:1320px;margin:0 auto;padding:0 24px 56px;font-family:var(--font-mono);font-size:13px;color:rgba(28,34,48,.7)}
@media(min-width:768px){.programs-foot{padding:0 40px 56px}}

/* ── CTA block ── */
.cta{max-width:1320px;margin:0 auto;padding:80px 24px;display:grid;grid-template-columns:1fr;gap:24px;align-items:end}
@media(min-width:768px){.cta{grid-template-columns:8fr 4fr;padding:120px 40px}}
.cta h2{font-family:var(--font-display);font-size:36px;line-height:1.02;margin-top:12px}
@media(min-width:768px){.cta h2{font-size:56px}}
.cta .right{text-align:right}

/* ── Generic page ── */
.page-h1{font-family:var(--font-display);font-size:44px;line-height:1.02;margin-top:16px}
@media(min-width:768px){.page-h1{font-size:80px}}
.page-h1 em{color:var(--marker);font-style:italic}
.lead{margin-top:32px;font-size:18px;line-height:1.6;color:rgba(28,34,48,.8);max-width:48rem}
@media(min-width:768px){.lead{font-size:20px}}

/* ── Entry content (Gutenberg pages/posts) ── */
.entry-content{max-width:720px}
.entry-content h1,.entry-content h2,.entry-content h3,.entry-content h4{font-family:var(--font-display);font-weight:400;margin-top:2em;margin-bottom:.6em;line-height:1.15}
.entry-content h2{font-size:28px}.entry-content h3{font-size:22px}
.entry-content p{margin-bottom:1.25em;font-size:16px;line-height:1.75;color:rgba(28,34,48,.85)}
.entry-content ul,.entry-content ol{margin-left:1.5em;margin-bottom:1.25em}
.entry-content li{margin-bottom:.5em;font-size:16px;line-height:1.7}
.entry-content blockquote{border-left:3px solid var(--marker);padding-left:20px;margin:2em 0;font-style:italic;color:var(--muted)}
.entry-content a{color:var(--marker);border-bottom:1px solid currentColor}
.entry-content a:hover{color:var(--ink)}
.entry-content img{margin:2em 0}
.entry-content hr{border:none;border-top:1px solid var(--rule);margin:3em 0}
.entry-content figure figcaption{font-size:12px;color:var(--muted);margin-top:8px;font-family:var(--font-mono)}

/* ── Archive list ── */
.archive{margin-top:32px;border-top:1px solid var(--rule);list-style:none}
.archive li{display:grid;grid-template-columns:repeat(12,1fr);gap:16px;align-items:baseline;padding:24px 0;border-bottom:1px solid var(--rule-soft);transition:background .15s}
.archive li:hover{background:var(--mist);margin:0 -24px;padding-left:24px;padding-right:24px}
.archive .tag{grid-column:span 3;font-family:var(--font-mono);font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--marker)}
.archive .t{grid-column:span 9;font-family:var(--font-display);font-size:22px;line-height:1.15}
@media(min-width:768px){.archive .tag{grid-column:span 2}.archive .t{grid-column:span 8;font-size:28px}.archive .d{grid-column:span 2;text-align:right;font-family:var(--font-mono);font-size:12px;color:var(--muted)}}
.archive .d{grid-column:span 12;font-family:var(--font-mono);font-size:12px;color:var(--muted)}

/* ── Two-column ── */
.two{display:grid;grid-template-columns:1fr;gap:32px}
@media(min-width:768px){.two{grid-template-columns:1fr 1fr;gap:64px}}
.two p{font-size:16px;color:rgba(28,34,48,.8);line-height:1.7;margin-top:16px}

/* ── Single post ── */
.post-header{padding:48px 0 40px;border-bottom:1px solid var(--rule);margin-bottom:48px}
.post-header h1{font-family:var(--font-display);font-size:36px;font-weight:400;line-height:1.08;margin-top:12px}
@media(min-width:768px){.post-header h1{font-size:56px}}
.post-meta{display:flex;gap:20px;flex-wrap:wrap;font-family:var(--font-mono);font-size:12px;color:var(--muted);margin-top:20px}

/* ── Pagination ── */
.pagination,.nav-links-pager{display:flex;gap:8px;justify-content:center;padding:48px 0}
.pagination a,.pagination span,.page-numbers{font-family:var(--font-mono);font-size:13px;padding:8px 14px;border:1px solid var(--rule);color:var(--muted);transition:all .2s;display:inline-block}
.pagination a:hover,.page-numbers.current{background:var(--ink);color:var(--paper);border-color:var(--ink)}

/* ── Footer ── */
.site-footer{margin-top:0;border-top:1px solid var(--rule);background:var(--ink);color:#f7f6f3}
.footer-grid{max-width:1320px;margin:0 auto;padding:64px 24px;display:grid;grid-template-columns:1fr 1fr;gap:32px}
@media(min-width:768px){.footer-grid{grid-template-columns:repeat(12,1fr);padding:80px 40px}}
.footer-grid .col-a{grid-column:span 2}
@media(min-width:768px){.footer-grid .col-a{grid-column:span 5}.fc3{grid-column:span 3}.fc2{grid-column:span 2}}
.footer-grid .brand-big{font-family:var(--font-display);font-size:48px;line-height:1}
.footer-grid h4{font-family:var(--font-mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:#9ea4b3;margin-bottom:16px}
.footer-grid ul{list-style:none;display:flex;flex-direction:column;gap:8px;font-size:14px}
.footer-grid ul a:hover{color:var(--orange)}
.footer-bottom{border-top:1px solid rgba(247,246,243,.15)}
.footer-bottom-inner{max-width:1320px;margin:0 auto;padding:20px 24px;display:flex;flex-direction:column;gap:8px;justify-content:space-between;font-family:var(--font-mono);font-size:11px;color:#9ea4b3}
@media(min-width:768px){.footer-bottom-inner{flex-direction:row;padding:24px 40px}}

/* ── Admin bar ── */
.admin-bar .site-header{top:32px}
@media(max-width:782px){.admin-bar .site-header{top:46px}}
/* prevent WP injecting extra top margin on body */
html{margin-top:0 !important}
.admin-bar{margin-top:0 !important}
/* WP forces margin-top:32px on body when admin bar is on — we compensate */
body.admin-bar{padding-top:32px}
@media(max-width:782px){body.admin-bar{padding-top:46px}}

/* ── Visibility ── */
.mesotes-hidden{display:none !important}

/* ── Search ── */
.search-form{display:flex}
.search-form input[type=search]{flex:1;padding:10px 16px;border:1px solid var(--rule);background:var(--paper);font-family:inherit;font-size:14px;outline:none}
.search-form input[type=search]:focus{border-color:var(--ink)}
.search-form button{padding:10px 20px;background:var(--ink);color:var(--paper);border:none;cursor:pointer;font-family:inherit;font-size:14px}

/* ── Blog post pullquote ── */
.pullquote{
  position:relative;
  margin:56px 0;
  padding:40px 48px 40px 64px;
  background:var(--cream);
  border-left:4px solid var(--orange);
}
.pullquote::before{
  content:'\201C';
  font-family:var(--font-display);
  font-size:120px;
  line-height:1;
  color:var(--orange);
  position:absolute;
  top:-8px;
  left:12px;
  opacity:.9;
}
.pullquote p{
  font-family:var(--font-display);
  font-size:22px;
  line-height:1.45;
  color:var(--ink);
  margin:0 !important;
  font-style:italic;
}
@media(min-width:768px){.pullquote p{font-size:26px}}
.pullquote cite{
  display:block;
  margin-top:16px;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--muted);
  font-style:normal;
}

/* ── Entry blockquote (inline) upgraded ── */
.entry-content blockquote{
  border-left:none;
  padding:0;
  margin:2em 0;
  position:relative;
  padding-left:56px;
}
.entry-content blockquote::before{
  content:'\201C';
  font-family:var(--font-display);
  font-size:72px;
  line-height:1;
  color:var(--orange);
  position:absolute;
  left:0;
  top:-8px;
  opacity:.85;
}
.entry-content blockquote p{
  font-family:var(--font-display);
  font-size:20px;
  line-height:1.5;
  color:var(--ink);
  font-style:italic;
}

/* ── Post featured image full-width ── */
.post-cover{
  width:100%;
  max-height:480px;
  object-fit:cover;
  display:block;
  margin-bottom:0;
}
.post-cover-wrap{
  position:relative;
  margin-bottom:48px;
  border-bottom:1px solid var(--rule);
}

/* ── Reading time badge ── */
.read-badge{
  display:inline-block;
  font-family:var(--font-mono);
  font-size:10px;
  letter-spacing:.15em;
  text-transform:uppercase;
  background:var(--orange);
  color:var(--paper);
  padding:3px 9px;
  vertical-align:middle;
  margin-left:12px;
}