/* Blog: bold color covers with one big number each, rounded, playful. */
.blog-head { padding-block: clamp(36px, 5vw, 72px) clamp(20px, 3vw, 32px); }
.blog-head h1 { font-size: clamp(3rem, 1.6rem + 6vw, 6.5rem); font-weight: 700; letter-spacing: -0.06em; line-height: .92; }
.blog-head h1 em { font-style: normal; color: var(--pink); }
.blog-head__sub { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-top: 24px; }
.blog-head__sub p { color: var(--label-2); max-width: 30em; }
.search { display: flex; align-items: center; gap: 10px; width: min(100%, 320px); height: 48px; padding: 0 18px; border-radius: 999px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--hairline-2); color: var(--label-3); font-size: var(--t-s); }
.search svg { width: 18px; height: 18px; flex: none; }

.chips-row { display: flex; gap: 8px; margin-top: 24px; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; }
.chips-row::-webkit-scrollbar { display: none; }
.chips-row a { flex: none; padding: 10px 16px; border-radius: 999px; background: var(--surface); color: var(--label); font-size: var(--t-s); font-weight: 600; text-decoration: none; box-shadow: inset 0 0 0 1px var(--hairline); transition: transform .2s var(--ease), background-color .2s; }
.chips-row a:hover { transform: translateY(-2px); }
.chips-row a[aria-current="true"] { background: var(--label); color: var(--black); box-shadow: none; }

/* Cover tiles */
.c { position: relative; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; border-radius: 28px; padding: 22px; }
.c--kunyit { background: #E8A317; color: #1A1405; }
.c--teal { background: #0F766E; color: #fff; }
.c--mint { background: #BFE5DF; color: #0B2422; }
.c--ink { background: #0B2422; color: #F2F7F6; }
.c--ink .c__big { color: #E8A317; }
html:not([data-theme="light"]) .c--ink { background: #242B2A; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14); }
.c--coral { background: #F26B4F; color: #1F0A05; }
.c__tag { align-self: flex-start; padding: 6px 12px; border-radius: 999px; background: rgba(255, 255, 255, 0.22); font-size: var(--t-xs); font-weight: 700; letter-spacing: .01em; }
.c--mint .c__tag, .c--kunyit .c__tag, .c--coral .c__tag { background: rgba(11, 36, 34, 0.1); }
.c__big { font-size: clamp(3.5rem, 2rem + 5vw, 6rem); font-weight: 700; letter-spacing: -0.06em; line-height: .9; font-variant-numeric: tabular-nums; }
.c__big small { display: block; margin-top: 6px; font-size: 1rem; font-weight: 600; letter-spacing: -0.01em; opacity: .75; }

.featured { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 14px; text-decoration: none; color: inherit; }
.featured .c { min-height: clamp(300px, 36vw, 440px); transition: transform .5s var(--ease); }
.featured .c__big { font-size: clamp(4.5rem, 2rem + 9vw, 10rem); }
.featured__text { display: flex; flex-direction: column; justify-content: flex-end; gap: 14px; padding: 28px; border-radius: 28px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--hairline); }
.featured__text h2 { font-size: clamp(1.875rem, 1.2rem + 2.2vw, 2.75rem); font-weight: 700; letter-spacing: -0.045em; line-height: 1.02; text-wrap: balance; }
.featured__text p { color: var(--label-2); text-wrap: pretty; }
.featured:hover .c { transform: scale(0.985) rotate(-0.6deg); }
.go { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; margin-top: 6px; padding: 12px 18px; border-radius: 999px; background: var(--label); color: var(--black); font-size: var(--t-s); font-weight: 600; }
.go svg { width: 16px; height: 16px; transition: transform .3s var(--ease); }
.featured:hover .go svg { transform: translateX(3px); }

.meta { display: flex; flex-wrap: wrap; gap: 4px 10px; color: var(--label-2); font-size: var(--t-xs); font-weight: 500; }
.meta span + span::before { content: "·"; margin-right: 10px; }

.sec-title { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin: clamp(48px, 6vw, 72px) 0 18px; }
.sec-title h2 { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); font-weight: 700; letter-spacing: -0.04em; }

.grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 14px; }
.card { display: grid; gap: 14px; text-decoration: none; color: inherit; }
.card .c { aspect-ratio: 4 / 3; transition: transform .5s var(--ease); }
.card:hover .c { transform: scale(0.97) rotate(-1deg); }
.card:nth-child(even):hover .c { transform: scale(0.97) rotate(1deg); }
.card h3 { font-size: 1.25rem; font-weight: 700; letter-spacing: -0.03em; line-height: 1.2; text-wrap: balance; padding-inline: 4px; }
.card .meta { padding-inline: 4px; }
.blog-list { padding-bottom: clamp(72px, 9vw, 128px); }

/* Article */
.article { padding-block: clamp(24px, 4vw, 48px) clamp(64px, 8vw, 112px); }
.crumbs { display: flex; gap: 8px; color: var(--label-2); font-size: var(--t-s); }
.crumbs a { color: var(--label-2); text-decoration: none; }
.article__hero { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 14px; margin-top: 20px; }
.article__hero .c { min-height: clamp(280px, 30vw, 400px); }
.article__hero .c__big { font-size: clamp(4.5rem, 2rem + 8vw, 9rem); }
.article__head { display: flex; flex-direction: column; justify-content: flex-end; gap: 14px; padding: 28px; border-radius: 28px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--hairline); }
.article__head h1 { font-size: clamp(2rem, 1.3rem + 2.4vw, 3rem); font-weight: 700; letter-spacing: -0.045em; line-height: 1.03; text-wrap: balance; }
.article__head .lede { font-size: var(--t-body); }
.article__body { display: grid; grid-template-columns: minmax(0, 42rem) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); margin-top: clamp(24px, 3vw, 40px); }
.toc { position: sticky; top: calc(var(--head-h) + 24px); align-self: start; display: grid; gap: 4px; margin-top: 2em; padding: 18px; border-radius: 22px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--hairline); font-size: var(--t-s); }
.toc b { margin-bottom: 4px; font-weight: 700; }
.toc a { padding: 6px 10px; margin-inline: -10px; border-radius: 10px; color: var(--label-2); text-decoration: none; }
.toc a:hover { color: var(--label); background: rgb(var(--fg) / 0.06); }

.legal-content .example { margin-top: 1.6em; padding: 18px 20px; border-radius: 20px; background: #E8A317; color: #1A1405; font-variant-numeric: tabular-nums; }
.legal-content .example strong { color: #1A1405; }
.kal-table td:last-child, .kal-table th:last-child { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; padding-right: 0; }
.kal-table td:last-child { font-weight: 700; color: var(--label); }
.legal-content .note { margin-top: 0.8em; color: var(--label-2); font-size: var(--t-xs); }
.endnote { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-top: 3em; padding: 22px 24px; border-radius: 24px; background: #0F766E; color: #fff; }
.endnote b { font-size: 1.25rem; letter-spacing: -0.02em; }
.endnote a.go { margin: 0; background: #fff; color: #0B2422; text-decoration: none; }

@media (max-width: 959px) {
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .article__body { grid-template-columns: minmax(0, 1fr); }
  .toc { display: none; }
}
@media (max-width: 720px) {
  .featured, .article__hero { grid-template-columns: minmax(0, 1fr); }
  .featured .c, .article__hero .c { min-height: 240px; }
  .grid { grid-template-columns: minmax(0, 1fr); }
  .search { width: 100%; }
}

/* ---------- Images (every post has its own photo) ---------- */
.ph { position: relative; overflow: hidden; border-radius: 28px; background: var(--surface-2); }
.ph image-slot { position: absolute; inset: 0; }
.ph .c__tag { position: absolute; left: 16px; top: 16px; z-index: 2; pointer-events: none; background: rgb(var(--bg-rgb) / 0.82); color: var(--label); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.card .ph { aspect-ratio: 4 / 3; transition: transform .5s var(--ease); }
.card:hover .ph { transform: scale(0.97) rotate(-1deg); }
.card:nth-child(even):hover .ph { transform: scale(0.97) rotate(1deg); }
.featured .ph { min-height: clamp(300px, 36vw, 440px); transition: transform .5s var(--ease); }
.featured:hover .ph { transform: scale(0.985) rotate(-0.6deg); }

/* ---------- Reading page ---------- */
.progress { position: fixed; left: 0; top: 0; z-index: 70; height: 3px; width: 100%; background: var(--pink); transform-origin: left; transform: scaleX(var(--p, 0)); }
.read { padding-block: clamp(24px, 4vw, 48px) clamp(64px, 8vw, 112px); }
.read__head { max-width: 50rem; margin: 20px auto 0; text-align: center; }
.read__head .chip-kat { display: inline-block; padding: 7px 14px; border-radius: 999px; background: rgba(232, 163, 23, 0.16); color: var(--kunyit-ink); font-size: var(--t-xs); font-weight: 700; text-decoration: none; }
.read__head h1 { margin-top: 18px; font-size: clamp(2.375rem, 1.4rem + 3.8vw, 4.25rem); font-weight: 700; letter-spacing: -0.05em; line-height: 1; text-wrap: balance; }
.read__head .lede { margin: 18px auto 0; max-width: 34em; }
.byline { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 26px; font-size: var(--t-s); }
.byline .avatar { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 50%; background: #0F766E; color: #fff; font-size: var(--t-xs); font-weight: 700; letter-spacing: .02em; }
.read .legal-content .endnote a.go { text-decoration: none; }
.byline b { display: block; font-weight: 600; text-align: left; }
.byline span { display: block; color: var(--label-2); font-size: var(--t-xs); text-align: left; }
.read__hero { position: relative; margin-top: clamp(28px, 4vw, 48px); aspect-ratio: 16 / 8; border-radius: 32px; overflow: hidden; background: var(--surface-2); }
.read__hero image-slot { position: absolute; inset: 0; }
.read__caption { margin-top: 10px; color: var(--label-2); font-size: var(--t-xs); text-align: center; }

.read__body { display: grid; grid-template-columns: 56px minmax(0, 42rem) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); margin-top: clamp(32px, 4vw, 56px); }
.share { position: sticky; top: calc(var(--head-h) + 24px); align-self: start; display: grid; gap: 8px; margin-top: 1.4em; }
.share button, .share a { display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--surface); color: var(--label); box-shadow: inset 0 0 0 1px var(--hairline); cursor: pointer; text-decoration: none; transition: transform .2s var(--ease), background-color .2s; }
.share button:hover, .share a:hover { transform: translateY(-2px); background: var(--surface-2); }
.share svg { width: 18px; height: 18px; }
.share .copied { background: var(--pink); color: var(--on-primary); }
.read .legal-content { font-size: 1.125rem; }
.read .legal-content > p:first-child::first-letter { float: left; margin: 0.06em 0.12em 0 0; font-size: 3.4em; font-weight: 700; line-height: 0.8; color: var(--pink); }
.read .legal-content figure { margin: 2em 0 0; }
.read .legal-content figure .ph { aspect-ratio: 3 / 2; border-radius: 22px; }
.read .legal-content figcaption { margin-top: 10px; color: var(--label-2); font-size: var(--t-xs); }
.read .toc { margin-top: 1.4em; }
.toc .on { color: var(--label); background: rgb(var(--fg) / 0.06); font-weight: 600; }

@media (max-width: 1100px) {
  .read__body { grid-template-columns: 56px minmax(0, 1fr); }
  .read .toc { display: none; }
}
@media (max-width: 720px) {
  .read__body { grid-template-columns: minmax(0, 1fr); }
  .share { position: static; grid-auto-flow: column; justify-content: start; margin-top: 0; }
  .read__hero { aspect-ratio: 4 / 3; border-radius: 22px; margin-inline: calc(-1 * var(--gutter) + 8px); }
  .read__head { text-align: left; }
  .byline { justify-content: flex-start; }
}

/* ---------- Author profile ---------- */
.author { padding-top: clamp(24px, 4vw, 48px); }
.author__card { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: clamp(24px, 4vw, 48px); align-items: center; margin-top: 20px; padding: clamp(24px, 4vw, 40px); border-radius: 32px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--hairline); }
.author__photo { position: relative; width: clamp(120px, 14vw, 168px); aspect-ratio: 1; border-radius: 50%; background: var(--surface-2); box-shadow: 0 0 0 6px var(--black), 0 0 0 7px var(--hairline-2); }
.author__photo image-slot { position: absolute; inset: 0; }
.author .chip-kat { display: inline-block; padding: 7px 14px; border-radius: 999px; background: rgba(232, 163, 23, 0.16); color: var(--kunyit-ink); font-size: var(--t-xs); font-weight: 700; }
.author h1 { margin-top: 12px; font-size: clamp(2.25rem, 1.4rem + 3vw, 3.5rem); font-weight: 700; letter-spacing: -0.05em; line-height: 1; }
.author .lede { margin-top: 12px; max-width: 36em; font-size: var(--t-body); }
.author__links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.pill-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 999px; background: var(--surface-2); color: var(--label); font-size: var(--t-s); font-weight: 600; text-decoration: none; transition: transform .2s var(--ease); }
.pill-link:hover { transform: translateY(-2px); }
.pill-link svg { width: 18px; height: 18px; }
.author__stats { display: grid; gap: 10px; margin: 0; align-self: stretch; align-content: center; }
.author__stats div { min-width: 140px; padding: 16px 18px; border-radius: 20px; background: var(--surface-2); }
.author__stats dt { color: var(--label-2); font-size: var(--t-xs); font-weight: 500; }
.author__stats dd { margin-top: 2px; font-size: 1.75rem; font-weight: 700; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
a.byline-link { color: inherit; text-decoration: none; }
a.byline-link:hover b { color: var(--pink); }
@media (max-width: 959px) {
  .author__card { grid-template-columns: auto minmax(0, 1fr); }
  .author__stats { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .author__card { grid-template-columns: minmax(0, 1fr); }
}

/* Small-screen polish */
@media (max-width: 720px) {
  .blog-head h1 { font-size: clamp(2.5rem, 1.2rem + 7vw, 3.5rem); }
  .featured__text { padding: 22px; }
  .featured__text h2 { font-size: 1.75rem; }
  .chips-row { margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); }
  .read__head h1 { font-size: clamp(2rem, 1.1rem + 5vw, 2.75rem); }
  .read .legal-content { font-size: 1.0625rem; }
  .read__body { gap: 20px; }
  .legal-table th, .legal-table td { padding-right: 10px; }
  .kal-table { min-width: 460px; }
  .endnote { padding: 20px; }
  .endnote .go { width: 100%; justify-content: center; }
  .author__card { padding: 22px; border-radius: 26px; }
  .author__stats { grid-template-columns: 1fr 1fr; }
  .author__stats div { min-width: 0; }
  .sec-title { margin-top: 40px; }
}
@media (min-width: 721px) and (max-width: 1023px) {
  .featured { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .featured__text h2 { font-size: 2rem; }
  .read__body { grid-template-columns: 48px minmax(0, 1fr); gap: 28px; }
  .author__card { grid-template-columns: auto minmax(0, 1fr); }
}

/* ---------- Generated blog (scripts/build-blog.mjs): real images, search, fallbacks ---------- */
.ph > img, .ph > picture > img, .read__hero img, .author__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.read__figure { margin: 0; }
.read__hero .c { position: absolute; inset: 0; justify-content: flex-end; border-radius: inherit; padding: clamp(22px, 3vw, 36px); }
.read__hero .c__big { font-size: clamp(4.5rem, 2rem + 8vw, 9rem); }
.author__photo { overflow: hidden; }
.author__initials { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 50%; background: #0F766E; color: #fff; font-size: clamp(2.5rem, 1.5rem + 3vw, 3.5rem); font-weight: 700; letter-spacing: -0.03em; }
.byline .avatar { position: relative; overflow: hidden; }
.byline .avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.search input { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; background: transparent; color: var(--label); font: inherit; outline: none; -webkit-appearance: none; appearance: none; }
.search input::placeholder { color: var(--label-3); opacity: 1; }
.search:focus-within { box-shadow: inset 0 0 0 2px var(--pink); }
.blog-list [hidden] { display: none !important; }
.blog-empty { padding: 48px 0; color: var(--label-2); text-align: center; }
.featured + .blog-empty { margin-top: 14px; }
.read__disclaimer { margin-top: 2.4em; }
.c[role="img"] .c__big small { max-width: 14em; }
/* Phones: keep all three calorie-table columns on screen (the kcal column matters most). */
@media (max-width: 720px) {
  .read .kal-table { min-width: 0; font-size: var(--t-xs); }
  .read .kal-table th, .read .kal-table td { padding-right: 8px; }
  .read .kal-table td:first-child { width: 46%; }
}
@media (max-width: 600px) { .author__stats dd { font-size: 1.375rem; white-space: nowrap; } }

/* ---------- Pages, categories and search (scripts/build-blog.mjs) ---------- */
.pager { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: clamp(40px, 5vw, 64px); }
.pager a, .pager span { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 44px; padding: 0 14px; border-radius: 999px; background: var(--surface); color: var(--label); box-shadow: inset 0 0 0 1px var(--hairline); font-size: var(--t-s); font-weight: 600; font-variant-numeric: tabular-nums; text-decoration: none; transition: transform .2s var(--ease); }
.pager a:hover { transform: translateY(-2px); }
.pager [aria-current="page"] { background: var(--label); color: var(--black); box-shadow: none; }
.pager .gap { min-width: 20px; padding: 0; background: none; box-shadow: none; color: var(--label-2); }
.chips-row a[aria-current="page"] { background: var(--label); color: var(--black); box-shadow: none; }
.blog-head--kategori .crumbs { margin-bottom: 18px; }
.blog-results .sec-title { margin-top: 0; }