/* Journal article (single.html). Design: "Journal - article" boards, 12 Nov. Loaded after journal.css on posts. */

/* Accent: the post's collection, else forest. */
.tz-article, .tz-story-products { --accent: var(--tz-forest); }
.tz-accent-japan .tz-article, .tz-accent-japan .tz-story-products { --accent: var(--wp--preset--color--japan); }
.tz-accent-california .tz-article, .tz-accent-california .tz-story-products { --accent: var(--wp--preset--color--california); }
.tz-accent-bali .tz-article, .tz-accent-bali .tz-story-products { --accent: var(--wp--preset--color--bali); }
.tz-accent-portugal .tz-article, .tz-accent-portugal .tz-story-products { --accent: var(--wp--preset--color--portugal); }
.tz-accent-rio .tz-article, .tz-accent-rio .tz-story-products { --accent: var(--wp--preset--color--rio); }

.tz-article { --tz-gutter: var(--wp--style--root--padding-left, clamp(16px, 4vw, 48px)); padding: 0; }
.tz-article > * { margin-block: 0 !important; }

/* ---------- Head ---------- */
.tz-article__head { max-width: 1320px; margin: 0 auto !important; padding: var(--wp--preset--spacing--50) var(--tz-gutter) 0; box-sizing: border-box; }
.tz-article__head > * { margin-block: 0 !important; }
.tz-ahead { max-width: 860px; margin: 0 auto !important; padding: 56px 0 56px; display: flex; flex-direction: column; align-items: center; gap: 24px; text-align: center; }
.tz-ahead > * { margin: 0 !important; }
.tz-ahead__eyebrow { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 14px; font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; }
.tz-ahead__eyebrow a { text-decoration: none; }
.tz-ahead__eyebrow a:hover { text-decoration: underline; text-underline-offset: 3px; }
.tz-ahead__topic { color: var(--accent); }
.tz-ahead__col { color: var(--tz-muted); }
.tz-ahead__dot { width: 4px; height: 4px; border-radius: 50%; background: var(--tz-line-strong, #b8ada0); }
.tz-ahead__title { font-family: var(--wp--preset--font-family--display); font-size: 68px; line-height: 1.06; font-weight: 500; color: var(--tz-ink); text-wrap: balance; }
.tz-ahead__standfirst { max-width: 40em; font-size: 21px; line-height: 33px; color: #3a3833; text-wrap: pretty; }
.tz-ahead__byline { display: flex; align-items: center; gap: 14px; padding-top: 8px; text-align: left; }
.tz-ahead__byline p { margin: 0; font-size: 14px; line-height: 20px; color: var(--tz-muted); }
.tz-ahead__byline p > span[aria-hidden] { margin: 0 4px; }
.tz-ahead__author { display: block; color: var(--tz-ink); font-weight: 500; }
.tz-avatar { flex: none; width: 44px; height: 44px; border-radius: 50%; object-fit: cover; object-position: center 25%; background: #e2ddd4; display: inline-flex; align-items: center; justify-content: center; font-family: var(--wp--preset--font-family--display); font-size: 18px; color: var(--tz-ink); }

/* ---------- Hero image ---------- */
.tz-article__media { max-width: 1200px; margin: 0 auto !important; padding: 0 var(--tz-gutter); box-sizing: content-box; }
.tz-article__media .tz-post-media { margin: 0 !important; }

/* ---------- Body: rail | text | (space) ---------- */
.tz-article__body { max-width: 1320px; margin: 0 auto !important; padding: 80px var(--tz-gutter) var(--wp--preset--spacing--90); box-sizing: border-box; display: grid; grid-template-columns: 220px minmax(0, 680px) 220px; gap: 60px; justify-content: center; align-items: start; }
.tz-article__body::after { content: ""; }
.tz-article__body > * { margin: 0 !important; min-width: 0; }
.tz-article__main > * { margin-block: 0 !important; }

/* Rail */
.tz-arail { position: sticky; top: 24px; }
.tz-arail__inner { display: flex; flex-direction: column; gap: 40px; }
.tz-toc__label { display: flex; justify-content: space-between; align-items: center; list-style: none; cursor: pointer; margin: 0 0 14px; font-size: 11px; line-height: 16px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--tz-muted); }
.tz-toc__label::-webkit-details-marker { display: none; }
.tz-toc__label svg { transition: transform .2s ease; }
.tz-toc[open] .tz-toc__label svg { transform: rotate(180deg); }
.tz-toc__list { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--tz-line); }
.tz-toc__list li { margin: 0; border-top: 1px solid var(--tz-line); }
.tz-toc__list a { display: block; padding: 10px 0 10px 14px; border-left: 2px solid transparent; font-size: 14px; line-height: 20px; color: var(--tz-muted); text-decoration: none; transition: color .15s ease, border-color .15s ease; }
.tz-toc__list a:hover { color: var(--tz-ink); }
.tz-toc__list a[aria-current] { color: var(--tz-ink); border-left-color: var(--accent); }

.tz-share__label, .tz-aend__label { margin: 0 0 14px; font-size: 11px; line-height: 16px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--tz-muted); }
.tz-share__links { display: flex; flex-wrap: wrap; gap: 8px; }
.tz-share__links[hidden] { display: none; }
.tz-share__btn { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 1px solid var(--tz-line-strong, #cfc8bd); background: transparent; color: #3a3833; font: 500 13px/16px var(--wp--preset--font-family--sans, inherit); text-decoration: none; cursor: pointer; box-sizing: border-box; transition: background-color .15s ease, color .15s ease, border-color .15s ease; }
.tz-share__btn:hover { background: var(--tz-ink); border-color: var(--tz-ink); color: var(--tz-surface); }
.tz-share__btn[hidden] { display: none; }

/* ---------- Content styles inside an article ---------- */
.tz-article__content { font-size: 18px; line-height: 31px; color: #3a3833; }
.tz-article__content > *:first-child { margin-top: 0 !important; }
.tz-article__content h2 { font-size: 36px; line-height: 42px; margin-top: 56px; margin-bottom: 18px; color: var(--tz-ink); scroll-margin-top: 24px; }
.tz-article__content h3 { font-size: 26px; line-height: 32px; margin-top: 40px; margin-bottom: 12px; color: var(--tz-ink); }
/* Drop cap on the opening paragraph */
.tz-article__content > p:first-child::first-letter { float: left; margin: 6px 12px 0 0; font-family: var(--wp--preset--font-family--display); font-size: 80px; line-height: 62px; color: var(--accent); }
/* Quotes: centred, accent rule */
.tz-article__content blockquote, .tz-article__content .wp-block-pullquote { margin: 56px 0; padding: 0; border: 0; text-align: center; font-family: inherit; font-size: inherit; }
.tz-article__content .wp-block-pullquote blockquote { margin: 0; }
.tz-article__content blockquote::before { content: ""; display: block; width: 40px; height: 1px; margin: 0 auto 24px; background: var(--accent); }
.tz-article__content .wp-block-pullquote blockquote::before { display: block; }
.tz-article__content blockquote p { margin: 0 0 18px; font-family: var(--wp--preset--font-family--display); font-size: 36px; line-height: 46px; font-style: italic; color: var(--tz-ink); }
.tz-article__content blockquote cite, .tz-article__content blockquote footer { display: block; font-style: normal; font-size: 12px; line-height: 16px; letter-spacing: .18em; text-transform: uppercase; color: var(--tz-muted); }
/* Wide and full-width images break out of the text column */
.tz-article__content .alignwide, .tz-article__content .alignfull { max-width: none !important; width: auto; margin: 56px -150px; }
.tz-article__content .alignwide img, .tz-article__content .alignfull img { width: 100%; }
.tz-article__content figure { margin-block: 40px; }

/* Inline product card ("In this story") */
.tz-inprod { position: relative; display: grid; grid-template-columns: 160px 1fr; gap: 24px; align-items: center; margin: 48px 0 !important; padding: 20px; background: #efebe4; }
.tz-inprod__media { display: block; }
.tz-inprod__img { display: block; width: 160px; height: 200px; object-fit: cover; background: var(--tz-stone); }
.tz-inprod__body { display: flex; flex-direction: column; gap: 8px; }
.tz-inprod__body > p { margin: 0; }
.tz-inprod__eyebrow { font-size: 11px; line-height: 16px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); }
.tz-inprod__name { font-family: var(--wp--preset--font-family--display); font-size: 24px; line-height: 30px; }
.tz-article__content .tz-inprod__name a { color: var(--tz-ink); text-decoration: none; }
.tz-inprod__name a::after { content: ""; position: absolute; inset: 0; } /* whole card clickable */
.tz-inprod__name a:hover { text-decoration: underline; text-underline-offset: 3px; }
.tz-inprod__price { font-size: 16px; line-height: 24px; color: var(--tz-ink); font-variant-numeric: tabular-nums; }
.tz-inprod__price del { color: var(--tz-muted); margin-right: 6px; }
.tz-inprod__price ins { text-decoration: none; }
.tz-article__content .tz-inprod .tz-arrow-link a { color: var(--tz-ink); text-decoration: none; }

/* ---------- End of the article ---------- */
.tz-aend { margin-top: 48px !important; display: flex; flex-direction: column; gap: 32px; }
.tz-aend__tags { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-top: 24px; border-top: 1px solid var(--tz-line); }
.tz-aend__tags .tz-aend__label { margin: 0 6px 0 0; }
.tz-aend__tags ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.tz-chip { display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border: 1px solid var(--tz-line-strong, #cfc8bd); color: #3a3833; font-size: 13px; line-height: 16px; text-decoration: none; }
.tz-chip:hover { border-color: var(--tz-ink); color: var(--tz-ink); }
.tz-share--end { display: none; }
.tz-share--end .tz-share__links { align-items: center; }
.tz-share--end .tz-aend__label { margin: 0 6px 0 0; }
.tz-share__native { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 48px; border: 1px solid var(--tz-ink); background: transparent; color: var(--tz-ink); font: 500 13px/16px var(--wp--preset--font-family--sans, inherit); letter-spacing: .12em; text-transform: uppercase; cursor: pointer; }
.tz-share__native[hidden] { display: none; }

.tz-author { display: grid; grid-template-columns: 88px 1fr; gap: 24px; align-items: start; padding: 28px; background: #efebe4; }
.tz-author__photo { width: 88px; height: 88px; border-radius: 50%; object-fit: cover; object-position: center 25%; }
.tz-author__photo--initials { display: flex; align-items: center; justify-content: center; background: #e2ddd4; font-family: var(--wp--preset--font-family--display); font-size: 30px; color: var(--tz-ink); }
.tz-author__body { display: flex; flex-direction: column; gap: 8px; }
.tz-author__body > p { margin: 0; }
.tz-author__body .tz-aend__label { margin: 0; }
.tz-author__name { font-family: var(--wp--preset--font-family--display); font-size: 26px; line-height: 30px; color: var(--tz-ink); }
.tz-author__bio { font-size: 15px; line-height: 24px; color: #3a3833; }
.tz-author .tz-arrow-link { margin-top: 4px !important; }

/* ---------- Shop the story ---------- */
.tz-story-products { padding: var(--wp--preset--spacing--90) var(--wp--style--root--padding-left, 48px); border-top: 1px solid var(--tz-line); }
.tz-story-products__inner { max-width: 1320px; margin: 0 auto; }
.tz-story-products .tz-heading > div > * { margin: 0; }
.tz-story-products .tz-eyebrow { margin-bottom: 16px; color: var(--accent); }
.tz-story-products__grid { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }

/* ---------- Responsive ---------- */
@media (max-width: 1280px) {
	.tz-article__content .alignwide, .tz-article__content .alignfull { margin-inline: -80px; }
}
@media (max-width: 1099px) {
	.tz-article__body { grid-template-columns: minmax(0, 680px); gap: 0; padding-top: 32px; }
	.tz-article__body::after { content: none; }
	.tz-arail { position: static; margin-bottom: 32px !important; }
	.tz-arail__inner { gap: 0; }
	.tz-toc { border-top: 1px solid var(--tz-line); border-bottom: 1px solid var(--tz-line); }
	.tz-toc__label { min-height: 52px; margin: 0; color: var(--tz-ink); }
	.tz-toc__list { border-bottom: 0; padding-bottom: 8px; }
	.tz-share--rail { display: none; }
	.tz-share--end { display: block; }
	.tz-article__content .alignwide, .tz-article__content .alignfull { margin-inline: calc(var(--tz-gutter) * -1); }
	.tz-story-products__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
	.tz-toc__label svg { display: none; }
}
@media (max-width: 640px) {
	.tz-ahead { padding: 36px 0 28px; align-items: flex-start; text-align: left; gap: 16px; }
	.tz-ahead__eyebrow { justify-content: flex-start; font-size: 11px; }
	.tz-ahead__title { font-size: 40px; line-height: 44px; }
	.tz-ahead__standfirst { font-size: 18px; line-height: 28px; }
	.tz-ahead__byline { padding-top: 0; }
	.tz-ahead__byline p { font-size: 13px; line-height: 19px; }
	.tz-avatar { width: 40px; height: 40px; font-size: 16px; }
	.tz-article__media { padding: 0; }
	.tz-article__media .tz-media { aspect-ratio: 4 / 3 !important; }
	.tz-article__content { font-size: 17px; line-height: 29px; }
	.tz-article__content h2 { font-size: 30px; line-height: 36px; margin-top: 40px; }
	.tz-article__content > p:first-child::first-letter { font-size: 64px; line-height: 50px; margin: 5px 10px 0 0; }
	.tz-article__content blockquote, .tz-article__content .wp-block-pullquote { margin: 40px 0; }
	.tz-article__content blockquote p { font-size: 27px; line-height: 35px; }
	.tz-inprod { grid-template-columns: 96px 1fr; gap: 16px; padding: 14px; }
	.tz-inprod__img { width: 96px; height: 120px; }
	.tz-inprod__name { font-size: 19px; line-height: 23px; }
	.tz-author { grid-template-columns: 64px 1fr; gap: 16px; padding: 20px; }
	.tz-author__photo { width: 64px; height: 64px; }
	.tz-author__name { font-size: 22px; line-height: 26px; }
	.tz-story-products__grid { gap: 28px 12px !important; }
}
@media (prefers-reduced-motion: reduce) {
	.tz-toc__label svg, .tz-toc__list a, .tz-share__btn { transition: none; }
}