/* ============ Brittani Fagel — journal: entry cards, post pages, shop this post ============ */

/* ---------- entry cards (homepage + journal index + "more from") ---------- */
.journal-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 4vw, 52px); align-items: start; }
.entry { transform: rotate(var(--r, 0deg)); transition: transform .45s var(--ease); }
.entry:hover, .entry:focus-within { transform: translateY(-6px) rotate(0deg); }
.entry-link {
  display: grid;
  padding: 12px 12px 24px;
  color: inherit;
  text-decoration: none;
  background-color: var(--ivory);
  background-image: var(--grain);
  box-shadow: 0 1px 1px rgba(59, 37, 27, .14), 0 18px 28px -14px rgba(59, 37, 27, .45);
}
.entry-cover { display: block; aspect-ratio: 4 / 5; overflow: hidden; }
.entry-cover img, .entry-cover .ph { display: grid; width: 100%; height: 100%; object-fit: cover; object-position: center 20%; }
.entry-text { display: grid; gap: 8px; padding: 18px 10px 0; }
.entry .eyebrow { display: block; }
.entry-title { margin: 0; font-family: var(--f-display); font-weight: 400; font-size: 29px; line-height: 1.08; color: var(--burgundy); text-wrap: balance; }
.entry-link:hover .entry-title { font-style: italic; }
.entry-dek { font-size: 15.5px; line-height: 1.6; color: var(--brown); }
.entry-more { margin-top: 4px; font-size: 12px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--rose-ink); }
.journal-all { margin: 44px 0 0; text-align: center; }
.journal-all .link-line { background-color: var(--ivory); padding: 8px 12px; }
.journal-empty { padding: 14px 18px; background: var(--ivory); font-style: italic; }

/* journal index: the newest entry leads, wide */
.journal-index { padding-top: clamp(96px, 10vw, 130px); }
.journal-grid--all .entry:first-child { grid-column: span 2; }
.journal-grid--all .entry:first-child .entry-cover { aspect-ratio: 16 / 10; }
.journal-grid--all .entry:first-child .entry-title { font-size: clamp(34px, 4vw, 46px); }

/* ---------- a post ---------- */
.post { padding: clamp(96px, 10vw, 130px) clamp(16px, 4vw, 32px) 0; }
.post article { max-width: 860px; margin: 0 auto; }
.post-head {
  display: grid;
  justify-items: center;
  gap: 14px;
  margin-bottom: 40px;
  padding: 38px clamp(20px, 5vw, 56px) 34px;
  text-align: center;
  background-color: var(--ivory);
  background-image: var(--grain);
  box-shadow: 0 16px 26px -16px rgba(59, 37, 27, .45);
}
.post-head .eyebrow a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--rose); }
.post-title { margin: 0; font-family: var(--f-display); font-weight: 300; font-size: clamp(46px, 6.6vw, 80px); line-height: .98; letter-spacing: -.02em; color: var(--burgundy); text-wrap: balance; }
.post-dek { margin: 0; max-width: 46ch; font-family: var(--f-display); font-style: italic; font-weight: 500; font-size: 22px; line-height: 1.4; color: var(--brown); }
.post-cover { --r: -1deg; max-width: 780px; margin: 0 auto 44px; }
.post-cover .ph { display: grid; width: 100%; aspect-ratio: 3 / 2; }
.post-cover img { display: block; width: 100%; height: auto; }
.post-letter .face { padding: clamp(40px, 5vw, 64px) clamp(22px, 6vw, 76px); }
.post-body { font-size: 17.5px; line-height: 1.85; }
.post-body > * { max-width: 64ch; margin-left: auto; margin-right: auto; }
.post-body p { margin-top: 0; margin-bottom: 1.2em; }
.post-body > p:first-child::first-letter { float: left; padding: .08em .1em 0 0; font-family: var(--f-display); font-size: 4.4em; line-height: .78; color: var(--burgundy); }
.post-body h2 { margin-top: 1.5em; margin-bottom: .45em; font-family: var(--f-display); font-weight: 400; font-size: 34px; line-height: 1.12; color: var(--burgundy); }
.post-body h3 { margin-top: 1.3em; margin-bottom: .35em; font-family: var(--f-display); font-style: italic; font-weight: 500; font-size: 26px; line-height: 1.2; color: var(--burgundy); }
.post-body a { color: var(--burgundy); text-decoration-color: var(--rose); text-underline-offset: 3px; }
.post-body blockquote { margin-top: 1.6em; margin-bottom: 1.6em; padding-left: 22px; border-left: 2px solid var(--rose); font-family: var(--f-display); font-style: italic; font-size: 27px; line-height: 1.35; color: var(--burgundy); }
.post-body blockquote p { margin: 0; }
.post-body ul, .post-body ol { padding-left: 1.3em; }
.post-body li { margin-bottom: .45em; }
.post-body li::marker { color: var(--rose); }
.post-figure { --r: 1deg; max-width: 560px; margin-top: 2em; margin-bottom: 2em; }
.post-figure img { display: block; width: 100%; }
.post-body .sign { margin-top: 1.4em; margin-bottom: 0; font-family: var(--f-display); font-style: italic; font-size: 38px; line-height: 1.1; color: var(--burgundy); text-align: right; }

/* ---------- shop this post ---------- */
.post-shop { max-width: 1040px; margin: 80px auto 0; text-align: center; }
.post-shop-title, .post-more-title {
  display: inline-block;
  margin: 0 0 34px;
  padding: 12px 30px 14px;
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(34px, 4.6vw, 52px);
  line-height: 1;
  color: var(--burgundy);
  background-color: var(--ivory);
  background-image: var(--grain);
  box-shadow: 0 12px 20px -12px rgba(59, 37, 27, .45);
  transform: rotate(-1deg);
}
.post-shop-title em, .post-more-title em { font-style: italic; color: var(--rose-ink); }
.shop-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 30px; text-align: left; }
.shop-card { display: grid; gap: 4px; color: inherit; text-decoration: none; transition: transform .4s var(--ease); }
.shop-card:nth-child(odd) { transform: rotate(-1.2deg); }
.shop-card:nth-child(even) { transform: rotate(1deg); }
.shop-card:hover { transform: translateY(-5px) rotate(0deg); }
.shop-card-media { display: block; padding: 10px; }
.shop-card-media img, .shop-card-media .ph { display: grid; width: 100%; aspect-ratio: 1; object-fit: contain; background: #fff; }
.shop-card-name { margin-top: 10px; padding: 0 4px; font-family: var(--f-display); font-style: italic; font-weight: 500; font-size: 21px; line-height: 1.15; color: var(--burgundy); }
.shop-card-meta { padding: 0 4px; font-size: 11.5px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--brown); }
.shop-card-meta em { font-style: normal; color: var(--rose-ink); margin-left: 6px; }
.shop-card-name, .shop-card-meta { background: var(--ivory); }

/* ---------- more from the journal ---------- */
.post-more { max-width: 1240px; margin: 90px auto 0; text-align: center; }
.post-more .journal-grid { text-align: left; }

/* ---------- 404 ---------- */
.not-found { display: grid; justify-items: start; gap: 18px; min-height: 50vh; padding-top: clamp(110px, 11vw, 150px); }
.not-found .sec-sub a { color: var(--burgundy); }

/* ---------- responsive ---------- */
@media (max-width: 960px) {
  .journal-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .journal-grid--all .entry:first-child { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .journal-grid { grid-template-columns: 1fr; max-width: 440px; margin: 0 auto; }
  .entry-title { font-size: 26px; }
  .post-body { font-size: 16.5px; }
  .shop-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
}