/* Base ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
img, video, iframe { max-width: 100%; display: block; }
a { color: inherit; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
a:hover { text-decoration-color: var(--color-text-muted); }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
h1, h2, h3 { line-height: var(--leading-tight); margin: 0; font-weight: 500; }
p { margin: 0 0 var(--space-4); }

.skip-link { position: absolute; left: -9999px; }
.skip-link:focus { left: var(--space-4); top: var(--space-4); background: var(--color-bg); padding: var(--space-2); }

.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--space-6); }
.section { padding-block: var(--space-12); }
.section__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-6); }
.section__title {
  font-size: var(--text-xs); font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--color-text-muted); margin-bottom: var(--space-6);
}
.section__head .section__title { margin-bottom: 0; }
.more { font-size: var(--text-sm); color: var(--color-text-muted); text-decoration: none; }
.more:hover { color: var(--color-text); }
.muted, .meta { color: var(--color-text-muted); }
.meta { font-size: var(--text-sm); margin-bottom: var(--space-2); }
.empty { color: var(--color-text-muted); font-style: italic; }

/* Header / footer ------------------------------------------------------- */
.site-header { border-bottom: var(--border-width) solid var(--color-border); }
.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding-block: var(--space-6); flex-wrap: wrap; }
.wordmark { font-family: var(--font-serif); font-size: var(--text-xl); text-decoration: none; }
.site-nav { display: flex; gap: var(--space-6); flex-wrap: wrap; align-items: center; font-size: var(--text-sm); }
.site-nav a { text-decoration: none; color: var(--color-text-muted); transition: color var(--duration) var(--ease); }
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--color-text); }
.site-nav a[aria-current="page"] { text-decoration: underline; }
.site-main { flex: 1; }
.site-footer { border-top: var(--border-width) solid var(--color-border); font-size: var(--text-sm); color: var(--color-text-muted); }
.site-footer__inner { display: flex; justify-content: space-between; gap: var(--space-4); padding-block: var(--space-8); flex-wrap: wrap; }
.site-footer__links { display: flex; gap: var(--space-4); }

/* Type ------------------------------------------------------------------ */
.display { font-family: var(--font-serif); font-weight: 400; font-size: var(--text-display); letter-spacing: -0.02em; }
.display--sm { font-size: clamp(2.25rem, 6vw, 3.5rem); margin-bottom: var(--space-8); }
.display--article { font-size: clamp(2.25rem, 5vw, 3.25rem); margin-bottom: var(--space-4); }
.lede { font-size: var(--text-lg); color: var(--color-text-muted); max-width: var(--measure); }

/* Hero with abstract shapes -------------------------------------------- */
.hero { position: relative; padding-block: var(--space-24) var(--space-12); overflow: hidden; }
.hero .display { position: relative; }
.hero__shapes { position: absolute; inset: 0; pointer-events: none; }
.shape { position: absolute; display: block; }
.shape--circle { width: min(38vw, 22rem); aspect-ratio: 1; border-radius: 50%; background: var(--color-highlight); right: 4%; top: 18%; opacity: 0.7; }
.shape--line { width: min(50vw, 30rem); height: var(--border-width); background: var(--color-text); right: 0; top: 62%; transform: rotate(-18deg); transform-origin: right; }
.shape--dot { width: 0.75rem; aspect-ratio: 1; border-radius: 50%; background: var(--color-text); right: 30%; top: 22%; }

/* Headlines ------------------------------------------------------------- */
.headlines { list-style: none; padding: 0; margin: 0; max-width: var(--measure); }
.headline { display: grid; grid-template-columns: 4.5rem 1fr; gap: var(--space-4); padding-block: var(--space-3); border-bottom: var(--border-width) solid var(--color-border); font-size: var(--text-lg); }
.headline time { font-size: var(--text-sm); color: var(--color-text-muted); padding-top: 0.2em; }

/* Books ----------------------------------------------------------------- */
.books { display: grid; grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); gap: var(--space-8); }
.book { display: flex; gap: var(--space-4); align-items: flex-start; }
.book__cover { width: 4rem; aspect-ratio: 2 / 3; object-fit: cover; border-radius: var(--radius-sm); }
.book__info { flex: 1; min-width: 0; }
.book__title { font-weight: 500; margin-bottom: var(--space-2); }
.book__note { font-family: var(--font-serif); font-style: italic; font-size: var(--text-lg); margin: var(--space-2) 0 0; }
.progress { height: 4px; background: var(--color-highlight); border-radius: var(--radius-pill); overflow: hidden; margin-bottom: var(--space-2); }
.progress__bar { display: block; height: 100%; background: var(--color-accent); transition: width 600ms var(--ease); }
.finished { margin-top: var(--space-6); }

/* Gallery --------------------------------------------------------------- */
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: var(--space-4); }
.gallery__item { margin: 0; }
.gallery__item img, .gallery__item video, .gallery__item iframe { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius-sm); background: var(--color-surface); border: 0; }
.gallery__item--video iframe, .gallery__item--video video { aspect-ratio: 16 / 9; }
.gallery__item figcaption { font-size: var(--text-sm); color: var(--color-text-muted); margin-top: var(--space-2); }

/* Cards ----------------------------------------------------------------- */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); gap: var(--space-6); }
.grid--2 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 26rem), 1fr)); }
.card { border: var(--border-width) solid var(--color-border); border-radius: var(--radius-md); background: var(--color-bg); overflow: hidden; transition: border-color var(--duration) var(--ease), transform var(--duration) var(--ease); }
.card:hover { border-color: var(--color-text); }
.card__link { display: flex; flex-direction: column; height: 100%; text-decoration: none; }
.card__body { padding: var(--space-6); display: flex; flex-direction: column; flex: 1; min-height: 0; }
.card__title { font-family: var(--font-serif); font-weight: 400; font-size: var(--text-xl); margin-bottom: var(--space-3); }
.card__text { color: var(--color-text-muted); margin: 0; }
.post-card__cover { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.tags { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-4) 0 0; }
.tag { font-size: var(--text-xs); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-pill); padding: 0.15em 0.7em; text-decoration: none; color: var(--color-text-muted); }

/* Tea with AI: equal-size cards, overflow ends in an ellipsis */
.tea-card { height: var(--card-height); }
.tea-card__question { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; flex-shrink: 0; }
.tea-card__answer {
  color: var(--color-text-muted);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 6; line-clamp: 6;
  overflow: hidden; text-overflow: ellipsis;
}

/* Filters --------------------------------------------------------------- */
.filters { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-bottom: var(--space-8); }
.filters input, .filters select { flex: 1 1 10rem; }
input, select, textarea {
  font: inherit; color: inherit; background: var(--color-bg);
  border: var(--border-width) solid var(--color-border); border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3); min-height: 2.5rem; max-width: 100%;
}
input:focus, select:focus, textarea:focus { border-color: var(--color-text); outline: none; }
.button {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  font: inherit; font-size: var(--text-sm); font-weight: 500; cursor: pointer; text-decoration: none;
  background: var(--color-accent); color: var(--color-accent-contrast);
  border: var(--border-width) solid var(--color-accent); border-radius: var(--radius-pill);
  padding: var(--space-2) var(--space-6); min-height: 2.5rem;
}
.button--ghost { background: transparent; color: var(--color-text); border-color: var(--color-border); }
.button--danger { background: var(--color-danger); border-color: var(--color-danger); }

.pagination { display: flex; justify-content: space-between; align-items: center; margin-top: var(--space-12); }

/* Article --------------------------------------------------------------- */
.article { max-width: calc(var(--measure) + 2 * var(--space-6)); padding-block: var(--space-16); }
.article__header { margin-bottom: var(--space-8); }
.article__cover { width: 100%; border-radius: var(--radius-md); margin-bottom: var(--space-8); }
.article__footer { margin-top: var(--space-16); padding-top: var(--space-6); border-top: var(--border-width) solid var(--color-border); }
.notice { background: var(--color-highlight); padding: var(--space-2) var(--space-4); border-radius: var(--radius-sm); font-size: var(--text-sm); }

.prose { font-size: var(--text-lg); line-height: var(--leading-prose); max-width: var(--measure); overflow-wrap: break-word; }
.prose h2, .prose h3 { font-family: var(--font-serif); font-weight: 400; margin: var(--space-12) 0 var(--space-4); }
.prose h2 { font-size: var(--text-2xl); }
.prose h3 { font-size: var(--text-xl); }
.prose p, .prose ul, .prose ol { margin: 0 0 var(--space-6); }
.prose img, .prose video { border-radius: var(--radius-sm); margin: var(--space-8) 0; height: auto; }
.prose blockquote { margin: var(--space-8) 0; padding-left: var(--space-6); border-left: 2px solid var(--color-text); font-family: var(--font-serif); font-size: var(--text-xl); font-style: italic; }
.prose code { font-family: var(--font-mono); font-size: 0.9em; background: var(--color-surface); padding: 0.1em 0.3em; border-radius: var(--radius-sm); }
.prose pre { background: var(--color-surface); padding: var(--space-4); border-radius: var(--radius-sm); overflow-x: auto; font-size: var(--text-sm); }
.prose pre code { background: none; padding: 0; }
.prose hr { border: 0; border-top: var(--border-width) solid var(--color-border); margin: var(--space-12) 0; }
.prose table { border-collapse: collapse; width: 100%; font-size: var(--text-base); display: block; overflow-x: auto; }
.prose th, .prose td { border-bottom: var(--border-width) solid var(--color-border); padding: var(--space-2); text-align: left; }

/* About ----------------------------------------------------------------- */
.about__photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: var(--space-4); margin-bottom: var(--space-12); }
.about__photos figure { margin: 0; }
.about__photos img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--radius-sm); }
.about__photos figcaption { font-size: var(--text-sm); color: var(--color-text-muted); margin-top: var(--space-2); }
.contact { display: grid; gap: var(--space-3); margin: var(--space-12) 0 0; max-width: var(--measure); }
.contact div { display: grid; grid-template-columns: 7rem 1fr; border-bottom: var(--border-width) solid var(--color-border); padding-bottom: var(--space-3); }
.contact dt { color: var(--color-text-muted); font-size: var(--text-sm); }
.contact dd { margin: 0; overflow-wrap: anywhere; }

@media (max-width: 40rem) {
  .container { padding: 0 var(--space-4); }
  .hero { padding-block: var(--space-16) var(--space-8); }
  .headline { grid-template-columns: 3.5rem 1fr; font-size: var(--text-base); }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}