/* Blog (templates/public/blog.html, blog_post.html): on top of maske.css and start.css (bar, footer, buttons). Covers are
   drawn, not photographed: each category its time of day over the sea, with a chat line. Article text set for reading: 68 characters, generous
   leading, headings as anchors for the contents beside it. */

/* ---------- Overview ---------- */
.bl-head { padding: 72px 0 32px; }
.bl-head h1 { font-size: clamp(36px, 4.6vw, 58px); line-height: 1.04; letter-spacing: -.03em; }
.bl-head .lp-lead { margin-top: 14px; }
.bl-filter { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.bl-filter a {
  display: inline-flex; align-items: center; height: 36px; padding: 0 14px; border: 1px solid var(--line2); border-radius: 999px;
  color: var(--ink2); font-size: 14px; font-weight: 500; text-decoration: none; transition: background-color .15s, color .15s, border-color .15s;
}
.bl-filter a:hover { background: var(--sunken); color: var(--ink); }
.bl-filter a[aria-current="page"] { border-color: var(--ink); background: var(--ink); color: var(--page); }
.bl-filter a { gap: 7px; }
.bl-n { min-width: 20px; padding: 0 6px; border-radius: 999px; background: var(--sunken); color: var(--ink3); font-size: 12px; font-weight: 600; line-height: 20px; text-align: center; font-variant-numeric: tabular-nums; }
.bl-filter a[aria-current="page"] .bl-n { background: color-mix(in srgb, var(--page) 22%, transparent); color: var(--page); }
.bl-list { padding: 8px 0 96px; }
.bl-empty { color: var(--ink2); }

/* covers: the category's time of day over the sea, with its chat line (fragments/blog.html). They are pictures, so
   they look the same in light and dark. */
.bl-cover { position: relative; isolation: isolate; display: block; overflow: hidden; border-radius: 18px; aspect-ratio: 16 / 10; --sx: 72%; --sy: 30%; }
.bl-cover.s1 { --sx: 86%; }
.bl-cover.s2 { --sx: 79%; }
.bl-cover.t-dawn { background: linear-gradient(180deg, #3b3f63 0%, #8e6a8d 36%, #f0a27e 64%, #ffd7ad 70%); --sy: 52%; }
.bl-cover.t-golden { background: linear-gradient(180deg, #f6b16f 0%, #f08a4b 42%, #ec7b45 62%, #fbd2a5 70%); --sy: 18%; }
.bl-cover.t-sunset { background: linear-gradient(180deg, #4a2a3a 0%, #b5452a 36%, #f37338 60%, #ffc49b 70%); --sy: 44%; }
.bl-cover.t-dusk { background: linear-gradient(180deg, #1d1726 0%, #4a2a45 40%, #a2465a 62%, #f08a63 70%); --sy: 60%; }
.bl-cover.t-day { background: linear-gradient(180deg, #f7f0e8 0%, #f6e2cc 48%, #f3cda6 70%); --sy: 10%; }
.bl-cover.t-night { background: linear-gradient(180deg, #0c0d16 0%, #171a2b 50%, #2a2236 70%); --sy: 12%; }
.bl-cover.t-holiday { background: linear-gradient(180deg, #b9d6da 0%, #e3e0cf 42%, #f8cfa5 70%); --sy: 14%; }
/* stars over the night and the dusk */
.bl-cover.t-night::before, .bl-cover.t-dusk::before {
  content: ""; position: absolute; inset: 0 0 32% 0; z-index: 0; opacity: .8;
  background-image: radial-gradient(1.2px 1.2px at 12% 18%, #fff, transparent), radial-gradient(1px 1px at 28% 42%, #fff, transparent),
    radial-gradient(1.4px 1.4px at 44% 12%, #ffe9d2, transparent), radial-gradient(1px 1px at 62% 38%, #fff, transparent),
    radial-gradient(1.2px 1.2px at 86% 24%, #fff, transparent), radial-gradient(1px 1px at 92% 52%, #fff, transparent),
    radial-gradient(1px 1px at 8% 60%, #fff, transparent), radial-gradient(1.3px 1.3px at 36% 66%, #ffe9d2, transparent);
}
.bl-cover.t-dusk::before { opacity: .45; }
/* the sun (a moon at night) and its glow */
.bl-sky-sun {
  position: absolute; left: calc(var(--sx) - 11%); top: var(--sy); z-index: 1; width: 22%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, #fff7ea 0 34%, rgba(255, 220, 180, .9) 37%, rgba(255, 176, 120, .38) 58%, transparent 71%);
  transition: transform .8s var(--ease);
}
.t-dusk .bl-sky-sun { opacity: .55; }
.t-day .bl-sky-sun, .t-holiday .bl-sky-sun { background: radial-gradient(circle, #fffaf1 0 32%, rgba(255, 236, 205, .9) 35%, rgba(255, 210, 160, .4) 58%, transparent 71%); }
.t-night .bl-sky-sun { width: 11%; left: calc(var(--sx) - 5%); background: none; box-shadow: inset -.55em .3em 0 0 #f5e3c8; font-size: clamp(10px, 1.6vw, 22px); filter: drop-shadow(0 0 12px rgba(255, 214, 170, .35)); rotate: -18deg; }
/* the sea below the horizon, with the sun's reflection */
.bl-sky-sea {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; height: 30%;
  background: radial-gradient(9% 90% at var(--sx) 0%, rgba(255, 226, 192, .65), transparent 75%),
    repeating-linear-gradient(180deg, rgba(255, 232, 205, .09) 0 1px, transparent 1px 6px),
    linear-gradient(180deg, rgba(150, 52, 20, .32), rgba(70, 24, 12, .62));
  box-shadow: 0 -1px 0 rgba(255, 228, 196, .55);
}
.t-day .bl-sky-sea { background: radial-gradient(9% 90% at var(--sx) 0%, rgba(255, 252, 245, .8), transparent 75%), repeating-linear-gradient(180deg, rgba(255, 255, 255, .14) 0 1px, transparent 1px 6px), linear-gradient(180deg, #e9b98c, #c98552); }
.t-holiday .bl-sky-sea { background: radial-gradient(9% 90% at var(--sx) 0%, rgba(255, 252, 245, .75), transparent 75%), repeating-linear-gradient(180deg, rgba(255, 255, 255, .14) 0 1px, transparent 1px 6px), linear-gradient(180deg, #6fa9ad, #3f7a80); }
.t-night .bl-sky-sea { background: radial-gradient(5% 90% at var(--sx) 0%, rgba(245, 227, 200, .35), transparent 75%), linear-gradient(180deg, #151627, #0b0b12); box-shadow: 0 -1px 0 rgba(245, 227, 200, .18); }
/* the chat line, as a bubble above the sea */
.bl-bub {
  position: absolute; left: 6%; bottom: 38%; z-index: 3; display: inline-flex; align-items: center; gap: 8px; max-width: 56%;
  padding: 9px 14px; border-radius: 16px 16px 16px 5px; background: rgba(255, 255, 255, .88); color: #141413;
  font-size: 13.5px; font-weight: 500; line-height: 1.3; box-shadow: 0 10px 26px rgba(20, 12, 8, .22); transition: transform .5s var(--ease);
}
.bl-bub .ic { flex: none; width: 15px; height: 15px; color: #c2410c; }
.t-night .bl-bub, .t-dusk .bl-bub { background: rgba(24, 22, 20, .78); color: #f2efe9; box-shadow: 0 10px 26px rgba(0, 0, 0, .35); }
.t-night .bl-bub .ic, .t-dusk .bl-bub .ic { color: #ffc49b; }
.bl-cover.sm .bl-bub { padding: 7px 11px; font-size: 12.5px; }
.bl-cover.lg .bl-bub { padding: 11px 16px; font-size: 15px; }
.bl-cover.lg .bl-bub .ic { width: 17px; height: 17px; }
/* hover: the sun climbs a little, the bubble lifts */
.bl-feature:hover .bl-sky-sun, .bl-card:hover .bl-sky-sun { transform: translateY(-10%); }
.bl-feature:hover .bl-bub, .bl-card:hover .bl-bub { transform: translateY(-3px); }

.bl-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; color: var(--ink3); font-size: 13px; }
.bl-meta .tag { text-decoration: none; }

.bl-feature {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 40px; align-items: center; margin-bottom: 56px; padding: 20px;
  border: 1px solid var(--line); border-radius: 26px; background: var(--surface); color: inherit; text-decoration: none;
  transition: box-shadow .3s var(--ease), transform .3s var(--ease);
}
.bl-feature:hover { box-shadow: 0 24px 60px var(--shadow-c); transform: translateY(-2px); }
.bl-feature-t { display: grid; gap: 14px; padding-right: 20px; }
.bl-feature-t b { font-family: var(--font-d); font-size: clamp(26px, 2.8vw, 36px); font-weight: 700; line-height: 1.12; letter-spacing: -.02em; }
.bl-excerpt { color: var(--ink2); font-size: 15.5px; line-height: 1.6; }
.bl-more { display: inline-flex; align-items: center; gap: 6px; color: var(--accent-text); font-weight: 600; }
.bl-more::after { content: ""; width: 16px; height: 16px; background-color: currentColor; transition: transform .2s var(--ease);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat; }
.bl-feature:hover .bl-more::after { transform: translateX(4px); }

.bl-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin: 0; padding: 0; list-style: none; }
.bl-card {
  display: grid; align-content: start; gap: 12px; height: 100%; padding: 14px 14px 22px; border: 1px solid var(--line); border-radius: 22px;
  background: var(--surface); color: inherit; text-decoration: none; transition: box-shadow .3s var(--ease), transform .3s var(--ease);
}
.bl-card:hover { box-shadow: 0 20px 50px var(--shadow-c); transform: translateY(-3px); }
.bl-card > .bl-meta, .bl-card > b, .bl-card > .bl-excerpt, .bl-card > .bl-date { padding: 0 8px; }
.bl-card b { font-family: var(--font-d); font-size: 20px; font-weight: 700; line-height: 1.2; letter-spacing: -.01em; }
.bl-card .bl-excerpt { font-size: 14.5px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.bl-date { color: var(--ink3); font-size: 13px; }

.bl-cta { padding: 0 0 96px; }
.bl-cta-in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; padding: 40px 44px; border-radius: 24px; background: #141413; color: #f2efe9; }
.bl-cta h2 { color: #f5f5f4; font-size: clamp(26px, 2.6vw, 34px); letter-spacing: -.02em; }
.bl-cta p { max-width: 56ch; margin-top: 8px; color: #b6b1a8; }

/* ---------- Article ---------- */
.bl-progress { position: fixed; left: 0; right: 0; top: 0; z-index: 60; height: 3px; pointer-events: none; }
.bl-progress i { display: block; height: 100%; background: var(--accent); transform: scaleX(0); transform-origin: 0 50%; }
.bl-preview { margin: 0; padding: 10px 24px; background: var(--warn-soft); color: var(--warn); font-size: 14px; font-weight: 600; text-align: center; }
.bl-narrow { max-width: 760px; }
.bl-art-head { padding: 56px 0 40px; }
.bl-back { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 28px; color: var(--ink2); font-size: 14px; font-weight: 500; text-decoration: none; }
.bl-back:hover { color: var(--ink); }
.bl-cover.band { aspect-ratio: 21 / 8; margin-bottom: 28px; border-radius: 22px; }
.bl-art-head h1 { margin-top: 16px; font-size: clamp(32px, 4.2vw, 50px); line-height: 1.08; letter-spacing: -.03em; }
.bl-lead { margin-top: 18px; color: var(--ink2); font-size: 19px; line-height: 1.55; }
.bl-byline { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--line); }
.bl-author { display: flex; align-items: center; gap: 12px; margin: 0; }
.bl-share {
  display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px; border: 1px solid var(--line2); border-radius: 11px;
  background: var(--surface); color: var(--ink); font-size: 14px; font-weight: 500; cursor: pointer; transition: background-color .15s, border-color .15s, color .15s;
}
.bl-share:hover { background: var(--sunken); }
.bl-share .ic { width: 16px; height: 16px; }
.bl-share.is-done { border-color: color-mix(in srgb, var(--ok) 45%, transparent); background: var(--ok-soft); color: var(--ok); }
.bl-author-av { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(150deg, #fdba74, #f37338 60%, #9a3412); color: #fff; font-family: var(--font-d); font-size: 14px; font-weight: 700; }
.bl-author span:last-child { display: grid; line-height: 1.3; }
.bl-author small { color: var(--ink3); font-size: 13px; }

.bl-body-wrap { display: grid; grid-template-columns: 220px minmax(0, 720px); gap: 56px; justify-content: center; padding-bottom: 72px; }
.bl-body-wrap:not(:has(.bl-toc)) { grid-template-columns: minmax(0, 760px); }
.bl-toc { position: sticky; top: 96px; align-self: start; display: grid; gap: 10px; font-size: 14px; }
.bl-toc b { color: var(--ink); font-size: 13.5px; }
.bl-toc ol { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; border-left: 2px solid var(--line); }
.bl-toc a { display: block; margin-left: -2px; padding: 6px 0 6px 14px; border-left: 2px solid transparent; color: var(--ink2); line-height: 1.4; text-decoration: none; transition: color .15s, border-color .15s; }
.bl-toc a:hover { color: var(--ink); border-left-color: var(--line2); }
.bl-toc a.is-on { color: var(--accent-text); border-left-color: var(--accent); font-weight: 600; }

.bl-body { color: var(--ink); font-size: 18px; line-height: 1.75; }
.bl-body > * + * { margin-top: 1.1em; }
.bl-body h2 { margin-top: 1.9em; font-size: 27px; line-height: 1.2; letter-spacing: -.02em; scroll-margin-top: 96px; }
.bl-body p { max-width: 68ch; }
.bl-body > p:first-child { color: var(--ink); font-size: 1.12em; line-height: 1.65; }
.bl-body ul { max-width: 66ch; padding: 0; list-style: none; display: grid; gap: .5em; }
.bl-body li { position: relative; padding-left: 28px; }
.bl-body li::before { content: ""; position: absolute; left: 4px; top: .7em; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.bl-body strong { font-weight: 650; }
.lp-tip { display: flex; gap: 14px; max-width: 66ch; padding: 18px 20px; border-radius: 16px; background: var(--accent-soft); color: var(--ink); font-size: 16.5px; line-height: 1.6; }
.lp-tip::before { content: ""; flex: none; width: 22px; height: 22px; margin-top: 2px; background-color: var(--accent-text);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18h6M10 21h4M12 3a6 6 0 0 0-3.6 10.8c.6.5 1 1.2 1.1 2h5c.1-.8.5-1.5 1.1-2A6 6 0 0 0 12 3z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18h6M10 21h4M12 3a6 6 0 0 0-3.6 10.8c.6.5 1 1.2 1.1 2h5c.1-.8.5-1.5 1.1-2A6 6 0 0 0 12 3z'/%3E%3C/svg%3E") center / contain no-repeat; }

.bl-endcta { padding: 0 0 72px; }
.bl-endcta-box { padding: 36px; border: 1px solid var(--line); border-radius: 24px; background: var(--sunken); }
.bl-endcta-box h2 { font-size: 28px; letter-spacing: -.02em; }
.bl-endcta-box p { max-width: 58ch; margin-top: 10px; color: var(--ink2); }
.bl-related { padding: 72px 0 96px; border-top: 1px solid var(--line); background: var(--sunken); }
.bl-related h2 { margin-bottom: 28px; font-size: 30px; letter-spacing: -.02em; }

@media (max-width: 1080px) {
  .bl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bl-body-wrap { grid-template-columns: minmax(0, 1fr); }
  .bl-toc { display: none; }
}
@media (max-width: 820px) {
  .bl-feature { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .bl-feature-t { padding: 0 6px 8px; }
}
@media (max-width: 560px) {
  .bl-head { padding: 48px 0 24px; }
  .bl-grid { grid-template-columns: minmax(0, 1fr); }
  .bl-body { font-size: 17px; }
  .bl-body h2 { font-size: 23px; }
  .bl-lead { font-size: 17px; }
  .bl-cover.band { aspect-ratio: 16 / 9; }
  .bl-cover.lg .bl-bub { font-size: 13.5px; }
  .bl-cta-in, .bl-endcta-box { padding: 28px 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .bl-feature, .bl-card, .bl-sky-sun, .bl-bub, .bl-more::after { transition: none; }
}