/*
Theme Name: Science of Image
Theme URI: https://scienceofimage.com/
Author: Julie
Description: Custom theme for Science of Image — image consulting for career-focused women. Warm cream and plum palette, Playfair Display headlines, arched hero imagery, and a journal built on standard WordPress posts.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: science-of-image
Tags: blog, one-column, custom-colors, custom-menu, featured-images, sticky-post, translation-ready
*/

:root {
  --accent: #f76e32;
  --ink: #3d0b1a;
  --cream: #efdbc2;
  --plum: #40142d;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: 'DM Sans', sans-serif;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); }
a:hover { color: var(--ink); }

.serif { font-family: 'Playfair Display', serif; }

.fx { display: flex; }
.col { display: flex; flex-direction: column; }
.ac { align-items: center; }
.jb { justify-content: space-between; }
.gap16 { gap: 16px; }
.gap24 { gap: 24px; }
.mt8 { margin-top: 8px; }
.mt12 { margin-top: 12px; }
.mt16 { margin-top: 16px; }
.noshrink { flex-shrink: 0; }

.wrap { max-width: 1180px; margin: 0 auto; padding: 0 48px; }

/* Accessibility */
.screen-reader-text {
  border: 0;
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  word-wrap: normal !important;
}
.skip-link:focus {
  clip-path: none;
  display: block;
  left: 8px;
  top: 8px;
  height: auto;
  width: auto;
  z-index: 100000;
  background: var(--plum);
  color: var(--cream);
  padding: 14px 22px;
  border-radius: 3px;
  font-size: 13px;
  letter-spacing: .08em;
  text-decoration: none;
}

/* Header */
.hdr {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(239, 219, 194, .93);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(61, 11, 26, .14);
}
body.admin-bar .hdr { top: 32px; }
@media (max-width: 782px) {
  body.admin-bar .hdr { top: 46px; }
}
.hbar { height: 78px; }
.logo { height: 52px; display: block; }
.logo img { height: 100%; width: auto; display: block; }

.hdr nav ul,
.ftr nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 36px;
}
.ftr nav ul { gap: 32px; }

.nl {
  font-size: 12px;
  letter-spacing: .18em;
  font-weight: 500;
  color: var(--ink);
  padding: 4px 0;
  border-bottom: 1.5px solid transparent;
  text-transform: uppercase;
  text-decoration: none;
}
.nl:hover { color: var(--ink); }
.nl.on { border-color: var(--accent); }

.btn {
  display: inline-flex;
  align-items: center;
  background: var(--accent);
  color: #fff6ea;
  border: 0;
  cursor: pointer;
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 17px 32px;
  border-radius: 999px;
  text-decoration: none;
  transition: background .2s;
}
.btn:hover { background: var(--ink); color: #fff6ea; }
.btn-sm { padding: 13px 26px; }

.ghost {
  background: none;
  border: 0;
  cursor: pointer;
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink);
  border-bottom: 1.5px solid var(--accent);
  padding: 0 0 5px;
  text-decoration: none;
}
.ghost:hover { color: var(--accent); }

.eyebrow {
  font-size: 11.5px;
  letter-spacing: .3em;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--accent);
}

.h1 {
  font-family: 'Playfair Display', serif;
  font-size: 74px;
  line-height: 1.05;
  font-weight: 500;
  margin: 0;
  letter-spacing: -.01em;
}
.h2 {
  font-family: 'Playfair Display', serif;
  font-size: 44px;
  line-height: 1.12;
  font-weight: 500;
  margin: 0;
}
.lead {
  font-size: 17px;
  line-height: 1.75;
  color: rgba(61, 11, 26, .8);
  margin: 0;
}

/* Home: hero */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  gap: 76px;
  align-items: center;
  padding-top: 88px;
  padding-bottom: 100px;
}
.hero-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 28px; }
.hero-copy .lead { max-width: 480px; }
.arch {
  width: 100%;
  aspect-ratio: 3 / 3.7;
  object-fit: cover;
  display: block;
  border-radius: 320px 320px 0 0;
  height: auto;
}

/* Plum band */
.plum { background: var(--plum); color: var(--cream); }
.plum .lead { color: rgba(239, 219, 194, .78); }
.plum .ghost { color: var(--cream); }

/* Home: program */
.md {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  gap: 84px;
  align-items: center;
  padding-top: 100px;
  padding-bottom: 100px;
}
.md-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 26px; }
.md-copy .lead { max-width: 460px; }
.mimg { width: 100%; aspect-ratio: 4 / 4.5; object-fit: cover; display: block; border-radius: 3px; height: auto; }

/* Post cards */
.pgrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 48px 34px;
}
.card { cursor: pointer; color: inherit; text-decoration: none; display: block; }
.card:hover { color: inherit; }
.card:hover .ct { color: var(--accent); }
.cimg { width: 100%; aspect-ratio: 4 / 4.8; object-fit: cover; display: block; border-radius: 3px; margin-bottom: 20px; height: auto; }
.cimg-empty { background: var(--plum); }
.cmeta {
  font-size: 11px;
  letter-spacing: .24em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--accent);
}
.ct {
  font-family: 'Playfair Display', serif;
  font-size: 23px;
  line-height: 1.28;
  font-weight: 500;
  margin: 0;
  transition: color .2s;
}
.cdate { font-size: 12.5px; color: rgba(61, 11, 26, .55); letter-spacing: .03em; }
.plum .cdate { color: rgba(239, 219, 194, .55); }
.cbody { display: flex; flex-direction: column; gap: 10px; }

.sechead { margin-bottom: 44px; }
.h2-sm { font-size: 34px; }

.rule { border-top: 1px solid rgba(61, 11, 26, .16); }

/* Home: about */
.about {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 70px;
  align-items: center;
  padding-top: 100px;
  padding-bottom: 100px;
}
.about-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.about-copy .lead { max-width: 560px; }
.headshot { width: 250px; height: 250px; border-radius: 50%; object-fit: cover; display: block; }
.ring { padding: 10px; border: 1px solid rgba(61, 11, 26, .3); border-radius: 50%; }

/* Footer */
.ftr { background: #3d0b1a; color: var(--cream); padding: 60px 0; }
.ftr .nl { color: rgba(239, 219, 194, .75); }
.ftr .nl.on { border-color: transparent; }
.ftr .logo { height: 64px; cursor: default; }
.fnote { font-size: 12px; color: rgba(239, 219, 194, .5); letter-spacing: .06em; }

/* Journal */
.bhero { padding-top: 84px; padding-bottom: 60px; }
.jlist { padding-bottom: 100px; }

.feat {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
  gap: 70px;
  align-items: center;
  margin-bottom: 84px;
}
.feat .h2 { font-size: 38px; }
.feat .lead { font-size: 15.5px; }
.fbody { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.fimg { width: 100%; aspect-ratio: 4 / 3.1; object-fit: cover; display: block; border-radius: 3px; height: auto; }

/* Pagination */
.pagination { margin-top: 64px; }
.pagination .nav-links {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
}
.pagination .page-numbers {
  font-size: 12px;
  letter-spacing: .18em;
  font-weight: 500;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  padding: 4px 0;
  border-bottom: 1.5px solid transparent;
}
.pagination .page-numbers.current { border-color: var(--accent); }
.pagination a.page-numbers:hover { color: var(--accent); }

/* Newsletter band */
.news {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 80px;
  align-items: center;
  padding-top: 76px;
  padding-bottom: 76px;
}
.h2-news { font-size: 36px; }
.news form { display: flex; align-items: center; gap: 16px; }
.inp,
.news input[type="email"],
.news input[type="text"] {
  background: none;
  border: 0;
  border-bottom: 1.5px solid rgba(239, 219, 194, .45);
  color: var(--cream);
  font-family: 'DM Sans', sans-serif;
  font-size: 15px;
  padding: 12px 2px;
  outline: none;
  flex: 1;
  min-width: 0;
  border-radius: 0;
}
.inp::placeholder,
.news input::placeholder { color: rgba(239, 219, 194, .55); }
.news input[type="submit"],
.news button {
  display: inline-flex;
  align-items: center;
  background: var(--accent);
  color: #fff6ea;
  border: 0;
  cursor: pointer;
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 17px 32px;
  border-radius: 999px;
  transition: background .2s;
}
.news input[type="submit"]:hover,
.news button:hover { background: var(--ink); }
.news-embed p { margin: 0; }

.pad100 { padding-top: 100px; padding-bottom: 100px; }

/* Single post / page */
.post-hero { max-width: 760px; margin: 0 auto; padding: 84px 48px 48px; text-align: center; }
.post-title { font-family: 'Playfair Display', serif; font-size: 52px; line-height: 1.12; font-weight: 500; margin: 18px 0 20px; letter-spacing: -.01em; }
.post-figure { max-width: 980px; margin: 0 auto; padding: 0 48px; }
.pimg { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; border-radius: 3px; height: auto; }

.prose { max-width: 680px; margin: 0 auto; padding: 56px 48px 90px; }
.prose > *:first-child { margin-top: 0; }
.prose p { font-size: 17px; line-height: 1.85; color: rgba(61, 11, 26, .85); margin: 0 0 26px; }
.prose h2 { font-family: 'Playfair Display', serif; font-size: 30px; line-height: 1.2; font-weight: 500; margin: 44px 0 18px; }
.prose h3 { font-family: 'Playfair Display', serif; font-size: 23px; line-height: 1.3; font-weight: 500; margin: 36px 0 14px; }
.prose h4, .prose h5, .prose h6 { font-family: 'Playfair Display', serif; font-weight: 500; margin: 32px 0 12px; }
.prose blockquote {
  margin: 36px 0;
  padding: 4px 0 4px 28px;
  border-left: 2px solid var(--accent);
  font-family: 'Playfair Display', serif;
  font-size: 22px;
  line-height: 1.5;
  font-style: italic;
  color: var(--ink);
}
.prose blockquote p { font: inherit; color: inherit; margin: 0; }
.prose blockquote cite { display: block; margin-top: 12px; font-family: 'DM Sans', sans-serif; font-size: 13px; font-style: normal; letter-spacing: .06em; color: rgba(61, 11, 26, .6); }
.prose ul, .prose ol { padding-left: 24px; margin: 0 0 26px; }
.prose li { font-size: 17px; line-height: 1.85; color: rgba(61, 11, 26, .85); margin-bottom: 8px; }
.prose img { max-width: 100%; height: auto; border-radius: 3px; }
.prose figure { margin: 0 0 26px; }
.prose figcaption { font-size: 13px; color: rgba(61, 11, 26, .55); margin-top: 10px; text-align: center; }
.prose hr { border: 0; border-top: 1px solid rgba(61, 11, 26, .16); margin: 44px 0; }
.prose .wp-block-separator { border-top: 1px solid rgba(61, 11, 26, .16); }
.prose a { color: var(--accent); }
.prose a:hover { color: var(--ink); }
.prose > .alignwide, .prose > .alignfull { max-width: 100%; }
.backlink { display: inline-block; margin-bottom: 8px; }

/* WordPress core content classes */
.alignleft { float: left; margin: 6px 24px 16px 0; }
.alignright { float: right; margin: 6px 0 16px 24px; }
.aligncenter { display: block; margin-left: auto; margin-right: auto; }
.wp-caption { max-width: 100%; }
.wp-caption-text { font-size: 13px; color: rgba(61, 11, 26, .55); margin-top: 10px; text-align: center; }
.sticky { display: block; }
.bypostauthor { display: block; }
.gallery-caption { display: block; }

@media (max-width: 980px) {
  .wrap { padding: 0 28px; }
  .h1 { font-size: 52px; }
  .h2 { font-size: 36px; }
  .hero { grid-template-columns: minmax(0, 1fr); gap: 48px; padding-top: 56px; padding-bottom: 64px; }
  .arch { max-width: 460px; }
  .md { grid-template-columns: minmax(0, 1fr); gap: 44px; padding-top: 64px; padding-bottom: 64px; }
  .pgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .feat { grid-template-columns: minmax(0, 1fr); gap: 36px; margin-bottom: 56px; }
  .about { grid-template-columns: minmax(0, 1fr); gap: 40px; justify-items: start; }
  .news { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .pad100 { padding-top: 64px; padding-bottom: 64px; }
  .post-hero, .post-figure, .prose { padding-left: 28px; padding-right: 28px; }
  .post-title { font-size: 38px; }
}

@media (max-width: 640px) {
  .wrap { padding: 0 20px; }
  .h1 { font-size: 40px; }
  .h2 { font-size: 30px; }
  .hbar { height: 66px; }
  .logo { height: 40px; }
  .hdr .btn { display: none; }
  .hdr nav ul { gap: 20px; }
  .pgrid { grid-template-columns: minmax(0, 1fr); }
  .post-hero { padding-top: 48px; }
  .post-title { font-size: 32px; }
  .ftr .fx.jb { flex-direction: column; gap: 28px; }
}