/* ZAMYSLENIA · styles for the journal landing and articles.
   Colours and fonts come from style.css. Change card widths and offsets
   below to make the zig-zag composition quieter or more expressive. */

.journal-page { background: var(--color-paper); }
.journal-page .site-nav a[aria-current="page"] { color: var(--color-accent); }

/* The opening feels like an editorial page, with a small note to the side. */
.journal-intro { padding-block: clamp(86px, 9vw, 155px) 100px; }
.journal-lead { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(210px, .55fr); gap: 10%; align-items: end; }
.journal-lead .eyebrow { color: var(--color-accent); }
.journal-lead h1 { margin: 0; font: 400 clamp(78px, 8vw, 118px)/.95 var(--font-heading); letter-spacing: -.075em; }
.journal-lead h1 em { color: var(--color-accent); font-weight: 400; }
.journal-lead-text { max-width: 350px; padding-bottom: 10px; }
.journal-lead-text p { margin: 0; color: var(--color-muted); font-size: 16px; line-height: 1.85; }
.journal-lead-text .journal-number { margin-bottom: 21px; color: var(--color-accent); font: 12px/1 var(--font-heading); letter-spacing: .13em; }
.journal-rule { margin-top: 72px; border-top: 1px solid var(--color-line); }
.journal-rule span { display: inline-block; margin-top: 16px; color: var(--color-muted); font-size: 10px; font-weight: 700; letter-spacing: .18em; }

/* Independent image-led stories: edit the nth-child widths/offsets here. */
.journal-flow { display: flex; flex-direction: column; padding-bottom: 155px; }
.thought-card { display: block; width: min(57%, 560px); color: var(--color-ink); }
.thought-card:nth-child(2) { width: min(45%, 460px); margin: -75px 2% 0 auto; }
.thought-card:nth-child(3) { width: min(53%, 520px); margin: 115px 0 0 8%; }
.thought-card figure { margin: 0 0 27px; overflow: hidden; background: var(--color-sage); }
.thought-card img { width: 100%; height: auto; aspect-ratio: 1.2; object-fit: cover; object-position: center 42%; transition: transform .7s cubic-bezier(.2,.7,.2,1), filter .45s; }
.thought-card:nth-child(2) img { aspect-ratio: .89; object-position: center; }
.thought-card:nth-child(3) img { aspect-ratio: 1.12; object-position: center 55%; }
.thought-card:hover img { transform: scale(1.045); filter: contrast(1.08); }
.thought-card .story-index { display: block; margin-bottom: 16px; color: var(--color-accent); font-size: 10px; font-weight: 700; letter-spacing: .18em; }
.thought-card h2 { max-width: 620px; margin: 0; font: 400 clamp(38px, 4.3vw, 60px)/1.12 var(--font-heading); letter-spacing: -.045em; }
.thought-card p { max-width: 520px; margin: 17px 0 24px; color: var(--color-muted); font-size: 15px; line-height: 1.8; }
.thought-card .story-open { display: inline-flex; align-items: center; gap: 52px; padding-bottom: 8px; border-bottom: 1px solid currentColor; font-size: 12px; font-weight: 700; transition: color .2s, gap .2s; }
.thought-card:hover .story-open { gap: 62px; color: var(--color-accent); }
.journal-end { padding-block: 75px; background: var(--color-sage); text-align: center; }
.journal-end .section-title { margin-bottom: 27px; }

/* Each article is a real HTML page with visible prose and source links. */
.article-breadcrumb { display: inline-block; margin: 50px 0 60px; padding-bottom: 6px; border-bottom: 1px solid var(--color-line); color: var(--color-muted); font-size: 11px; font-weight: 700; }
.article-breadcrumb:hover { color: var(--color-accent); }
.article-hero { display: grid; grid-template-columns: 1fr .93fr; gap: 7%; align-items: center; padding-bottom: 100px; }
.article-hero .eyebrow { color: var(--color-accent); }
.article-hero h1 { max-width: 650px; margin: 0 0 32px; font: 400 clamp(52px, 5.9vw, 86px)/1.04 var(--font-heading); letter-spacing: -.058em; }
.article-hero h1 em { color: var(--color-accent); font-weight: 400; }
.article-standfirst { max-width: 570px; margin: 0; font: 400 clamp(20px, 2vw, 27px)/1.52 var(--font-heading); }
.article-author { margin-top: 28px; color: var(--color-muted); font-size: 11px; font-weight: 700; letter-spacing: .08em; }
.article-hero figure { margin: 0; }
.article-hero img { width: 100%; height: clamp(480px, 44vw, 650px); object-fit: cover; object-position: center; }
.article-hero figcaption { margin-top: 11px; color: var(--color-muted); font-size: 10px; letter-spacing: .1em; }
.article-body-wrap { padding-block: 90px 125px; border-top: 1px solid var(--color-line); background: var(--color-light); }
.article-body { max-width: 760px; margin-inline: auto; }
.article-body > p:first-child { margin-top: 0; font: 400 25px/1.62 var(--font-heading); }
.article-body p, .article-body li { font-size: 17px; line-height: 1.9; }
.article-body p { margin: 0 0 25px; }
.article-body a { color: var(--color-accent); text-decoration: underline; text-underline-offset: 4px; }
.article-body a:hover { color: var(--color-ink); }
.article-body h2 { margin: 66px 0 22px; font: 400 clamp(34px, 3.5vw, 48px)/1.18 var(--font-heading); letter-spacing: -.04em; }
.article-body h3 { margin: 38px 0 14px; font: 400 26px/1.3 var(--font-heading); }
.article-body ul, .article-body ol { margin: 0 0 28px; padding-left: 24px; }
.article-body li { padding-left: 7px; margin-bottom: 9px; }
.article-body blockquote { margin: 65px -75px; padding: 36px 0 36px 35px; border-left: 2px solid var(--color-accent); color: var(--color-accent); font: italic 400 clamp(29px, 3vw, 42px)/1.42 var(--font-heading); }
.article-body strong { font-weight: 700; }
.source-notes { max-width: 760px; margin: 95px auto 0; padding-top: 25px; border-top: 1px solid var(--color-line); }
.source-notes h2 { margin: 0 0 15px; font: 400 29px/1.2 var(--font-heading); }
.source-notes p, .source-notes li { color: var(--color-muted); font-size: 12px; line-height: 1.8; }
.source-notes ul { margin: 0; padding-left: 19px; }
.source-notes a { color: var(--color-ink); text-decoration: underline; text-underline-offset: 3px; }
.source-notes a:hover { color: var(--color-accent); }
.article-next { padding-block: 90px; background: var(--color-sage); }
.article-next .eyebrow { color: var(--color-accent); }
.article-next h2 { max-width: 700px; margin-bottom: 30px; }
.article-next .text-link { font-size: 13px; }

@media (max-width: 900px) {
  .journal-lead { gap: 6%; }
  .thought-card:nth-child(2) { margin-top: 20px; }
  .article-body blockquote { margin-inline: 0; }
}

@media (max-width: 720px) {
  .journal-intro { padding-block: 80px 55px; }
  .journal-lead { grid-template-columns: 1fr; gap: 35px; }
  .journal-lead h1 { font-size: clamp(48px, 13vw, 80px); }
  .journal-lead-text { max-width: 540px; }
  .journal-rule { margin-top: 45px; }
  .journal-flow { gap: 75px; padding-bottom: 95px; }
  .thought-card, .thought-card:nth-child(2), .thought-card:nth-child(3) { width: 100%; margin: 0; }
  .thought-card:nth-child(2) { width: 87%; align-self: flex-end; }
  .thought-card:nth-child(3) { width: 93%; }
  .thought-card figure { margin-bottom: 20px; }
  .thought-card h2 { font-size: clamp(35px, 9vw, 54px); }
  .thought-card p { font-size: 14px; }
  .journal-end { padding-block: 60px; }
  .article-breadcrumb { margin: 29px 0 45px; }
  .article-hero { grid-template-columns: 1fr; gap: 35px; padding-bottom: 75px; }
  .article-hero h1 { font-size: clamp(52px, 11vw, 74px); }
  .article-hero img { height: min(96vw, 480px); }
  .article-body-wrap { padding-block: 68px 85px; }
  .article-body > p:first-child { font-size: 22px; }
  .article-body p, .article-body li { font-size: 16px; }
  .article-body h2 { margin-top: 54px; }
  .article-body blockquote { margin-block: 50px; padding-left: 25px; }
  .source-notes { margin-top: 70px; }
}

@media (max-width: 390px) {
  .journal-lead h1 { font-size: 49px; }
  .thought-card:nth-child(2) { width: 93%; }
  .article-hero h1 { font-size: 49px; }
}

/* Six articles in a calm three-column editorial grid. */
.journal-intro { padding-block: clamp(80px, 7vw, 110px) 50px; }
.journal-flow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 62px 30px; align-items: start; padding-bottom: 115px; }
.thought-card, .thought-card:nth-child(2), .thought-card:nth-child(3) { width: 100%; min-width: 0; margin: 0; align-self: auto; }
.thought-card figure { margin-bottom: 17px; }
.thought-card img, .thought-card:nth-child(2) img, .thought-card:nth-child(3) img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; object-position: center; }
.thought-card:nth-child(3n+2) img { aspect-ratio: 5 / 4; }
.thought-card .story-index { margin-bottom: 11px; }
.thought-card h2 { font-size: clamp(28px, 2.45vw, 36px); line-height: 1.16; }
.thought-card p { margin-block: 12px 20px; font-size: 14px; line-height: 1.7; }
.journal-end { text-align: left; }
.journal-end .theta-end-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 500px); gap: clamp(45px, 7vw, 110px); align-items: start; }
.journal-end h2 { margin: 0 0 15px; font: 400 clamp(38px, 3.5vw, 52px)/1.18 var(--font-heading); letter-spacing: -.04em; }
.journal-end p:not(.eyebrow) { max-width: 500px; line-height: 1.75; }
.journal-end .booking-dialog { max-width: none; margin: 0; }
.journal-end .booking-title { margin: 0 0 13px; font: 400 clamp(32px, 3vw, 44px)/1.15 var(--font-heading); }
@media (max-width: 900px) {
  .journal-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 52px 24px; }
  .journal-end .theta-end-grid { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 600px) {
  .journal-intro { padding-block: 68px 40px; }
  .journal-flow { grid-template-columns: 1fr; gap: 46px; padding-bottom: 70px; }
  .thought-card, .thought-card:nth-child(2), .thought-card:nth-child(3) { width: 100%; }
  .thought-card h2 { font-size: 31px; }
  .journal-end { padding-block: 58px; }
}