/* ---- The Pacific Journal (scoped styles, loaded after styles.css) ---- */

/* header */
.jr-head { padding: calc(var(--gutter) + 3.5rem) 0 2.4rem; background: var(--paper); }
.jr-head .crumb { display: inline-block; margin-bottom: 1.1rem; }
.jr-head .lede { max-width: 52ch; color: var(--ink-soft); margin-top: 1.1rem; font-size: 1.05rem; line-height: 1.6; }

/* index cards */
.jr-list { padding: clamp(1.5rem, 4vw, 3rem) 0 clamp(3rem, 7vw, 5rem); }
.jr-card { display: block; padding: clamp(1.6rem, 4vw, 2.6rem) 0; border-top: 1px solid var(--line); }
.jr-card:last-child { border-bottom: 1px solid var(--line); }
.jr-card .kicker { margin-bottom: 0.7rem; }
.jr-card h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(1.5rem, 3.4vw, 2.2rem); line-height: 1.15; color: var(--ink); transition: color .2s; }
.jr-card h2 em { font-style: italic; }
.jr-card:hover h2 { color: var(--ocean); }
.jr-card .dek { max-width: 60ch; color: var(--ink-soft); margin-top: 0.8rem; line-height: 1.6; }
.jr-card .meta { font-family: var(--sans); font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); margin-top: 1rem; }

/* article */
.jr-art { padding: 0 0 clamp(3rem, 7vw, 5rem); }
.jr-art .art-head { padding: calc(var(--gutter) + 3.5rem) 0 1.6rem; }
.jr-art .art-head .crumb { display: inline-block; margin-bottom: 1.1rem; }
.jr-art .art-head h1 { max-width: 20ch; }
.jr-art .art-meta { font-family: var(--sans); font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); margin-top: 1.2rem; }
.jr-art .art-photo { margin: 1.8rem 0 0; }
.jr-art .art-photo img { width: 100%; max-height: 62vh; object-fit: cover; border-radius: 3px; display: block; }
.jr-art .art-photo figcaption { font-family: var(--serif); font-style: italic; color: var(--muted); margin-top: 0.55rem; font-size: 0.95rem; }

.jr-prose { max-width: 68ch; margin-top: clamp(1.8rem, 4vw, 2.8rem); }
.jr-prose .art-photo { margin: 1.9rem 0 2.1rem; }
.jr-prose .art-photo img { max-height: 48vh; }
.jr-prose p { color: var(--ink-soft); line-height: 1.75; margin-bottom: 1.35rem; font-size: 1.02rem; }
.jr-prose p strong { color: var(--ink); font-weight: 500; }
.jr-prose h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(1.35rem, 2.8vw, 1.8rem); color: var(--ink); margin: 2.4rem 0 1rem; line-height: 1.2; }
.jr-prose h2 em { font-style: italic; }
.jr-prose ul { margin: 0 0 1.35rem 1.1rem; }
.jr-prose li { color: var(--ink-soft); line-height: 1.7; margin-bottom: 0.55rem; }
.jr-prose li::marker { color: var(--ocean); }
.jr-prose a { color: var(--ocean); border-bottom: 1px solid rgba(27,90,127,0.3); transition: border-color .2s; }
.jr-prose a:hover { border-color: var(--ocean); }
.jr-prose .pull { font-family: var(--serif); font-style: italic; font-size: clamp(1.15rem, 2.4vw, 1.45rem); color: var(--ink); line-height: 1.45; border-left: 2px solid var(--ocean); padding-left: 1.3rem; margin: 2.2rem 0; }
.jr-prose .aside-note { font-size: 0.88rem; color: var(--muted); border-top: 1px solid var(--line); padding-top: 1rem; margin-top: 2.6rem; }

/* end-of-post CTA */
.jr-cta { max-width: 68ch; margin-top: clamp(2.2rem, 5vw, 3.2rem); border: 1px solid var(--line); border-radius: 4px; padding: clamp(1.6rem, 4vw, 2.4rem); background: var(--paper-2); }
.jr-cta h3 { font-family: var(--serif); font-weight: 400; font-size: 1.35rem; color: var(--ink); margin-bottom: 0.7rem; }
.jr-cta p { color: var(--ink-soft); line-height: 1.65; margin-bottom: 1.1rem; }
.jr-cta .row { display: flex; gap: 1.6rem; flex-wrap: wrap; }

/* more posts */
.jr-more { max-width: 68ch; margin-top: clamp(2.2rem, 5vw, 3.2rem); }
.jr-more h4 { font-family: var(--sans); font-size: 0.7rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); margin-bottom: 1rem; }
.jr-more a { display: block; font-family: var(--serif); font-size: 1.1rem; color: var(--ink); padding: 0.7rem 0; border-top: 1px solid var(--line); transition: color .2s; }
.jr-more a:hover { color: var(--ocean); }