/* White Belt — sleek zen. White paper, black ink, light mint accents, light pink touches. */
@import url('https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600&family=Geist+Mono:wght@400;500&family=Instrument+Serif:ital@0;1&display=swap');

:root {
  --paper: #ffffff;
  --paper-2: #f6f6f3;
  --ink: #141414;
  --ink-2: #4a4a46;
  --ink-3: #6b6b6b;
  --hairline: #ebebe6;
  --dot: rgba(20, 20, 20, .07);
  --mint: #dcf3e8;
  --mint-2: #bfe8d4;
  --mint-ink: #1f5c45;
  --mint-line: #3fa47c;
  --pink: #fbe3ea;
  --pink-ink: #8a3553;
  --glass: rgba(255, 255, 255, .72);
  --sans: "Geist", "Inter", system-ui, -apple-system, sans-serif;
  --serif: "Instrument Serif", Georgia, serif;
  --mono: "Geist Mono", ui-monospace, monospace;
  --radius: 16px;
  --wrap: 1080px;
  --ease: cubic-bezier(.2, .7, .2, 1);
}
body.quarto-dark {
  --paper: #0d0d0c;
  --paper-2: #171715;
  --ink: #ecebe6;
  --ink-2: #c3c2bb;
  --ink-3: #a3a29b;
  --hairline: #262624;
  --dot: rgba(236, 235, 230, .06);
  --mint: #15302a;
  --mint-2: #1d4639;
  --mint-ink: #8fdcbc;
  --mint-line: #8fdcbc;
  --pink: #3a2129;
  --pink-ink: #f2b8c8;
  --glass: rgba(13, 13, 12, .72);
}

/* ---- base ------------------------------------------------------------------ */
body {
  font-family: var(--sans); color: var(--ink); font-size: 1rem; line-height: 1.65; letter-spacing: -.005em;
  -webkit-font-smoothing: antialiased;
  background-color: var(--paper);
  background-image: radial-gradient(var(--dot) 1px, transparent 1px);
  background-size: 22px 22px;
}
h1, h2, h3, h4 { font-family: var(--sans); font-weight: 500; color: var(--ink); letter-spacing: -.03em; line-height: 1.12; }
h1 em, h2 em, h3 em { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -.01em; }
main.content h2 { border-bottom: none; }
p { max-width: 66ch; }
::selection { background: var(--pink); color: var(--ink); }
:focus-visible { outline: 2px solid var(--mint-line); outline-offset: 3px; border-radius: 6px; }

main.content a:not([class]) {
  color: var(--ink); text-decoration: underline; text-decoration-color: var(--mint-line);
  text-decoration-thickness: 1px; text-underline-offset: 3px; transition: text-decoration-color .2s;
}
main.content a:not([class]):hover { text-decoration-color: var(--pink-ink); }

.zen-eyebrow {
  display: flex; align-items: center; gap: .55rem; margin: 0 0 1rem;
  font-family: var(--mono); font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3);
}
.zen-eyebrow__kanji { font-family: var(--sans); color: var(--pink-ink); background: var(--pink); border-radius: 4px; padding: .05rem .35rem; letter-spacing: .1em; }
.zen-num { color: var(--ink); border: 1px solid var(--hairline); border-radius: 999px; padding: .05rem .5rem; background: var(--paper); }

/* ---- navbar & footer --------------------------------------------------------- */
.navbar {
  background: var(--glass) !important; backdrop-filter: saturate(160%) blur(14px); -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--hairline); box-shadow: none !important; padding-block: .35rem;
}
.navbar .navbar-title { font-family: var(--sans); font-weight: 600; letter-spacing: .26em; font-size: .78rem; color: var(--ink) !important; }
.navbar .navbar-title::before { content: "白帯"; letter-spacing: .05em; font-size: .72rem; color: var(--pink-ink); background: var(--pink); border-radius: 4px; padding: .1rem .3rem; margin-right: .6rem; }
.navbar .nav-link { color: var(--ink-3) !important; font-size: .88rem; font-weight: 400; padding-inline: .7rem !important; transition: color .2s; }
.navbar .nav-link:hover, .navbar .nav-link.active { color: var(--ink) !important; }
@media (min-width: 992px) {
  .navbar .navbar-nav .nav-link { position: relative; }
  .navbar .navbar-nav .nav-link.active::after {
    content: ""; position: absolute; left: 50%; bottom: .2rem; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--mint-line);
  }
}
.navbar .bi { color: var(--ink-3); font-size: .95rem; }
.navbar .nav-link:hover .bi { color: var(--ink); }

.nav-footer { border-top: 1px solid var(--hairline); font-size: .78rem; color: var(--ink-3); background: transparent; }
.nav-footer a { color: var(--ink-3) !important; }
.nav-footer a:hover { color: var(--ink) !important; }

/* ---- buttons, badges ----------------------------------------------------------- */
.zen-btn {
  display: inline-flex; align-items: center; gap: .45rem; padding: .55rem 1.05rem; border-radius: 999px;
  font-size: .88rem; font-weight: 500; text-decoration: none !important; transition: background .25s, border-color .25s, transform .25s var(--ease), color .25s;
}
.zen-btn--primary { background: var(--ink); color: var(--paper) !important; }
.zen-btn--primary:hover { background: var(--mint-ink); transform: translateY(-1px); }
body.quarto-dark .zen-btn--primary:hover { color: #0d0d0c !important; }
.zen-btn--ghost { border: 1px solid var(--hairline); color: var(--ink) !important; background: var(--paper); }
.zen-btn--ghost:hover { border-color: var(--ink); }
.zen-badge { background: var(--mint); color: var(--mint-ink); border-radius: 999px; padding: .12rem .5rem; font-family: var(--sans); font-size: .68rem; font-weight: 500; letter-spacing: 0; text-transform: none; }

/* ---- hero --------------------------------------------------------------------- */
.zen-hero {
  position: relative; isolation: isolate; max-width: var(--wrap); margin: 0 auto; padding-block: clamp(2.5rem, 7vw, 5rem) clamp(2rem, 5vw, 3.5rem);
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 2rem 3rem; align-items: center;
}
.zen-hero::before { /* soft mint + pink haze behind the hero */
  content: ""; position: absolute; inset: -10% -15% auto auto; width: 70%; height: 120%; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, rgba(191, 232, 212, .55), transparent 70%) 70% 30% / 70% 70% no-repeat,
              radial-gradient(closest-side, rgba(251, 227, 234, .7), transparent 70%) 20% 75% / 55% 55% no-repeat;
  filter: blur(10px);
}
body.quarto-dark .zen-hero::before { opacity: .35; }
.zen-hero h1 { font-size: clamp(2.3rem, 5.2vw, 3.6rem); font-weight: 500; letter-spacing: -.045em; line-height: 1.02; margin: 0 0 1.1rem; }
.zen-hero h1 em { font-size: 1.08em; letter-spacing: -.02em; background: linear-gradient(transparent 68%, var(--mint) 68% 90%, transparent 90%); padding-inline: .05em; }
.zen-hero__lede { font-size: 1.05rem; color: var(--ink-2); max-width: 44ch; margin-bottom: 1.6rem; font-weight: 300; }
.zen-hero__actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 2.2rem; }
.zen-stats { display: flex; flex-wrap: wrap; gap: .75rem 0; margin: 0; border-top: 1px solid var(--hairline); padding-top: 1.1rem; }
.zen-stats div { padding-right: 1.6rem; margin-right: 1.6rem; border-right: 1px solid var(--hairline); }
.zen-stats div:last-child { border-right: none; }
.zen-stats dt { font-family: var(--mono); font-size: .66rem; font-weight: 400; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.zen-stats dd { font-size: 1.5rem; font-weight: 500; letter-spacing: -.03em; margin: .15rem 0 0; }

/* The ensō, brushed on load */
.zen-enso { position: relative; margin: 0; justify-self: center; width: min(100%, 320px); color: var(--ink); }
.zen-enso svg { width: 100%; height: auto; display: block; }
.zen-enso__main, .zen-enso__dry { stroke-dasharray: 1; stroke-dashoffset: 1; animation: brush 1.9s var(--ease) .25s forwards; }
.zen-enso__dry { opacity: .32; animation-duration: 1.6s; animation-delay: .55s; }
@keyframes brush { to { stroke-dashoffset: 0; } }
.zen-seal {
  position: absolute; right: 10%; bottom: 16%; display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 6px;
  background: var(--pink); color: var(--pink-ink); font-weight: 600; font-size: .78rem; line-height: 1.05; writing-mode: vertical-rl; letter-spacing: .12em;
  transform: rotate(-6deg) scale(.6); opacity: 0; animation: stamp .45s var(--ease) 1.9s forwards; box-shadow: 0 0 0 3px var(--paper);
}
@keyframes stamp { to { transform: rotate(-6deg) scale(1); opacity: 1; } }
.zen-enso figcaption { text-align: center; font-family: var(--mono); font-size: .68rem; letter-spacing: .06em; color: var(--ink-3); margin-top: .4rem; }
.zen-enso figcaption em { font-family: var(--serif); font-size: 1rem; letter-spacing: 0; color: var(--ink-2); }
@media (max-width: 760px) {
  .zen-hero { grid-template-columns: 1fr; }
  .zen-enso { width: 170px; order: -1; justify-self: start; }
}

/* ---- sections ------------------------------------------------------------------ */
.zen-section { max-width: var(--wrap); margin: 0 auto; padding-block: clamp(2.5rem, 6vw, 4rem); border-top: 1px solid var(--hairline); }
.zen-section__head { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: .25rem 1.5rem; margin-bottom: 1.6rem; }
.zen-section__head .zen-eyebrow { grid-column: 1 / -1; margin-bottom: .5rem; }
.zen-section__head h2 { font-size: clamp(1.5rem, 3vw, 2.05rem); margin: 0; padding: 0; }
.zen-more { font-size: .85rem; color: var(--ink-3) !important; text-decoration: none !important; transition: color .2s; white-space: nowrap; }
.zen-more:hover { color: var(--ink) !important; }

.zen-reveal { opacity: 0; transform: translateY(18px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.zen-reveal.is-in { opacity: 1; transform: none; }

/* ---- app cards ----------------------------------------------------------------- */
.zen-apps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 195px), 1fr)); gap: 1rem; margin-bottom: 1rem; }
.zen-app {
  position: relative; display: flex; flex-direction: column; overflow: hidden; isolation: isolate;
  background: var(--paper); border: 1px solid var(--hairline); border-radius: var(--radius);
  color: var(--ink) !important; text-decoration: none !important;
  transition: border-color .3s, transform .4s var(--ease), box-shadow .4s var(--ease);
}
.zen-app:hover { border-color: color-mix(in srgb, var(--ink) 35%, var(--hairline)); transform: translateY(-3px); box-shadow: 0 18px 40px -24px rgba(0, 0, 0, .35); }
.zen-app__media { aspect-ratio: 16 / 11; overflow: hidden; background: var(--paper-2); }
.zen-app__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); }
.zen-app:hover .zen-app__media img { transform: scale(1.05); }
.zen-app__body { display: flex; flex-direction: column; flex: 1; padding: .9rem 1rem 1rem; }
.zen-app__meta { display: flex; align-items: center; justify-content: space-between; gap: .5rem; min-height: 1.35rem; margin: 0 0 .35rem; font-family: var(--mono); font-size: .66rem; letter-spacing: .04em; color: var(--ink-3); }
.zen-app__title { font-size: 1.02rem; font-weight: 500; letter-spacing: -.02em; margin: 0 0 .3rem; }
.zen-app__desc { color: var(--ink-3); font-size: .84rem; line-height: 1.5; margin: 0 0 .8rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.zen-app__tags { display: flex; flex-wrap: wrap; gap: .3rem; margin: auto 0 0; }
.zen-app__tags span { font-size: .68rem; color: var(--ink-3); background: var(--paper-2); border-radius: 999px; padding: .1rem .5rem; }
.zen-app__tags span::before { content: ""; display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: var(--pink-ink); opacity: .55; margin-right: .35rem; vertical-align: .1em; }
.zen-app__cta {
  position: absolute; top: .7rem; right: .7rem; z-index: 2; width: 2rem; height: 2rem; display: grid; place-items: center; border-radius: 50%;
  background: var(--glass); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); font-size: 0; color: var(--ink);
  opacity: 0; transform: translate(-4px, 4px); transition: opacity .3s, transform .4s var(--ease);
}
.zen-app__cta span { font-size: .9rem; }
.zen-app:hover .zen-app__cta { opacity: 1; transform: none; }



/* ---- recent writing --------------------------------------------------------------- */
.zen-writing { list-style: none; padding: 0; margin: 0; }
.zen-writing li { border-top: 1px solid var(--hairline); }
.zen-writing li:last-child { border-bottom: 1px solid var(--hairline); }
.zen-writing__item { display: grid; grid-template-columns: 6.5rem 1fr auto; gap: 1.25rem; align-items: baseline; padding: 1.1rem .2rem; color: var(--ink) !important; text-decoration: none !important; transition: padding .35s var(--ease), background .35s; border-radius: 10px; }
.zen-writing__item:hover { padding-inline: .9rem; background: var(--paper-2); }
.zen-writing__date { font-family: var(--mono); font-size: .7rem; color: var(--ink-3); text-transform: uppercase; letter-spacing: .06em; }
.zen-writing__title { display: block; font-size: 1.12rem; font-weight: 500; letter-spacing: -.02em; line-height: 1.3; }
.zen-writing__sub { display: block; color: var(--ink-3); font-size: .88rem; margin-top: .2rem; }
.zen-writing__arrow { color: var(--ink-3); transition: transform .3s var(--ease), color .3s; }
.zen-writing__item:hover .zen-writing__arrow { transform: translateX(4px); color: var(--ink); }
@media (max-width: 600px) { .zen-writing__item { grid-template-columns: 1fr auto; } .zen-writing__date { grid-column: 1 / -1; } }

/* ---- elsewhere ------------------------------------------------------------------- */
.zen-elsewhere { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: .75rem; }
.zen-elsewhere a {
  position: relative; display: block; padding: 1rem 2.4rem 1rem 1.1rem; border: 1px solid var(--hairline); border-radius: 12px; background: var(--paper);
  color: var(--ink) !important; text-decoration: none !important; transition: border-color .25s, transform .35s var(--ease);
}
.zen-elsewhere a:hover { border-color: color-mix(in srgb, var(--ink) 35%, var(--hairline)); transform: translateY(-2px); }
.zen-elsewhere strong { display: block; font-weight: 500; font-size: .95rem; letter-spacing: -.01em; }
.zen-elsewhere span { color: var(--ink-3); font-size: .8rem; }
.zen-elsewhere i { position: absolute; top: 1rem; right: 1rem; font-style: normal; color: var(--ink-3); transition: transform .3s var(--ease), color .3s; }
.zen-elsewhere a:hover i { color: var(--ink); transform: translateX(3px); }

/* ---- page titles ------------------------------------------------------------------- */
#title-block-header { max-width: var(--wrap); margin-inline: auto; }
.quarto-title-banner { background: transparent !important; color: var(--ink) !important; border-bottom: 1px solid var(--hairline); }
.quarto-title-banner .title, .quarto-title-banner .subtitle { color: var(--ink) !important; }
.quarto-title .title { font-size: clamp(1.9rem, 4.5vw, 2.6rem); font-weight: 500; letter-spacing: -.04em; }
.quarto-title .subtitle { font-family: var(--sans); color: var(--ink-3) !important; font-size: 1rem; font-weight: 300; }
.quarto-categories .quarto-category { border: 1px solid var(--hairline); background: transparent; color: var(--ink-3); border-radius: 999px; font-size: .68rem; }

/* ---- writing index (Quarto grid listing) ------------------------------------------- */
.quarto-grid-item.card { border: 1px solid var(--hairline); border-radius: var(--radius); overflow: hidden; background: var(--paper); box-shadow: none; transition: border-color .3s, transform .4s var(--ease); }
.quarto-grid-item.card:hover { border-color: color-mix(in srgb, var(--ink) 35%, var(--hairline)); transform: translateY(-3px); }
.quarto-grid-item .card-title { font-weight: 500; font-size: 1.1rem; letter-spacing: -.02em; }
.quarto-grid-item .card-subtitle, .quarto-grid-item .listing-subtitle { color: var(--ink-3); font-size: .88rem; }
.quarto-grid-item .listing-categories .listing-category { border: none; background: var(--paper-2); color: var(--ink-3); border-radius: 999px; font-size: .64rem; }
.quarto-grid-item .card-other-values, .quarto-grid-item .listing-date, .quarto-grid-item .listing-reading-time { font-family: var(--mono); font-size: .7rem; color: var(--ink-3); }

.section-header h4 { font-family: var(--mono); font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); margin-top: 2.5rem; }
.social-card { max-width: 540px; margin: 1.25rem 0; border: 1px solid var(--hairline); border-radius: var(--radius); overflow: hidden; }
.content-divider { height: 1px; background: var(--hairline); margin: 3rem 0; }

/* ---- articles: "All writing" / "Keep reading" -------------------------------------- */
.post-backlink { display: inline-block; margin: .5rem 0 1rem; font-size: .82rem; color: var(--ink-3) !important; text-decoration: none !important; }
.post-backlink:hover { color: var(--ink) !important; }
.post-footer-nav { margin: 4rem 0 1rem; padding: 2rem 1.5rem; border-top: 1px solid var(--hairline); text-align: center; }
.post-footer-nav p { margin: 0 auto .9rem; color: var(--ink-3); }
.post-footer-nav__cta { display: inline-block; padding: .55rem 1.2rem; border-radius: 999px; background: var(--ink); color: var(--paper) !important; font-size: .88rem; font-weight: 500; text-decoration: none !important; transition: background .25s; }
.post-footer-nav__cta:hover { background: var(--mint-ink); }

/* ---- about (jolla template) -------------------------------------------------------- */
.quarto-about-jolla .about-image { border-radius: 50% !important; border: 1px solid var(--hairline); }
.quarto-about-jolla .about-links .about-link { border: 1px solid var(--hairline) !important; border-radius: 999px !important; color: var(--ink) !important; background: var(--paper) !important; font-size: .82rem; }
.quarto-about-jolla .about-links .about-link:hover { border-color: var(--ink) !important; }

/* ---- contact ------------------------------------------------------------------------- */
.contact-intro, .gallery-intro { color: var(--ink-3); font-size: 1rem; font-weight: 300; max-width: 58ch; margin: 0 0 2rem; }
.contact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: .75rem; max-width: var(--wrap); margin: 0 0 3rem; }
.contact-card {
  display: flex; flex-direction: column; gap: .3rem; padding: 1.1rem; border: 1px solid var(--hairline); border-radius: 12px; background: var(--paper);
  color: var(--ink) !important; text-decoration: none !important; transition: border-color .25s, transform .35s var(--ease);
}
.contact-card:hover { border-color: color-mix(in srgb, var(--ink) 35%, var(--hairline)); transform: translateY(-2px); }
.contact-card h2 { font-size: 1rem; font-weight: 500; margin: .5rem 0 0; }
.contact-card p { color: var(--ink-3); font-size: .8rem; margin: 0; }
.contact-icon { width: 2.2rem; height: 2.2rem; display: grid; place-items: center; border-radius: 8px; background: var(--mint); color: var(--mint-ink); }
.contact-icon svg { width: 17px; height: 17px; }
.contact-card--podcast .contact-icon { background: var(--pink); color: var(--pink-ink); }

/* ---- gallery + lightbox ----------------------------------------------------------------- */
.artgrid__grid { list-style: none; padding: 0; margin: 0 0 3rem; max-width: var(--wrap); display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 1rem; }
.art-tile figure { margin: 0; }
.art-tile__media { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius); transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
.art-tile__media:hover { transform: translateY(-3px); box-shadow: 0 18px 40px -24px rgba(0, 0, 0, .4); }
.art-tile__caption { font-family: var(--mono); font-size: .68rem; color: var(--ink-3); margin-top: .55rem; }
.lightbox { position: fixed; inset: 0; z-index: 2000; display: none; align-items: center; justify-content: center; background: var(--glass); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); padding: 2rem; }
.lightbox--open { display: flex; }
.lightbox__content { text-align: center; max-width: min(92vw, 1000px); }
.lightbox__image { max-width: 100%; max-height: 80vh; border-radius: var(--radius); box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .5); }
.lightbox__caption { font-family: var(--mono); font-size: .72rem; color: var(--ink-3); margin: .8rem auto 0; }
.lightbox__close, .lightbox__nav { position: absolute; background: var(--paper); border: 1px solid var(--hairline); color: var(--ink); border-radius: 999px; width: 2.6rem; height: 2.6rem; display: grid; place-items: center; cursor: pointer; }
.lightbox__close:hover, .lightbox__nav:hover { border-color: var(--ink); }
.lightbox__close { top: 1.25rem; right: 1.25rem; }
.lightbox__nav--prev { left: 1.25rem; top: 50%; transform: translateY(-50%); }
.lightbox__nav--next { right: 1.25rem; top: 50%; transform: translateY(-50%); }
.lightbox svg { width: 18px; height: 18px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .zen-enso__main, .zen-enso__dry { stroke-dashoffset: 0; }
  .zen-seal { opacity: 1; transform: rotate(-6deg); }
  .zen-reveal { opacity: 1; transform: none; }
}

/* ---- landing: the app shelf comes first ------------------------------------------------ */
[hidden] { display: none !important; }
.shelf { max-width: var(--wrap); margin: 0 auto; padding-block: clamp(1.8rem, 5vw, 3rem) clamp(2.5rem, 6vw, 4rem); position: relative; isolation: isolate; }
.shelf::before { content: ""; position: absolute; inset: -6% -12% auto 45%; height: 340px; z-index: -1; pointer-events: none; filter: blur(14px);
  background: radial-gradient(closest-side, rgba(191, 232, 212, .55), transparent 70%) 70% 30% / 60% 90% no-repeat,
              radial-gradient(closest-side, rgba(251, 227, 234, .7), transparent 70%) 25% 70% / 45% 70% no-repeat; }
body.quarto-dark .shelf::before { opacity: .3; }
.shelf__head { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; margin-bottom: 1.4rem; }
.shelf__intro h1 { font-size: clamp(2.1rem, 4.8vw, 3.3rem); letter-spacing: -.045em; line-height: 1.02; margin: 0 0 .7rem; }
.shelf__intro h1 em { font-size: 1.08em; background: linear-gradient(transparent 68%, var(--mint) 68% 90%, transparent 90%); padding-inline: .05em; }
.shelf__lede { color: var(--ink-2); font-weight: 300; font-size: 1.02rem; max-width: 52ch; margin: 0; }
.zen-enso--mini { width: 128px; flex: none; margin: 0; }
.zen-enso--mini .zen-seal { width: 1.7rem; height: 1.7rem; font-size: .58rem; right: 6%; bottom: 10%; border-radius: 5px; }
.zen-enso--mini figcaption { display: none; }

.filters { display: flex; flex-wrap: wrap; gap: .45rem; margin-bottom: 1.2rem; }
.filter { font: 500 .85rem var(--sans); color: var(--ink-2); background: var(--paper); border: 1px solid var(--hairline); border-radius: 999px; padding: .4rem .85rem; cursor: pointer; transition: border-color .2s, background .2s, color .2s; }
.filter span { font-family: var(--mono); font-size: .7rem; color: var(--ink-3); margin-left: .2rem; }
.filter:hover { border-color: var(--ink); color: var(--ink); }
.filter.is-on { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.filter.is-on span { color: var(--mint-2); }


.shelf { overflow-x: clip; }
.zen-enso--mini { order: 0; }
@media (max-width: 600px) {
  .shelf .zen-enso--mini { display: none !important; }
}

/* ---- social page ------------------------------------------------------------------------- */
.filters__sep { width: 1px; align-self: stretch; background: var(--hairline); margin: 0 .3rem; }
.filter .bi { font-size: .8rem; margin-right: .15rem; }
.social-empty { color: var(--ink-3); padding: 2rem 0; }
.social-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 1.1rem; align-items: start; max-width: var(--wrap); margin-bottom: 3rem; }
.post { margin: 0; display: block; background: var(--paper); border: 1px solid var(--hairline); border-radius: var(--radius); overflow: hidden;
  transition: border-color .3s, transform .4s var(--ease), box-shadow .4s var(--ease); }
.post:hover { border-color: color-mix(in srgb, var(--ink) 30%, var(--hairline)); transform: translateY(-2px); box-shadow: 0 18px 40px -26px rgba(0, 0, 0, .3); }
.post__media { display: block; background: var(--paper-2); border-bottom: 1px solid var(--hairline); }
.post__media img { display: block; width: 100%; height: auto; max-height: 340px; object-fit: cover; object-position: top; }
.post__body { padding: 1rem 1.1rem 1rem; }
.post__meta { display: flex; align-items: center; gap: .35rem; font-family: var(--mono); font-size: .68rem; letter-spacing: .04em; color: var(--ink-3); margin: 0 0 .5rem; }
.post__meta .bi { font-size: .8rem; color: var(--ink-2); }
.post--linkedin .post__meta .bi { color: #0a66c2; }
body.quarto-dark .post--linkedin .post__meta .bi { color: #70b5f9; }
.post__lang { margin-left: auto; background: var(--pink); color: var(--pink-ink); border-radius: 4px; padding: .02rem .35rem; font-size: .62rem; }
.post__title { font-size: 1.12rem; font-weight: 500; letter-spacing: -.02em; line-height: 1.25; margin: 0 0 .35rem; }
.post__by { font-size: .78rem; color: var(--ink-3); margin: -.1rem 0 .4rem; }
.post__text { font-size: .88rem; line-height: 1.6; color: var(--ink-2); white-space: pre-line; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
.post.is-open .post__text { display: block; -webkit-line-clamp: unset; }
.post__more { background: none; border: 0; padding: 0; margin-top: .35rem; font: 500 .82rem var(--sans); color: var(--ink); cursor: pointer;
  text-decoration: underline; text-decoration-color: var(--mint-line); text-underline-offset: 3px; }
.post__foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .4rem 1rem; margin: .9rem 0 0; padding-top: .7rem; border-top: 1px solid var(--hairline); font-size: .78rem; }
.post__stats { color: var(--ink-3); font-family: var(--mono); font-size: .68rem; }
.post__open { color: var(--ink) !important; font-weight: 500; text-decoration: none !important; }
.post__open:hover { color: var(--mint-ink) !important; }
.writing-social { color: var(--ink-3); margin: 2.5rem 0 3rem; }

/* ---- app cards: ink-on-canvas "paper" cards (art from images/covers) ------------------ */
:root { --canvas: #f5f2ea; --canvas-edge: #ebe6da; }
body.quarto-dark { --canvas: #eee9df; --canvas-edge: #d9d3c6; }
.zen-app { background: var(--canvas); border-color: var(--canvas-edge); }
.zen-app__media { aspect-ratio: 1 / 1; background: var(--canvas); }
.zen-app__media img { object-fit: cover; mix-blend-mode: multiply; }
.zen-app:hover .zen-app__media img { transform: scale(1.03); }
.zen-app__body { border-top: 1px solid var(--canvas-edge); color: #141414; }
.zen-app__title { color: #141414; }
.zen-app__desc, .zen-app__meta { color: #5c5a55; }
.zen-app__tags span { background: rgba(20, 20, 20, .06); color: #4a4843; }
.zen-app__cta { background: rgba(245, 242, 234, .9); color: #141414; }
.zen-app:hover { border-color: #c9c2b2; box-shadow: 0 18px 40px -26px rgba(60, 50, 30, .45); }
body.quarto-dark .zen-app:hover { box-shadow: 0 18px 40px -22px rgba(0, 0, 0, .7); }
/* featured: the same card, bigger, three to a row */
.zen-apps:has(.zen-app--featured) { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 1.1rem; }
.zen-app--featured .zen-app__body { padding: 1.1rem 1.2rem 1.2rem; }
.zen-app--featured .zen-app__title { font-size: 1.35rem; letter-spacing: -.03em; }
.zen-app--featured .zen-app__desc { font-size: .9rem; }
/* the cards are always light paper, so their badges and dots keep light colours in dark mode too */
.zen-app .zen-badge { background: #bfe8d4; color: #123d2e; }
.zen-app .zen-app__tags span::before { background: #8a3553; }

/* ---- justified reading text, site-wide ------------------------------------------------ */
main.content p, main.content li, .shelf__lede, .post__text, .zen-app__desc, .zen-writing__sub {
  text-align: justify; text-align-last: left; hyphens: auto; -webkit-hyphens: auto;
}
/* interface text stays as designed */
main.content .zen-eyebrow, main.content .zen-app__meta, main.content .zen-app__tags, main.content .post__meta,
main.content .post__foot, main.content .post__by, main.content .sb-source, main.content .zen-stats,
main.content .post-footer-nav p, main.content .social-empty, main.content .contact-card p,
main.content .art-tile__caption, main.content .card-text, .nav-footer p { text-align: initial; text-align-last: auto; hyphens: manual; }
/* display text: no mid-word breaks */
.quarto-title .subtitle, main.content .sb-answer { hyphens: manual; -webkit-hyphens: manual; }
.quarto-title .subtitle { text-align: left; }