/* 料理紀錄 page */
.page-head { padding: 56px 0 28px; }
.page-head h1 { font-size: clamp(32px, 6vw, 46px); line-height: 1.2; margin: 0 0 14px; font-weight: 700; }
.page-head .lede { color: var(--ink-soft); margin: 0; max-width: 46ch; text-wrap: pretty; }

.years { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 26px 0 0; padding: 0; }
.years a {
  display: inline-block; padding: 3px 14px; border: 1px solid var(--border-strong); border-radius: 999px;
  font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 13px; color: var(--ink-soft); text-decoration: none;
}
.years a:hover { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); }

.year { scroll-margin-top: 70px; margin-top: 56px; }
.year > h2 {
  display: flex; align-items: baseline; gap: 14px;
  font-size: 34px; line-height: 1.2; margin: 0 0 6px; font-weight: 700;
  border-bottom: 1px solid var(--border-strong); padding-bottom: 10px;
}
.year > h2 small { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 12.5px; font-weight: 400; color: var(--muted); letter-spacing: 0.04em; }

/* entry: text left, photos right (phones: photos on top) */
.entry {
  scroll-margin-top: 70px; padding: 32px 0 38px; border-bottom: 1px solid var(--border);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: 0 48px; align-items: start;
}
.entry:last-child { border-bottom: 0; }
.entry.no-media, .entry.no-text { grid-template-columns: minmax(0, 1fr); }
.entry .meta { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 0 0 6px; }
.entry time { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 13px; color: var(--muted); letter-spacing: 0.04em; }
.entry h3 { font-size: 22px; line-height: 1.4; margin: 0 0 12px; font-weight: 600; text-wrap: balance; }
.entry h3 a { color: inherit; text-decoration: none; }
.entry h3 a:hover::after { content: " #"; color: var(--muted); font-weight: 400; }
.body { overflow-wrap: anywhere; }
.body p, .body li { text-align: justify; text-justify: inter-character; }
.body a { word-break: break-all; }   /* long URLs fill the line instead of stretching the one before */
.body p { margin: 0 0 12px; }
.body ul { margin: 0 0 12px; padding-left: 1.25em; }
.body li { margin: 0 0 7px; padding-left: 2px; }
.body li::marker { color: var(--accent); }
.body strong { color: var(--accent); font-weight: 700; }

.media { position: sticky; top: 76px; min-width: 0; }
.entry.no-text .media { position: static; max-width: 560px; margin-top: 6px; }

/* carousel */
.carousel { position: relative; }
.track {
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  border-radius: 10px; border: 1px solid var(--border); background: var(--surface); overscroll-behavior-x: contain;
}
.track::-webkit-scrollbar { display: none; }
.slide { flex: 0 0 100%; scroll-snap-align: start; scroll-snap-stop: always; display: block; aspect-ratio: 4 / 3; cursor: zoom-in; overflow: hidden; }
.slide img { display: block; width: 100%; height: 100%; }
.slide.cover img { object-fit: cover; }
.slide.contain img { object-fit: contain; }
.cb {
  position: absolute; top: calc(50% - 18px); width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.35); background: rgba(20, 24, 15, 0.55); color: #fff;
  font-size: 20px; line-height: 1; cursor: pointer; display: grid; place-items: center; padding: 0 0 2px;
  transition: opacity .2s ease, background .2s ease;
}
.cb:hover { background: rgba(20, 24, 15, 0.8); }
.cb:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.cb[disabled] { opacity: 0; pointer-events: none; }
.cb.prev { left: 8px; }
.cb.next { right: 8px; }
.dots { display: flex; justify-content: center; flex-wrap: wrap; gap: 2px; margin-top: 8px; }
.dots button {
  width: 22px; height: 22px; padding: 0; border: 0; background: transparent; cursor: pointer; display: grid; place-items: center;
}
.dots button::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--border-strong); transition: background .2s ease, transform .2s ease; }
.dots button[aria-current="true"]::before { background: var(--accent); transform: scale(1.25); }
.dots button:focus-visible { outline: 2px solid var(--accent); border-radius: 4px; }

@media (max-width: 820px) {
  .entry { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .media { position: static; order: -1; margin-bottom: 18px; max-width: 560px; }
  .entry.no-text .media { order: 0; margin: 4px 0 0; }
}
@media (max-width: 640px) {
  .media { max-width: none; }
  .year, .entry { scroll-margin-top: 104px; }
  .page-head { padding-top: 36px; }
  .year > h2 { font-size: 28px; }
  .entry h3 { font-size: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .cb, .dots button::before { transition: none; }
}