/* ==========================================================================
   ABOUT — JOURNEY JOURNAL TIMELINE (option 1)
   ========================================================================== */

/* Layout: a travel journal pinned to a board. Torn-paper notes alternate left/right, polaroids
   with red tape hang off them, a red thread runs pin to pin and draws itself as you scroll,
   years are hand-circled in red ink, and each opened chapter slams down passport stamps. */
.journal {
  --board: #F1EFEA;
  --paper: #FBF6EA;
  --paper-edge: #E9E0CC;
  --ink: #1F1E1F;
  --ink-soft: #4B4846;
  --ink-mute: #8B8682;
  --red: #EB3237;
  --red-deep: #A60005;
  --green: #AACF47;
  --green-deep: #7EA02B;
  --font-display: 'Rubik', 'Segoe UI', sans-serif;
  --font-body: 'Nunito', 'Segoe UI', sans-serif;
  --font-hand: 'Caveat', 'Segoe Print', cursive;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --torn-a: polygon(0.0% 0.6%, 3.8% 1.9%, 7.7% 1.7%, 11.5% 0.6%, 15.4% 1.1%, 19.2% 1.0%, 23.1% 1.4%, 26.9% 1.7%, 30.8% 0.2%, 34.6% 0.1%, 38.5% 1.8%, 42.3% 1.0%, 46.2% 1.7%, 50.0% 0.0%, 53.8% 1.0%, 57.7% 1.6%, 61.5% 0.5%, 65.4% 2.1%, 69.2% 2.0%, 73.1% 0.1%, 76.9% 0.1%, 80.8% 1.2%, 84.6% 2.1%, 88.5% 0.8%, 92.3% 0.5%, 96.2% 0.9%, 100.0% 0.5%, 99.9% 50.0%, 100.0% 99.0%, 96.2% 98.9%, 92.3% 99.5%, 88.5% 99.5%, 84.6% 99.5%, 80.8% 99.0%, 76.9% 99.4%, 73.1% 100.0%, 69.2% 98.2%, 65.4% 98.8%, 61.5% 98.6%, 57.7% 99.6%, 53.8% 97.8%, 50.0% 98.1%, 46.2% 99.7%, 42.3% 99.3%, 38.5% 98.4%, 34.6% 98.4%, 30.8% 97.9%, 26.9% 99.1%, 23.1% 98.2%, 19.2% 98.5%, 15.4% 99.3%, 11.5% 98.7%, 7.7% 98.1%, 3.8% 98.1%, 0.0% 98.9%, 0.4% 50.0%);
  --torn-b: polygon(0.0% 1.5%, 3.8% 2.1%, 7.7% 0.1%, 11.5% 0.2%, 15.4% 1.8%, 19.2% 1.6%, 23.1% 1.5%, 26.9% 0.7%, 30.8% 1.3%, 34.6% 1.3%, 38.5% 1.3%, 42.3% 0.3%, 46.2% 0.9%, 50.0% 0.9%, 53.8% 1.6%, 57.7% 2.2%, 61.5% 2.1%, 65.4% 1.2%, 69.2% 1.0%, 73.1% 0.6%, 76.9% 0.1%, 80.8% 0.1%, 84.6% 1.0%, 88.5% 0.7%, 92.3% 0.8%, 96.2% 2.0%, 100.0% 1.0%, 99.7% 50.0%, 100.0% 99.5%, 96.2% 99.9%, 92.3% 99.3%, 88.5% 99.7%, 84.6% 98.9%, 80.8% 97.8%, 76.9% 98.5%, 73.1% 99.6%, 69.2% 98.0%, 65.4% 98.2%, 61.5% 98.4%, 57.7% 98.0%, 53.8% 98.3%, 50.0% 98.3%, 46.2% 99.2%, 42.3% 97.8%, 38.5% 97.9%, 34.6% 99.6%, 30.8% 98.3%, 26.9% 98.4%, 23.1% 99.0%, 19.2% 98.8%, 15.4% 98.9%, 11.5% 98.0%, 7.7% 98.9%, 3.8% 98.2%, 0.0% 99.2%, 0.5% 50.0%);
}

/* ------------------------------------------------------------- section */
.journal {
  position: relative; overflow: clip; padding-block: var(--section-padding) 120px;
  background:
    radial-gradient(70% 45% at 50% 0%, rgba(235,50,55,0.08), transparent 70%),
    linear-gradient(to right, rgba(31,30,31,0.05) 1px, transparent 1px) 0 0 / 60px 60px,
    linear-gradient(to bottom, rgba(31,30,31,0.05) 1px, transparent 1px) 0 0 / 60px 60px,
    var(--board);
}
.journal .wrap { position: relative; max-width: calc(var(--container-width) + var(--container-padding) * 2); margin: 0 auto; padding-inline: var(--container-padding); }

.head { text-align: center; max-width: 820px; margin: 0 auto 84px; position: relative; }
.head .stamp-title { display: inline-block; transform: rotate(-3deg); padding: 6px 16px; border: 3px solid var(--red); border-radius: 6px; color: var(--red);
  font-family: var(--font-display); font-weight: 800; font-size: 13px; letter-spacing: 0.22em; text-transform: uppercase; opacity: 0.9;
}
.head h2 { margin: 22px 0 12px; font-family: var(--font-display); font-weight: 800; font-size: clamp(32px, 4.6vw, 60px); line-height: 1.04; letter-spacing: -0.025em; text-transform: uppercase; text-wrap: balance; }
.head h2 .hl { position: relative; white-space: nowrap; }
.head h2 .hl::before { content: ""; position: absolute; left: -2%; right: -2%; bottom: 8%; height: 38%; background: var(--green); opacity: 0.55; z-index: -1; transform: skew(-6deg) rotate(-1deg); }
.head p { margin: 0; font-size: 18px; line-height: 1.6; color: var(--ink-soft); }
.head .note { position: absolute; right: -40px; top: -18px; font-family: var(--font-hand); font-size: 26px; color: var(--red); transform: rotate(8deg); }
.head .note svg { display: block; margin: 2px auto 0; }

/* ------------------------------------------------------------- board & thread */
.board { position: relative; }
.thread { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 2; }
.thread path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.thread .shadow { stroke: rgba(0,0,0,0.18); stroke-width: 4; transform: translate(2px, 4px); }
.thread .string { stroke: var(--red); stroke-width: 2.5; }

.entries { list-style: none; margin: 0; padding: 0; display: grid; gap: 64px; }

.entry { position: relative; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: start; column-gap: 24px; opacity: 0; transform: translateY(40px); transition: opacity 0.7s ease, transform 0.9s var(--ease); }
.entry.in-view { opacity: 1; transform: none; }

/* pin */
.pin { position: absolute; z-index: 6; width: 22px; height: 22px; border-radius: 50%; border: 0; padding: 0; cursor: pointer;
  background: radial-gradient(circle at 35% 30%, #ff8b8e, var(--red) 45%, var(--red-deep) 100%);
  box-shadow: 0 6px 10px rgba(0,0,0,0.35), inset 0 -3px 4px rgba(0,0,0,0.2); transition: transform 0.35s var(--ease); }
.pin::after { content: ""; position: absolute; inset: -14px; }
.pin:hover, .pin:focus-visible { transform: scale(1.2); outline: none; }
.entry.is-open .pin { box-shadow: 0 6px 10px rgba(0,0,0,0.35), inset 0 -3px 4px rgba(0,0,0,0.2), 0 0 0 6px rgba(235,50,55,0.18); }

/* torn paper note */
.note { position: relative; z-index: 4; filter: drop-shadow(0 12px 18px rgba(31,30,31,0.16)) drop-shadow(0 2px 3px rgba(31,30,31,0.12)); transition: filter 0.4s ease, transform 0.6s var(--ease); }
.entry:nth-child(odd) .note { grid-column: 1; grid-row: 1; transform: rotate(-0.6deg); }
.entry:nth-child(even) { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.entry:nth-child(even) .note { grid-column: 2; grid-row: 1; transform: rotate(0.6deg); }
.entry.is-open .note, .note:hover { filter: drop-shadow(0 22px 28px rgba(31,30,31,0.22)) drop-shadow(0 2px 3px rgba(31,30,31,0.12)); transform: rotate(0deg) translateY(-3px); }
.paper { position: relative; padding: 34px 38px 30px; background:
    repeating-linear-gradient(0deg, transparent 0 27px, rgba(31,30,31,0.05) 27px 28px),
    linear-gradient(135deg, #FFFCF3, var(--paper) 55%, #F3EBD6);
  clip-path: var(--torn-a); }
.entry:nth-child(even) .paper { clip-path: var(--torn-b); }

.note-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.year { position: relative; display: inline-block; font-family: var(--font-display); font-weight: 800; font-size: 42px; line-height: 1; letter-spacing: -0.03em; color: var(--red); padding: 8px 14px; }
.year small { font-size: 0.5em; font-weight: 700; color: var(--red-deep); }
.year svg { position: absolute; inset: -10px -14px; width: calc(100% + 28px); height: calc(100% + 20px); overflow: visible; pointer-events: none; }
.year svg path { fill: none; stroke: var(--red); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 600; stroke-dashoffset: 600; opacity: 0.85; }
.entry.in-view .year svg path { animation: draw 1.1s var(--ease) 0.35s forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.chapter-no { font-family: var(--font-hand); font-size: 22px; color: var(--ink-mute); transform: rotate(-4deg); white-space: nowrap; margin-top: 4px; }

.note h3 { color: var(--ink); margin: 12px 0 8px; font-family: var(--font-display); font-weight: 700; font-size: clamp(24px, 2.4vw, 32px); line-height: 1.12; letter-spacing: -0.01em; }
.journal .lead { margin: 0; font-size: 17px; line-height: 28px; font-weight: 500; color: var(--ink-soft); }
.hl-marker { background: linear-gradient(transparent 45%, rgba(170,207,71,0.55) 45%, rgba(170,207,71,0.55) 90%, transparent 90%); padding: 0 2px; }

.more { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.55s var(--ease); }
.more > div { overflow: hidden; min-height: 0; }
.more-inner { opacity: 0; transform: translateY(6px); transition: opacity 0.4s ease 0.1s, transform 0.5s var(--ease) 0.1s; }
.entry.is-open .more { grid-template-rows: 1fr; }
.entry.is-open .more-inner { opacity: 1; transform: none; }
.more p { margin: 10px 0 0; font-size: 16px; line-height: 28px; color: var(--ink-soft); }

/* passport stamps */
.stamps { display: flex; flex-wrap: wrap; gap: 12px 14px; margin: 18px 0 4px; }
.stamp { position: relative; padding: 7px 12px 6px; border: 2.5px solid currentColor; border-radius: 8px; color: var(--red-deep);
  font-family: var(--font-display); font-weight: 800; font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase; line-height: 1.25; text-align: center;
  transform: rotate(var(--r, -4deg)) scale(1.6); opacity: 0;
  background: repeating-linear-gradient(115deg, transparent 0 6px, rgba(255,255,255,0.35) 6px 7px); }
.stamp::after { content: ""; position: absolute; inset: 3px; border: 1px solid currentColor; border-radius: 5px; opacity: 0.5; }
.stamp small { display: block; font-size: 9px; letter-spacing: 0.2em; opacity: 0.8; }
.stamp.green { color: var(--green-deep); }
.entry.is-open .stamp { animation: slam 0.45s cubic-bezier(0.2, 0.9, 0.3, 1.3) forwards; }
.entry.is-open .stamp:nth-child(1) { animation-delay: 0.25s; } .entry.is-open .stamp:nth-child(2) { animation-delay: 0.4s; }
.entry.is-open .stamp:nth-child(3) { animation-delay: 0.55s; } .entry.is-open .stamp:nth-child(4) { animation-delay: 0.7s; }
@keyframes slam { to { transform: rotate(var(--r, -4deg)) scale(1); opacity: 0.9; } }

.toggle { margin-top: 16px; display: inline-flex; align-items: center; gap: 10px; background: none; border: 0; padding: 0; cursor: pointer;
  font-family: var(--font-hand); font-weight: 700; font-size: 24px; color: var(--red); }
.toggle .ic { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--red); color: #fff; transition: transform 0.45s var(--ease); }
.entry.is-open .toggle .ic { transform: rotate(45deg); }
.toggle:hover { color: var(--red-deep); }
.toggle:focus-visible { outline: 2px solid var(--green-deep); outline-offset: 4px; border-radius: 4px; }
.toggle .t-open, .entry.is-open .toggle .t-closed { display: none; }
.entry.is-open .toggle .t-open { display: inline; }

/* polaroid */
.polaroid { position: relative; z-index: 1; margin: 0; width: min(340px, 100%); padding: 12px 12px 42px; background: #fff;
  box-shadow: 0 16px 30px rgba(31,30,31,0.2), 0 2px 4px rgba(31,30,31,0.15); transition: transform 0.6s var(--ease), box-shadow 0.4s ease; }
.entry:nth-child(odd) .polaroid { grid-column: 2; grid-row: 1; justify-self: start; margin-left: -30px; margin-top: 64px; transform: rotate(4deg); }
.entry:nth-child(even) .polaroid { grid-column: 1; grid-row: 1; justify-self: end; margin-right: -30px; margin-top: 64px; transform: rotate(-4deg); }
.entry.is-open .polaroid, .polaroid:hover { transform: rotate(0deg) scale(1.03); box-shadow: 0 26px 40px rgba(31,30,31,0.25), 0 2px 4px rgba(31,30,31,0.15); }
.polaroid picture { display: block; width: 100%; }
.polaroid img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; filter: sepia(0.18) contrast(1.02); }
.polaroid figcaption { position: absolute; left: 12px; right: 12px; bottom: 10px; font-family: var(--font-hand); font-size: 22px; line-height: 1; color: var(--ink-soft); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tape { position: absolute; top: -12px; left: 50%; width: 110px; height: 26px; transform: translateX(-50%) rotate(-3deg);
  background: rgba(235,50,55,0.82); box-shadow: 0 2px 4px rgba(0,0,0,0.15); z-index: 2; }
.tape::before, .tape::after { content: ""; position: absolute; top: 0; bottom: 0; width: 6px; background: linear-gradient(to bottom, transparent 0 40%, #fff 40% 60%, transparent 60%); }
.tape::before { left: 0; } .tape::after { right: 0; }
.entry:nth-child(even) .tape { transform: translateX(-50%) rotate(3deg); }

/* ------------------------------------------------------------- index tabs (sticky) */
.tabs { position: sticky; top: calc(var(--header-height) + 24px); float: right; z-index: 8; margin-right: -20px; display: flex; flex-direction: column; gap: 6px; }
.tabs button { display: block; padding: 10px 14px 10px 12px; border: 0; cursor: pointer; text-align: left; min-width: 88px;
  font-family: var(--font-display); font-weight: 700; font-size: 13px; letter-spacing: 0.02em; color: var(--ink-soft);
  background: var(--paper); border-radius: 8px 0 0 8px; box-shadow: -3px 3px 8px rgba(31,30,31,0.12); transform: translateX(10px); transition: transform 0.3s var(--ease), background-color 0.3s, color 0.3s; }
.tabs button:nth-child(2n) { background: #F3EBD6; }
.tabs button:hover { transform: translateX(0); }
.tabs button.is-active { background: var(--red); color: #fff; transform: translateX(-6px); }
.tabs button:focus-visible { outline: 2px solid var(--green-deep); }

/* ------------------------------------------------------------- responsive */
@media (max-width: 991.98px) {
  .journal { padding-block: 64px 80px; }
  .head { margin-bottom: 56px; }
  .head .note { position: static; display: inline-block; margin-top: 16px; }
  .board { padding-left: 34px; }
  .entries { gap: 44px; }
  .entry, .entry:nth-child(even) { grid-template-columns: minmax(0, 1fr); column-gap: 0; }
  .entry:nth-child(odd) .note, .entry:nth-child(even) .note { grid-column: 1; grid-row: 1; transform: none; }
  .entry:nth-child(odd) .polaroid, .entry:nth-child(even) .polaroid { grid-column: 1; grid-row: 2; justify-self: center; margin: 4px auto 0; margin-left: auto; margin-right: auto; width: min(300px, 86%); transform: rotate(-2deg); }
  .entry:nth-child(even) .polaroid { transform: rotate(2deg); }
  .paper { padding: 26px 22px 24px; }
  .year { font-size: 34px; }
  .journal .lead { font-size: 16px; line-height: 26px; }
  .tabs { position: sticky; float: none; top: var(--header-height); margin: 0 -20px 24px; padding: 10px 20px; flex-direction: row; gap: 8px; overflow-x: auto; scrollbar-width: none;
    background: rgba(241,239,234,0.92); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom: 1px solid rgba(31,30,31,0.08); }
  .tabs::-webkit-scrollbar { display: none; }
  .tabs button { min-width: 0; flex: 0 0 auto; border-radius: 8px; transform: none; box-shadow: 0 2px 6px rgba(31,30,31,0.1); white-space: nowrap; }
  .tabs button.is-active { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .entry, .note, .polaroid, .more, .more-inner, .tabs button, .pin { transition: none !important; }
  .entry.in-view .year svg path { animation: none; stroke-dashoffset: 0; }
  .entry.is-open .stamp { animation: none; transform: rotate(var(--r, -4deg)); opacity: 0.9; }
}