/* Restrained journal — loaded only on home and review feature pages. */
.journal {
  --jr-paper: #F6F1E6;
  --jr-dot: rgba(60, 50, 40, .10);
  --jr-strip: #FFFDF8;
  --jr-ink: #2A2520;
  --jr-soft: #6A5F51;
  --jr-tape: rgba(226, 212, 176, .92);
  --jr-red: #B3402A;
  --jr-marker: rgba(246, 212, 106, .72);
  --jr-sticky: #F6E59A;
  color: var(--jr-ink);
  background-color: var(--jr-paper);
  background-image: radial-gradient(var(--jr-dot) 1px, transparent 1.2px);
  background-size: 16px 16px;
}
.journal main { overflow: clip; }
.jr-wrap { width: min(1080px, calc(100% - 48px)); margin-inline: auto; }
.jr-hand { font-family: var(--font-hand); font-weight: 400; }
.jr-eyebrow { margin: 0 0 22px; font-size: 19px; color: var(--jr-soft); }
.jr-hero { padding: 76px 0 94px; }
.jr-layout { display: grid; grid-template-columns: 1.12fr .88fr; gap: 90px; align-items: center; }
.jr-copy { min-width: 0; }
.jr-copy h1 { font-size: clamp(40px, 4.6vw, 62px); line-height: 1.25; letter-spacing: -.035em; margin: 0 0 28px; font-weight: 600; text-wrap: balance; }
.jr-copy .lead { font-size: 18px; line-height: 1.9; color: var(--jr-soft); max-width: 34em; }
.jr-marker { color: inherit; background: none; position: relative; box-decoration-break: clone; -webkit-box-decoration-break: clone; box-shadow: inset 0 -.3em var(--jr-marker); }
.jr-copy .actions { margin-top: 28px; gap: 16px; }
.jr-meta { color: var(--jr-soft); font-size: 13px; margin: 20px 0 0; }
.jr-link { color: var(--jr-ink); text-underline-offset: 5px; }
.jr-step-nav { display: flex; flex-wrap: wrap; gap: 24px; padding: 24px 0; border-block: 1px solid var(--line); font-size: 14px; }
.jr-step-nav a { color: var(--jr-soft); text-decoration: none; }
.jr-step-nav a:hover { color: var(--jr-ink); text-decoration: underline; }
.jr-section { padding-block: 100px; border-bottom: 1px solid var(--line); scroll-margin-top: 30px; }
.jr-section.jr-reverse { grid-template-columns: .88fr 1.12fr; }
.jr-reverse .jr-copy { order: 2; }
.jr-number { font-size: 12px; letter-spacing: .14em; color: var(--jr-soft); display: block; margin-bottom: 20px; }
.jr-copy h2, .jr-heading { font-size: clamp(30px, 3.5vw, 44px); line-height: 1.38; letter-spacing: -.025em; font-weight: 600; margin: 0 0 22px; text-wrap: balance; }
.jr-copy p { font-size: 17px; line-height: 1.85; }
.jr-copy .jr-boundary { font-size: 13px; line-height: 1.85; color: var(--jr-soft); border-left: 2px solid #c9bfae; padding-left: 14px; margin: 24px 0; }
.jr-visual { position: relative; padding: 18px; min-width: 0; }
.jr-photo { --tilt: 1.8deg; position: relative; isolation: isolate; width: min(100%, 292px); margin: 0 auto; background: var(--jr-strip); padding: 10px 10px 34px; transform: rotate(var(--tilt)); box-shadow: 0 2px 3px #3c2d191a, 0 12px 30px #3c2d1912; }
.jr-photo::before { content: ""; position: absolute; z-index: -1; inset: 5px -7px -6px 4px; background: #e9e1d1; border: 1px solid #d9cfbb; transform: rotate(-3deg); }
.jr-reverse .jr-photo, .jr-hero .jr-photo { --tilt: -1.8deg; }
.jr-photo img { display: block; width: 100%; height: auto; background: var(--jr-paper); }
.jr-photo figcaption { font-size: 12px; line-height: 1.6; text-align: center; margin: 16px 0 -18px; color: var(--jr-soft); }
.jr-tape { position: absolute; width: 86px; height: 25px; top: -12px; left: calc(50% - 43px); z-index: 2; background: var(--jr-tape); transform: rotate(-3deg); clip-path: polygon(0 0, 98% 4%, 96% 20%, 100% 35%, 96% 55%, 100% 75%, 98% 100%, 0 96%, 3% 78%, 0 60%, 3% 40%, 0 20%); }
.jr-stamp { position: absolute; right: -5px; top: 40px; color: var(--jr-red); border: 2px solid currentColor; outline: 1px solid currentColor; outline-offset: -6px; transform: rotate(8deg); padding: 9px 14px; font: 600 15px/1.4 var(--font-serif); background: var(--jr-paper); text-align: center; }
.jr-stamp small { display: block; font-size: 10px; letter-spacing: .12em; }
.jr-sources { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 26px; }
.jr-strip { background: var(--jr-strip); padding: 8px 12px; border: 1px solid #e4dbca; font-size: 13px; box-shadow: 0 2px 2px #3c2d1910; transform: rotate(-2deg); }
.jr-strip:nth-child(2) { transform: rotate(1.5deg); }
.jr-strip:nth-child(3) { transform: rotate(-.6deg); }
.jr-arrow { width: 55px; height: 30px; fill: none; stroke: var(--jr-soft); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.jr-app-icon { display: inline-block; width: 34px; height: 34px; border-radius: 8px; background: var(--jr-ink); color: var(--jr-strip); font: 22px/34px Georgia, serif; text-align: center; }
.jr-annotation { display: flex; align-items: center; gap: 16px; margin-top: 28px; font-size: 21px; color: var(--jr-soft); }
.jr-thread { color: var(--jr-red); }
.jr-thread::before { content: ""; display: block; width: 78px; height: 15px; border-bottom: 1.5px solid currentColor; border-radius: 50%; transform: rotate(-8deg); }
.jr-sticky { background: var(--jr-sticky); padding: 20px 24px; max-width: 280px; margin-top: 32px; transform: rotate(-2deg); font: 19px/1.65 var(--font-hand); box-shadow: 1px 3px 0 #3c2d1912; }
.jr-mac { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1.4fr; align-items: center; gap: 44px; margin-top: 12px; }
.jr-mac .jr-photo { width: 100%; max-width: 520px; --tilt: -1.5deg; }
.jr-mac p { color: var(--jr-soft); font-size: 15px; }
.jr-mac h3 { font-size: 26px; font-weight: 500; }
.jr-checklist { padding-block: 76px; }
.jr-checklist ol { list-style: none; padding: 0; margin: 32px 0 0; counter-reset: boundary; display: grid; grid-template-columns: repeat(3, 1fr); gap: 38px; }
.jr-checklist li { counter-increment: boundary; position: relative; padding-top: 56px; }
.jr-checklist li::before { content: counter(boundary, decimal-leading-zero); position: absolute; top: 0; display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--jr-soft); border-radius: 46% 53% 45% 56%; font-size: 12px; transform: rotate(-7deg); }
.jr-checklist h3 { font-size: 20px; margin: 0 0 12px; }
.jr-checklist p { font-size: 14px; color: var(--jr-soft); }
.journal .from-blog { padding-block: 65px; border-top: 1px solid var(--line); }
.journal .from-blog .section-head { display: block; }
.journal .from-blog h2 { font: 600 32px/1.4 var(--font-serif); margin-top: 12px; }
.journal .from-blog .card { background: var(--jr-strip); border: 0; border-bottom: 1px solid #d8cfbd; border-radius: 1px; box-shadow: 0 3px 8px #3c2d1908; padding: 24px; }
.journal .from-blog .card a { display: block; }
.journal .from-blog .card h3 { margin: 0; font-weight: 500; }
.jr-cta { padding: 80px 24px 100px; text-align: center; border-top: 1px solid var(--line); }
.jr-cta h2 { font-size: clamp(30px, 4vw, 44px); margin: 0 0 24px; font-weight: 500; }
.jr-cta .jr-hand { font-size: 22px; margin-top: 26px; color: var(--jr-soft); }
.journal .review-page { max-width: 1080px; }
.journal .review-hero { padding-block: 36px 72px; }
.journal .review-page .section { padding-block: 65px; }
.journal .review-page .jr-layout { gap: 64px; }
.journal .review-page .jr-photo { width: min(100%, 260px); }
.journal .review-page .jr-copy h2 { font-size: 32px; }
.journal .review-page .review-hero h1 { font-size: clamp(38px, 5vw, 60px); font-weight: 600; }
@media (max-width: 900px) {
  .jr-layout, .jr-section.jr-reverse { gap: 44px; }
  .jr-photo { max-width: 250px; }
  .jr-hero { padding-top: 56px; }
  .jr-stamp { right: -8px; font-size: 12px; padding: 8px 12px; }
  .jr-checklist ol { gap: 22px; }
}
@media (max-width: 700px) {
  .jr-layout, .jr-section.jr-reverse, .jr-mac { grid-template-columns: 1fr; gap: 30px; }
  .jr-reverse .jr-copy { order: 0; }
  .jr-wrap { width: calc(100% - 48px); }
  .jr-hero { padding: 44px 0 58px; }
  .jr-copy h1 { font-size: 39px; }
  .jr-copy .lead { font-size: 16px; line-height: 1.85; }
  .jr-photo { --tilt: .9deg; max-width: 250px; }
  .jr-reverse .jr-photo, .jr-hero .jr-photo, .jr-mac .jr-photo { --tilt: -.9deg; }
  .jr-stamp { right: 0; top: 45px; }
  .jr-section { padding-block: 58px; }
  .jr-copy h2 { font-size: 31px; }
  .jr-copy p { font-size: 16px; }
  .jr-checklist ol { grid-template-columns: 1fr; gap: 26px; }
  .jr-checklist li { padding-top: 0; padding-left: 52px; }
  .jr-checklist li::before { left: 0; }
  .jr-checklist { padding-block: 58px; }
  .jr-step-nav { gap: 18px; font-size: 13px; }
  .jr-mac { gap: 12px; margin-top: 20px; }
  .journal .review-page .jr-layout { gap: 28px; }
}
@media (prefers-reduced-motion: reduce) {
  .journal *, .journal *::before, .journal *::after { animation: none !important; transition: none !important; }
}

/* Keep CJK headings from leaving a lone syllable on the next line. */
.journal:lang(ja) .jr-copy h1 { font-size: clamp(34px, 3.6vw, 46px); }
.journal:lang(ja) .jr-copy h1 .jr-marker { white-space: nowrap; }
.journal:lang(ko) .jr-copy h1 { font-size: clamp(34px, 3.6vw, 46px); word-break: keep-all; }