/* Eco-Friendly Crematoria (templates/core/designs/sf_crematorium/), in the new design. Headings, text, spacing and the
   registry table come from the site's shared pieces (css/designs/tables.css: .st-sec, .st-h2, .st-lead, the table); this
   file draws the page's own blocks: the intro with its note and points, the comparison, the key fact, the district tiles
   and the arched gallery. Cream page, deep green, sand cards; the traditional method in a muted brick red. */
.crema-page { --cr-deep: #0a2e1a; --cr-green: #1a472a; --cr-sand: #f2ede1; --cr-brick: #b4442f; --cr-brick-soft: #f6e3dd; --cr-ink: #1f2a22; --cr-muted: #4b5563;
    background: #f9f6ef; }
.crema-page .st-sec { padding: 84px 0; }
.crema-page .st-sec + .st-sec { padding-top: 0; }

/* intro: the text (61.8) beside the note (38.2), the note as tall as the text: no gap under it, and it stays put */
.cr-intro-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 52px; align-items: stretch; }
.cr-intro-grid.has-note { grid-template-columns: minmax(0, 61.8fr) minmax(0, 38.2fr); }
.cr-prose { margin-top: 20px; }   /* the text fills its column up to the note, no gap */
.cr-prose p { margin: 0 0 16px; font-size: 16px; line-height: 1.75; color: #374151; }
.cr-prose p.cr-first { font-size: 18px; line-height: 1.7; color: var(--cr-ink); }
.cr-prose p:last-child { margin-bottom: 0; }
.cr-prose strong { color: var(--cr-deep); }
.cr-note { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; min-height: 100%; padding: 40px; border-radius: 14px;
    background: var(--cr-deep); color: #fff; box-sizing: border-box; isolation: isolate; }
.cr-note::after { content: ''; position: absolute; z-index: -1; right: -90px; top: -90px; width: 320px; height: 320px; border-radius: 50%;
    background: radial-gradient(circle, rgba(143, 201, 163, .22), transparent 70%); }
/* a large faint leaf fills the panel's upper part, so it never reads as empty */
.cr-note-mark { position: absolute; z-index: -1; right: -24px; top: 20px; width: min(78%, 340px); height: auto; color: rgba(143, 201, 163, .16);
    transition: transform 1.2s cubic-bezier(.16, 1, .3, 1); }
.cr-note:hover .cr-note-mark { transform: rotate(-6deg) scale(1.04); }
.cr-note-icon { position: absolute; top: 40px; left: 40px; display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 14px;
    background: rgba(255, 255, 255, .1); color: #f1c40f; }
.cr-note h3 { margin: 0 0 12px; font-size: clamp(22px, 2vw, 28px); font-weight: 800; line-height: 1.2; letter-spacing: -.02em; color: #fff; }
.cr-note p { margin: 0; font-size: 16px; line-height: 1.7; color: rgba(255, 255, 255, .82); }
.cr-note .cr-note-by { margin-top: 10px; font-size: 14px; color: rgba(255, 255, 255, .6); }

/* the design points: deep green tiles at rest; under the pointer a soft gold light follows it and the tile lifts */
.cr-h3 { margin-top: 56px !important; }
.cr-points { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 20px 0 0; padding: 0; list-style: none; }
.cr-point { position: relative; overflow: hidden; padding: 28px; border-radius: 12px; background: var(--cr-deep); outline: none; isolation: isolate;
    transition: transform 250ms cubic-bezier(.16, 1, .3, 1), box-shadow 250ms; }
.cr-point::before { content: ''; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity 250ms;
    background: radial-gradient(260px circle at var(--x, 50%) var(--y, 50%), rgba(241, 196, 15, .22), transparent 70%); }
.cr-point-n { display: block; font-size: 13px; font-weight: 700; letter-spacing: .04em; color: #f1c40f; font-variant-numeric: tabular-nums; }
.cr-point h4 { margin: 28px 0 8px; font-size: 19px; font-weight: 700; line-height: 1.3; color: #fff; }
.cr-point p { margin: 0; font-size: 15px; line-height: 1.65; color: rgba(255, 255, 255, .82); }
.cr-point:hover, .cr-point:focus-visible { transform: translateY(-4px); box-shadow: 0 24px 48px -28px rgba(10, 46, 26, .6); }
.cr-point:hover::before, .cr-point:focus-visible::before { opacity: 1; }
.cr-point:focus-visible { outline: 2px solid #f1c40f; outline-offset: 2px; }

/* the comparison */
.cr-compare-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.cr-switch { display: inline-flex; gap: 4px; padding: 5px; border-radius: 999px; background: var(--cr-sand); }
.cr-switch button { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border: 0; border-radius: 999px; background: transparent; color: #2b3a30;
    font: 600 14px/1 'Plus Jakarta Sans', sans-serif; cursor: pointer; transition: background-color 150ms, color 150ms; }
.cr-switch button:hover { background: rgba(255, 255, 255, .7); }
.cr-switch button[aria-pressed="true"] { background: var(--cr-deep); color: #fff; }
.cr-switch button:focus-visible { outline: 2px solid var(--cr-green); outline-offset: 2px; }
.cr-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; flex: none; }
.cr-dot.is-a { background: var(--cr-brick); }
.cr-dot.is-b { background: var(--cr-green); }
.cr-switch button[aria-pressed="true"] .cr-dot.is-b { background: #8fc9a3; }
.cr-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 32px; }
.cr-metric { display: flex; flex-direction: column; gap: 18px; padding: 28px; border-radius: 12px; background: #fff; box-shadow: 0 0 0 1px rgba(10, 46, 26, .08); outline: none;
    transition: transform 250ms cubic-bezier(.16, 1, .3, 1), box-shadow 250ms; }
.cr-metric:hover, .cr-metric:focus-visible { transform: translateY(-4px); box-shadow: 0 0 0 1px rgba(10, 46, 26, .12), 0 24px 48px -30px rgba(10, 46, 26, .5); }
.cr-metric header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cr-metric h3 { margin: 0; font-size: 18px; font-weight: 700; color: var(--cr-deep); }
.cr-less { flex: none; padding: 5px 10px; border-radius: 999px; background: #e3ece1; color: var(--cr-green); font-size: 13px; font-weight: 700; }
.cr-bar { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: 'name value' 'track track'; gap: 6px 12px; align-items: baseline;
    transition: opacity 200ms; }
.cr-bar-name { grid-area: name; display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--cr-muted); }
.cr-bar b { grid-area: value; font-size: 16px; font-weight: 700; color: var(--cr-ink); font-variant-numeric: tabular-nums; }
.cr-track { grid-area: track; display: block; height: 12px; border-radius: 999px; background: #f4efe4; overflow: hidden; }
.cr-track i { display: block; height: 100%; width: var(--w); border-radius: 999px; transform-origin: left; transform: scaleX(0);
    transition: transform 900ms cubic-bezier(.16, 1, .3, 1); }
.cr-bar.is-a .cr-track i { background: var(--cr-brick); }
.cr-bar.is-b .cr-track i { background: var(--cr-green); transition-delay: 150ms; }
.cr-compare.is-in .cr-track i { transform: none; }
.cr-metric:hover .cr-track, .cr-metric:focus-visible .cr-track { height: 14px; }
.cr-says { display: grid; gap: 12px; }
.cr-says p { margin: 0; padding: 14px 16px; border-radius: 10px; font-size: 15px; line-height: 1.55; transition: opacity 200ms; }
.cr-says .cr-bar-name { display: flex; margin-bottom: 4px; }
.cr-says p.is-a { background: var(--cr-brick-soft); color: #5c2a1f; }
.cr-says p.is-b { background: #e3ece1; color: var(--cr-deep); }
/* one method lit, the other set back */
.cr-compare[data-show="a"] :is(.cr-bar.is-b, .cr-says .is-b), .cr-compare[data-show="b"] :is(.cr-bar.is-a, .cr-says .is-a) { opacity: .28; }

/* the key fact: the figures large in a deep green column (38.2) beside the sentence on sand (61.8), one card */
.cr-fact-sec { padding-bottom: 72px !important; }
.cr-fact { display: grid; grid-template-columns: minmax(0, 1fr); border-radius: 14px; overflow: hidden; background: var(--cr-sand); }
.cr-fact.has-figs { grid-template-columns: minmax(0, 38.2fr) minmax(0, 61.8fr); }
.cr-fact-figs { display: flex; flex-direction: column; justify-content: center; gap: 18px; padding: 40px 44px; background: var(--cr-deep); }
.cr-fact-figs b { display: block; font-size: clamp(34px, 3.4vw, 52px); font-weight: 800; line-height: 1; letter-spacing: -.03em; color: #fff; font-variant-numeric: tabular-nums; }
.cr-fact-figs b:nth-child(2n) { color: #f1c40f; }
.cr-fact-text { display: flex; flex-direction: column; justify-content: center; padding: 40px 44px; }
.cr-fact-text p { margin: 0; font-size: clamp(18px, 1.6vw, 22px); font-weight: 500; line-height: 1.6; color: var(--cr-ink); }
.cr-fact-text p + p { margin-top: 12px; }
.cr-fact-text strong { color: var(--cr-green); font-weight: 800; }

/* tiles: all alike — a mark, the count, the place and a bar of its share of the total; pointing at a district lights its
   row in the registry */
.cr-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-top: 28px; }
.cr-tile { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 22px 24px 20px; border-radius: 12px; background: var(--cr-sand); color: var(--cr-ink);
    text-decoration: none; overflow: hidden; transition: transform 200ms cubic-bezier(.16, 1, .3, 1), box-shadow 200ms; }
.cr-tile-mark { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; margin-bottom: 12px; border-radius: 10px; background: #fff; color: var(--cr-green); }
.cr-tile b { font-size: 40px; font-weight: 800; line-height: 1; letter-spacing: -.03em; color: var(--cr-deep); font-variant-numeric: tabular-nums; }
.cr-tile-name { font-size: 14px; font-weight: 600; color: var(--cr-muted); }
.cr-share { display: block; height: 6px; margin-top: 12px; border-radius: 999px; background: rgba(10, 46, 26, .08); overflow: hidden; }
.cr-share i { display: block; width: var(--w); height: 100%; border-radius: 999px; background: var(--cr-green); }
.cr-tile.is-total .cr-share i { background: #b8900f; }
a.cr-tile:hover, a.cr-tile:focus-visible { transform: translateY(-3px); box-shadow: 0 18px 36px -24px rgba(10, 46, 26, .5); outline: none; }
html body .crema-page .st-table tr.cr-lit td { background: #fbf3d9 !important; }
html body .crema-page .st-table tr.cr-flash td { animation: cr-flash 1.4s cubic-bezier(.4, 0, .2, 1); }
@keyframes cr-flash { 0%, 40% { background: #f7e6a6; } 100% { background: transparent; } }
.crema-page .cr-registry { scroll-margin-top: 90px; }

/* gallery: the old arches — a coloured arch (green, gold, green…) with a 20px frame round its photograph, cut to the same
   arch but shorter; the arch lifts and the photo slowly zooms under the pointer */
.cr-arches { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 20px; margin-top: 32px; }
.cr-arch { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 20px 20px 28px; border-radius: 999px 999px 10px 10px; background: #e3ece1;
    transition: transform 250ms cubic-bezier(.16, 1, .3, 1); }
.cr-arch:nth-child(3n + 2) { background: #f1c40f; }
.cr-arch:hover { transform: translateY(-8px); }
.cr-arch-photo { margin: 0 0 12px; aspect-ratio: 4 / 3.4; border-radius: 999px 999px 6px 6px; overflow: hidden; background: rgba(10, 46, 26, .1); isolation: isolate; }
.cr-arch-photo img { display: block; width: 100%; height: 100%; object-fit: cover; cursor: zoom-in; transform: scale(1.02); transition: transform .8s cubic-bezier(.16, 1, .3, 1); }
.cr-arch:hover .cr-arch-photo img { transform: scale(1.08); }
.cr-arch figcaption { padding: 0 12px; }
.cr-arch figcaption span { display: block; margin-bottom: 4px; font-size: 13px; font-weight: 600; color: #2d6a4f; }
.cr-arch figcaption strong { display: block; font-size: 20px; font-weight: 700; line-height: 1.25; color: var(--cr-deep); text-wrap: balance; }
.cr-arch figcaption p { margin: 6px 0 0; font-size: 14px; line-height: 1.6; color: var(--cr-deep); }

@media (max-width: 1100px) { .cr-metrics { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 900px) {
    .crema-page .st-sec { padding: 52px 0; }
    .cr-intro-grid.has-note, .cr-points { grid-template-columns: minmax(0, 1fr); }
    .cr-note { min-height: 260px; padding: 32px; }
    .cr-note-icon { top: 32px; left: 32px; }
    .cr-fact.has-figs { grid-template-columns: minmax(0, 1fr); }
    .cr-fact-figs { flex-direction: row; flex-wrap: wrap; gap: 12px 28px; padding: 28px 24px; }
    .cr-fact-text { padding: 28px 24px; }
    .cr-arches { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
}
@media (max-width: 480px) { .cr-arches { grid-template-columns: minmax(0, 1fr); } .cr-switch { width: 100%; } .cr-switch button { flex: 1; justify-content: center; padding: 10px 8px; } }
@media (prefers-reduced-motion: reduce) {
    .cr-point, .cr-metric, .cr-tile, .cr-arch, .cr-arch-photo img, .cr-track i { transition: none; }
    .cr-arch:hover { transform: none; }
    .cr-track i { transform: none; }
    html body .crema-page .st-table tr.cr-flash td { animation: none; }
}

/* the intro's subheading (the part of its title after a dash, e.g. "Ka Khnap Thangbru"), as on Nokrek: a gold dash, then the words */
.cr-title-sub { display: flex; align-items: center; gap: 12px; margin: 12px 0 0; font-size: 18px; font-weight: 600; color: #2d6a4f; }
.cr-title-sub::before { content: ""; width: 32px; height: 2px; flex: none; background: #f1c40f; }
@media (max-width: 600px) { .cr-title-sub { font-size: 16px; } }