/* ============================================================
   in quantio — WordPress Child Theme Add-on CSS
   Scope: .iq-page  (all journal content containers)
   Add to: metro-magazine-child / WP Admin > Appearance > Customize > Additional CSS
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400&family=Source+Serif+4:ital,opsz,wght@0,8..60,300;0,8..60,400;0,8..60,600;1,8..60,400&family=IBM+Plex+Sans:ital,wght@0,300;0,400;0,500;0,600;1,400&family=DM+Mono:wght@400;500&display=swap');

/* ── Variables ── */
.iq-page, #page-wrap.iq-page {
  --teal:       #006064;
  --teal-mid:   #00838f;
  --teal-light: #00acc1;
  --teal-pale:  #e0f7fa;
  --teal-bg:    #f0fdff;
  --ink:        #1a1a2e;
  --ink-mid:    #2d3561;
  --ink-soft:   #4a5568;
  --ink-mute:   #718096;
  --rule:       #d1d9db;
  --rule-lt:    #e8edf0;
  --paper:      #ffffff;
  --bg:         #f4f5f7;
  --coral:      #b5451b;
  --coral-h:    #8d3516;
  --green:      #2e7d32;
  --gold:       #c9a84c;
  --warn-bg:    #fff8e1;
  --warn-bd:    #ffe082;
  --font-d:     'Playfair Display', Georgia, serif;
  --font-b:     'Source Serif 4', Georgia, serif;
  --font-ui:    'IBM Plex Sans', system-ui, sans-serif;
  --font-mono:  'DM Mono', monospace;
  --shadow-sm:  0 1px 4px rgba(0,96,100,.07);
  --shadow-md:  0 4px 16px rgba(0,96,100,.1);
  --shadow-lg:  0 8px 32px rgba(0,96,100,.14);
  --r:          3px;
  --max:        1260px;
}

/* ── Layout ── */
#page-wrap.iq-page {
  max-width: var(--max);
  margin: 0 auto;
  padding: 28px 24px 56px;
  display: grid;
  grid-template-columns: 1fr 288px;
  gap: 34px;
  background: #f4f5f7;
}
#page-wrap.iq-page.full { grid-template-columns: 1fr; }
#page-wrap.iq-page .main-col { min-width: 0; }
#page-wrap.iq-page .side-col { min-width: 0; }

/* Page entry animation */
#page-wrap.iq-page .page-content { animation: iqPgIn .3s ease both; }
@keyframes iqPgIn { from { opacity:0; transform:translateY(7px); } to { opacity:1; transform:none; } }

/* ── Breadcrumb ── */
.iq-breadcrumb {
  background: var(--teal-bg);
  border-bottom: 1px solid var(--rule-lt);
  margin: 0 -24px 0;
}
.iq-breadcrumb .bc-inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 7px 24px;
  font-family: var(--font-ui);
  font-size: .69rem;
  color: var(--ink-mute);
}
.iq-breadcrumb .bc-inner a { color: var(--teal-mid); }
.iq-breadcrumb .bc-sep { margin: 0 7px; opacity: .38; }

/* ── Section headers ── */
.iq-page .sec-hd {
  font-family: var(--font-d);
  font-size: 1.18rem;
  font-weight: 600;
  color: var(--ink);
  border-bottom: 2px solid var(--rule);
  padding-bottom: 9px;
  margin-bottom: 18px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}
.iq-page .sec-hd .see-all {
  font-family: var(--font-ui);
  font-size: .7rem;
  font-weight: 500;
  color: var(--teal-mid);
}

/* ── Search ── */
.iq-page .search-block { margin-bottom: 28px; }
.iq-page .search-lbl { font-family: var(--font-ui); font-size: .66rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 6px; }
.iq-page .search-row { display: flex; }
.iq-page .search-input { flex:1; padding:10px 13px; border:2px solid var(--rule); border-right:none; border-radius:2px 0 0 2px; font-family:var(--font-b); font-size:.88rem; color:var(--ink); outline:none; background:#fff; transition:border-color .2s; }
.iq-page .search-input:focus { border-color:var(--teal-mid); }
.iq-page .search-input::placeholder { color:#aab; font-style:italic; }
.iq-page .search-btn { padding:10px 17px; background:var(--teal); color:#fff; border:2px solid var(--teal); border-radius:0 2px 2px 0; font-family:var(--font-ui); font-size:.76rem; font-weight:600; letter-spacing:.04em; cursor:pointer; transition:background .2s; }
.iq-page .search-btn:hover { background:var(--ink-mid); border-color:var(--ink-mid); }
.iq-page .search-tips { margin-top:5px; font-family:var(--font-ui); font-size:.66rem; color:var(--ink-mute); }

/* ── Aims block ── */
.iq-page .aims-block { margin-bottom:32px; background:#fff; border:1px solid var(--rule); border-left:4px solid var(--teal-mid); padding:20px 24px; }
.iq-page .aims-text { font-family:var(--font-b); font-size:.89rem; color:var(--ink); line-height:1.78; margin-bottom:10px; }
.iq-page .aims-topics { display:flex; flex-wrap:wrap; gap:6px; margin-top:13px; padding-top:13px; border-top:1px solid var(--rule); }
.iq-page .topic-tag { font-family:var(--font-ui); font-size:.68rem; font-weight:500; padding:3px 9px; background:var(--teal-pale); color:var(--teal); border-radius:2px; border:1px solid rgba(0,131,143,.17); }

/* ── Article cards ── */
.iq-page .articles-block { margin-bottom:32px; }
.iq-page .article-card { border-bottom:1px solid var(--rule); padding:16px 0; display:grid; grid-template-columns:1fr 86px; gap:14px; align-items:start; }
.iq-page .article-card:first-child { padding-top:0; }
.iq-page .art-type { display:inline-block; font-family:var(--font-ui); font-size:.6rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--teal-mid); margin-bottom:4px; }
.iq-page .oa-dot { display:inline-block; width:7px; height:7px; background:var(--green); border-radius:50%; margin-right:4px; vertical-align:middle; }
.iq-page .art-title { font-family:var(--font-d); font-size:.95rem; font-weight:600; color:var(--ink); line-height:1.42; margin-bottom:6px; }
.iq-page .art-title a { color:inherit; }
.iq-page .art-title a:hover { color:var(--teal); text-decoration:underline; }
.iq-page .art-authors { font-family:var(--font-ui); font-size:.71rem; color:var(--ink-soft); margin-bottom:4px; }
.iq-page .art-meta { font-family:var(--font-mono); font-size:.63rem; color:var(--ink-mute); display:flex; gap:10px; flex-wrap:wrap; }
.iq-page .art-stats { display:flex; flex-direction:column; gap:4px; align-items:flex-end; }
.iq-page .art-stat { font-family:var(--font-ui); font-size:.63rem; color:var(--ink-soft); background:var(--bg); border:1px solid var(--rule); padding:3px 6px; border-radius:2px; text-align:center; white-space:nowrap; }
.iq-page .art-stat strong { display:block; font-weight:700; color:var(--ink); font-size:.8rem; }

/* ── Collections ── */
.iq-page .coll-grid { display:grid; grid-template-columns:1fr 1fr; gap:13px; margin-bottom:32px; }
.iq-page .coll-card { border:1px solid var(--rule); background:#fff; padding:15px; position:relative; overflow:hidden; transition:box-shadow .2s; }
.iq-page .coll-card::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg,var(--teal-mid),var(--teal-light)); }
.iq-page .coll-card:hover { box-shadow:var(--shadow-md); }
.iq-page .coll-type { font-family:var(--font-ui); font-size:.6rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--teal-mid); margin-bottom:4px; }
.iq-page .coll-title { font-family:var(--font-d); font-size:.86rem; font-weight:600; color:var(--ink); line-height:1.4; margin-bottom:6px; }
.iq-page .coll-desc { font-family:var(--font-b); font-size:.75rem; color:var(--ink-soft); line-height:1.55; }
.iq-page .coll-foot { font-family:var(--font-ui); font-size:.66rem; color:var(--ink-mute); margin-top:9px; padding-top:7px; border-top:1px solid var(--rule-lt); }

/* ── Sidebar widgets ── */
.iq-page .sw { margin-bottom:22px; background:#fff; border:1px solid var(--rule); overflow:hidden; }
.iq-page .sw-hd { font-family:var(--font-ui); font-size:.66rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:#fff; background:var(--teal); padding:8px 13px; }
.iq-page .sw-body { padding:13px; }
.iq-page .btn-sub { display:block; width:100%; padding:11px; text-align:center; font-family:var(--font-ui); font-size:.82rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; background:var(--coral); color:#fff; border:none; border-radius:var(--r); margin-bottom:7px; transition:background .2s; text-decoration:none; }
.iq-page .btn-sub:hover { background:var(--coral-h); color:#fff; text-decoration:none; }
.iq-page .btn-sub2 { display:block; width:100%; padding:7px; text-align:center; font-family:var(--font-ui); font-size:.73rem; font-weight:500; color:var(--teal-mid); border:1px solid var(--teal-mid); border-radius:var(--r); background:transparent; transition:all .2s; margin-bottom:7px; text-decoration:none; }
.iq-page .btn-sub2:hover { background:var(--teal-pale); color:var(--teal); text-decoration:none; }
.iq-page .sw-note { font-family:var(--font-ui); font-size:.65rem; color:var(--ink-soft); line-height:1.55; margin-top:9px; }
.iq-page .if-big { text-align:center; padding:9px 0 11px; border-bottom:1px solid var(--rule); margin-bottom:11px; }
.iq-page .if-num { font-family:var(--font-d); font-size:2.5rem; font-weight:700; color:var(--teal); line-height:1; }
.iq-page .if-sub { font-family:var(--font-ui); font-size:.63rem; color:var(--ink-soft); margin-top:2px; }
.iq-page .if-note { font-family:var(--font-ui); font-size:.6rem; color:var(--ink-mute); font-style:italic; }
.iq-page .mrow { display:flex; justify-content:space-between; padding:5px 0; border-bottom:1px solid var(--rule-lt); font-family:var(--font-ui); font-size:.73rem; }
.iq-page .mrow:last-child { border-bottom:none; }
.iq-page .mrow .ml { color:var(--ink-soft); }
.iq-page .mrow .mr { font-weight:600; color:var(--ink); font-family:var(--font-mono); }
.iq-page .idx-list li { display:flex; align-items:center; gap:6px; padding:5px 0; border-bottom:1px solid var(--rule-lt); font-family:var(--font-ui); font-size:.74rem; color:var(--ink-soft); list-style:none; }
.iq-page .idx-list li:last-child { border-bottom:none; }
.iq-page .idx-dot { width:6px; height:6px; background:var(--green); border-radius:50%; flex-shrink:0; display:inline-block; }
.iq-page .idx-dot.pending { background:#f6ad55; }
.iq-page .ed-item { padding:8px 0; border-bottom:1px solid var(--rule-lt); }
.iq-page .ed-item:last-child { border-bottom:none; }
.iq-page .ed-role { font-family:var(--font-ui); font-size:.6rem; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--teal-mid); margin-bottom:1px; }
.iq-page .ed-name { font-family:var(--font-ui); font-size:.76rem; font-weight:600; color:var(--ink); }
.iq-page .ed-aff { font-family:var(--font-ui); font-size:.66rem; color:var(--ink-mute); margin-top:1px; }

/* ── Page hero ── */
.iq-page .page-hero { background:#fff; border:1px solid var(--rule); border-top:4px solid var(--teal-mid); padding:26px 30px; margin-bottom:26px; }
.iq-page .page-hero h1 { font-family:var(--font-d); font-size:1.65rem; font-weight:700; color:var(--ink); margin-bottom:9px; }
.iq-page .page-hero .lead { font-family:var(--font-b); font-size:.93rem; color:var(--ink-soft); line-height:1.72; max-width:680px; }

/* ── Prose ── */
.iq-page .prose { font-family:var(--font-b); font-size:.89rem; color:var(--ink); line-height:1.78; }
.iq-page .prose h2 { font-family:var(--font-d); font-size:1.18rem; font-weight:600; color:var(--ink); margin:26px 0 10px; padding-bottom:7px; border-bottom:1px solid var(--rule); }
.iq-page .prose h3 { font-family:var(--font-d); font-size:1.02rem; font-weight:600; color:var(--ink); margin:20px 0 7px; }
.iq-page .prose p { margin-bottom:13px; }
.iq-page .prose ul, .iq-page .prose ol { margin:8px 0 13px 18px; }
.iq-page .prose ul { list-style:disc; }
.iq-page .prose ol { list-style:decimal; }
.iq-page .prose li { margin-bottom:5px; }
.iq-page .prose strong { font-weight:600; }
.iq-page .prose em { font-style:italic; }
.iq-page .prose a { color:var(--teal-mid); }
.iq-page .prose blockquote { border-left:3px solid var(--teal-mid); padding:9px 17px; background:var(--teal-bg); margin:16px 0; font-style:italic; color:var(--ink-soft); }
.iq-page .prose table { width:100%; border-collapse:collapse; margin:14px 0; font-family:var(--font-ui); font-size:.79rem; }
.iq-page .prose th { background:var(--teal); color:#fff; padding:8px 11px; text-align:left; font-weight:600; letter-spacing:.03em; }
.iq-page .prose td { padding:8px 11px; border-bottom:1px solid var(--rule-lt); color:var(--ink); }
.iq-page .prose tr:nth-child(even) td { background:var(--bg); }
.iq-page .notice-box { background:var(--teal-bg); border:1px solid rgba(0,131,143,.22); border-left:4px solid var(--teal-mid); padding:14px 17px; margin:16px 0; font-family:var(--font-ui); font-size:.8rem; color:var(--ink-soft); border-radius:0 var(--r) var(--r) 0; line-height:1.6; }
.iq-page .notice-box.warn { background:var(--warn-bg); border-color:var(--warn-bd); border-left-color:#f59e0b; }
.iq-page .notice-box strong { color:var(--ink); font-weight:600; }

/* ── Steps ── */
.iq-page .step-block { margin:16px 0; }
.iq-page .step { display:flex; gap:13px; margin-bottom:14px; align-items:flex-start; }
.iq-page .step-num { width:27px; height:27px; background:var(--teal); color:#fff; border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:var(--font-ui); font-size:.73rem; font-weight:700; flex-shrink:0; margin-top:1px; }
.iq-page .step-body h4 { font-family:var(--font-ui); font-size:.83rem; font-weight:600; color:var(--ink); margin-bottom:3px; }
.iq-page .step-body p { font-family:var(--font-ui); font-size:.77rem; color:var(--ink-soft); line-height:1.55; margin:0; }

/* ── Fee table ── */
.iq-page .fee-table { width:100%; border-collapse:collapse; margin:14px 0; font-family:var(--font-ui); font-size:.8rem; }
.iq-page .fee-table th { background:var(--teal); color:#fff; padding:9px 13px; text-align:left; font-weight:600; }
.iq-page .fee-table td { padding:9px 13px; border-bottom:1px solid var(--rule-lt); color:var(--ink); }
.iq-page .fee-table tr:nth-child(even) td { background:var(--bg); }
.iq-page .fee-table .price { font-family:var(--font-mono); font-weight:600; }
.iq-page .fee-table .free { color:var(--green); font-weight:700; }

/* ── Person cards ── */
.iq-page .person-card { display:flex; gap:14px; padding:14px; background:#fff; border:1px solid var(--rule); margin-bottom:10px; align-items:flex-start; }
.iq-page .person-avatar { width:52px; height:52px; border-radius:50%; background:linear-gradient(135deg,var(--teal),var(--teal-light)); display:flex; align-items:center; justify-content:center; font-family:var(--font-ui); font-size:.82rem; font-weight:700; color:#fff; flex-shrink:0; }
.iq-page .person-role { font-family:var(--font-ui); font-size:.6rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--teal-mid); margin-bottom:1px; }
.iq-page .person-name { font-family:var(--font-ui); font-size:.86rem; font-weight:600; color:var(--ink); }
.iq-page .person-aff { font-family:var(--font-ui); font-size:.73rem; color:var(--ink-soft); }
.iq-page .person-area { font-family:var(--font-ui); font-size:.7rem; color:var(--ink-mute); margin-top:2px; font-style:italic; }

/* ── Policy sections ── */
.iq-page .policy-sec { margin-bottom:24px; padding:20px 24px; background:#fff; border:1px solid var(--rule); }
.iq-page .policy-sec h3 { font-family:var(--font-d); font-size:.98rem; font-weight:600; color:var(--ink); margin-bottom:9px; padding-bottom:7px; border-bottom:1px solid var(--rule-lt); }
.iq-page .policy-sec p { font-family:var(--font-b); font-size:.85rem; color:var(--ink-soft); line-height:1.72; margin-bottom:9px; }

/* ── Contact cards ── */
.iq-page .contact-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:26px; }
.iq-page .contact-card { background:#fff; border:1px solid var(--rule); border-top:3px solid var(--teal-mid); padding:18px 20px; }
.iq-page .contact-card h3 { font-family:var(--font-ui); font-size:.85rem; font-weight:700; color:var(--ink); margin-bottom:10px; }
.iq-page .contact-row { display:flex; gap:9px; align-items:flex-start; margin-bottom:7px; font-family:var(--font-ui); font-size:.76rem; }
.iq-page .contact-lbl { font-weight:600; color:var(--ink-soft); min-width:76px; flex-shrink:0; }
.iq-page .contact-val { color:var(--ink); }
.iq-page .contact-val a { color:var(--teal-mid); }

/* ── News cards ── */
.iq-page .news-card { background:#fff; border:1px solid var(--rule); padding:18px; margin-bottom:14px; display:grid; grid-template-columns:1fr 110px; gap:14px; }
.iq-page .news-tag { font-family:var(--font-ui); font-size:.6rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--teal-mid); margin-bottom:4px; }
.iq-page .news-title { font-family:var(--font-d); font-size:.97rem; font-weight:600; color:var(--ink); line-height:1.4; margin-bottom:7px; }
.iq-page .news-title a { color:inherit; }
.iq-page .news-title a:hover { color:var(--teal); text-decoration:underline; }
.iq-page .news-excerpt { font-family:var(--font-b); font-size:.8rem; color:var(--ink-soft); line-height:1.6; margin-bottom:7px; }
.iq-page .news-meta { font-family:var(--font-mono); font-size:.63rem; color:var(--ink-mute); }
.iq-page .news-img { background:linear-gradient(135deg,var(--teal-pale),var(--teal-bg)); border-radius:2px; display:flex; align-items:center; justify-content:center; color:var(--teal); font-family:var(--font-ui); font-size:.65rem; font-weight:600; text-align:center; }

/* ── Tabs ── */
.iq-page .tab-nav { display:flex; border-bottom:2px solid var(--rule); margin-bottom:22px; }
.iq-page .tab-btn { padding:8px 16px; font-family:var(--font-ui); font-size:.78rem; font-weight:500; color:var(--ink-soft); background:none; border:none; border-bottom:2px solid transparent; margin-bottom:-2px; cursor:pointer; transition:all .18s; }
.iq-page .tab-btn:hover { color:var(--teal); }
.iq-page .tab-btn.active { color:var(--teal); border-bottom-color:var(--teal); font-weight:600; }
.iq-page .tab-pane { display:none; }
.iq-page .tab-pane.active { display:block; }

/* ── Submit hero ── */
.iq-page .submit-hero { background:linear-gradient(135deg,var(--teal),var(--teal-mid)); border-radius:var(--r); padding:32px; text-align:center; margin-bottom:28px; }
.iq-page .submit-hero h2 { font-family:var(--font-d); font-size:1.5rem; font-weight:700; color:#fff; margin-bottom:10px; }
.iq-page .submit-hero p { font-family:var(--font-b); font-size:.9rem; color:rgba(255,255,255,.78); margin-bottom:20px; max-width:480px; margin-left:auto; margin-right:auto; }
.iq-page .btn-big { display:inline-block; padding:13px 36px; background:var(--coral); color:#fff; font-family:var(--font-ui); font-size:.95rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; border-radius:var(--r); transition:background .2s; text-decoration:none; }
.iq-page .btn-big:hover { background:var(--coral-h); color:#fff; text-decoration:none; }
.iq-page .checklist { list-style:none; padding:0; }
.iq-page .checklist li { font-family:var(--font-ui); font-size:.82rem; padding:7px 0 7px 26px; border-bottom:1px solid var(--rule-lt); color:var(--ink-soft); position:relative; }
.iq-page .checklist li::before { content:''; position:absolute; left:6px; top:13px; width:8px; height:8px; border:2px solid var(--teal-mid); border-radius:50%; }
.iq-page .checklist li:last-child { border-bottom:none; }

/* ── Announcement banner ── */
.iq-ann-banner { background:linear-gradient(90deg,#fff8e1,#fffde7); border-bottom:1px solid var(--warn-bd, #ffe082); margin-bottom: 16px; }
.iq-ann-banner .ann-inner { max-width:100%; padding:10px 0; display:flex; align-items:center; gap:12px; }
.iq-ann-banner .ann-tag { background:#b5451b; color:#fff; font-family:'IBM Plex Sans',sans-serif; font-size:.6rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; padding:3px 8px; border-radius:2px; flex-shrink:0; }
.iq-ann-banner .ann-txt { font-family:'IBM Plex Sans',sans-serif; font-size:.77rem; color:#1a1a2e; }
.iq-ann-banner .ann-cta { font-family:'IBM Plex Sans',sans-serif; font-size:.74rem; font-weight:600; color:#00838f; margin-left:auto; white-space:nowrap; }
.iq-ann-banner .ann-cta::after { content:' \2192'; }
.iq-ann-banner .ann-x { background:none; border:none; color:#718096; font-size:.85rem; padding:0 0 0 10px; opacity:.45; cursor:pointer; }
.iq-ann-banner .ann-x:hover { opacity:1; }

/* ── Responsive ── */
@media (max-width: 900px) {
  #page-wrap.iq-page { grid-template-columns: 1fr; }
  .iq-page .coll-grid { grid-template-columns: 1fr; }
  .iq-page .article-card { grid-template-columns: 1fr; }
  .iq-page .art-stats { flex-direction:row; justify-content:flex-start; }
  .iq-page .contact-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  #page-wrap.iq-page { padding: 16px 16px 40px; }
  .iq-page .news-card { grid-template-columns: 1fr; }
  .iq-page .coll-grid { grid-template-columns: 1fr; }
}