/*
 * Dhiislam homepage — 2026 design.
 * Desktop sizes are in units of the 1892pt desktop artboard (--u), mobile sizes in
 * units of the 873pt (390px) mobile artboard, so the page scales 1:1 with the design.
 */

@font-face {
  font-family: "H26 Sangu";
  src: url("/assets/fonts/SanguSuruhee-Regular.ttf") format("truetype");
  font-display: swap;
}
@font-face {
  font-family: "H26 Faruma";
  src: url("/assets/fonts/Faruma.ttf") format("truetype");
  font-display: swap;
}
@font-face {
  font-family: "H26 Typewriter";
  src: url("/assets/fonts/MV_Typewriter_Regular.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "H26 Typewriter";
  src: url("/assets/fonts/MV_Typewriter_SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "H26 Typewriter";
  src: url("/assets/fonts/MV_Typewriter_Bold.ttf") format("truetype");
  font-weight: 700;
  font-display: swap;
}

body:has(> .h26) { margin: 0; background: #fff; }

.h26 {
  --u: calc(clamp(1000px, 100vw, 1892px) / 1892);
  --cream: #fbfae7;
  --teal: #50b8ba;
  --teal-head: #2f858e;
  --ink: #36444a;
  --body: #494949;
  --muted: #939393;
  --lime: #cbd829;
  --mint-soft: #91cecb;
  --placeholder: linear-gradient(90deg, #dad4bb 0%, #e5e3d5 100%);
  --grad-header: linear-gradient(90deg, #c7e1b3 0%, #91ceb6 50%, #5bbcba 100%);
  --grad-chip: linear-gradient(90deg, #c7e1b3 0%, #5bbcba 100%);
  --grad-pill: linear-gradient(90deg, #cfe5b4 0%, #b3dbb2 100%);
  --font-head: "H26 Sangu", "Waheed", "MV Waheed", sans-serif;
  --font-text: "H26 Typewriter", "MV Typewriter", "Faruma", sans-serif;
  --font-label: "H26 Faruma", "Faruma", "H26 Typewriter", sans-serif;
  --font-latin: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --wrap: calc(var(--u) * 1640);
  --ease: cubic-bezier(.2, .7, .2, 1);

  direction: rtl;
  background: #fff;
  color: var(--ink);
  font-family: var(--font-text);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
.h26 *,
.h26 *::before,
.h26 *::after { box-sizing: border-box; }
:where(.h26) :where(a) { color: inherit; text-decoration: none; }
:where(.h26) :where(img) { display: block; max-width: 100%; }
:where(.h26) :where(h1, h2, h3, p, ul) { margin: 0; padding: 0; }
:where(.h26) :where(ul) { list-style: none; }
:where(.h26) :where(button) { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.h26 :focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; }

.h26-wrap { width: var(--wrap); margin-inline: auto; }
.h26-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Shared bits ---------- */

.h26-arrow { display: inline-block; flex: none; width: calc(var(--u) * 17); height: calc(var(--u) * 14); color: var(--lime); }
.h26-arrow svg, .h26-icon svg { display: block; width: 100%; height: 100%; }

.h26-stars {
  display: block;
  height: var(--star, calc(var(--u) * 57));
  color: #ecebd6;
  background: currentColor;
  -webkit-mask: url("/assets/home/h26-star.svg") 0 50% / var(--star, calc(var(--u) * 57)) var(--star, calc(var(--u) * 57)) space no-repeat;
  mask: url("/assets/home/h26-star.svg") 0 50% / var(--star, calc(var(--u) * 57)) var(--star, calc(var(--u) * 57)) space no-repeat;
}
.h26-stars--5 { width: calc(var(--star) * 5); flex: none; -webkit-mask-repeat: repeat-x; mask-repeat: repeat-x; }

.h26-orn-head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--u) * 48);
}
.h26-orn-head h2 {
  font-family: var(--font-head);
  font-weight: 400;
  font-size: calc(var(--u) * 68);
  line-height: 1.2;
  color: var(--teal-head);
  white-space: nowrap;
}

.h26-date {
  display: block;
  font-family: var(--font-text);
  font-weight: 600;
  font-size: max(11px, calc(var(--u) * 17));
  line-height: 1.5;
  color: var(--muted);
}

.h26-media {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--placeholder);
}
.h26-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s var(--ease);
}
a:hover > .h26-media img,
a:focus-visible > .h26-media img { transform: scale(1.045); }

.h26-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.h26-card { display: block; }
.h26-card-title {
  margin-top: calc(var(--u) * 16);
  font-weight: 600;
  font-size: calc(var(--u) * 29);
  line-height: 1.62;
  color: var(--ink);
  transition: color .2s;
}
.h26-card:hover .h26-card-title { color: var(--teal-head); }
.h26-card .h26-media { aspect-ratio: 362 / 254; }

.h26-pill {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--u) * 12);
  height: max(24px, calc(var(--u) * 30));
  padding-inline: calc(var(--u) * 16) calc(var(--u) * 14);
  border-radius: 999px;
  background: var(--grad-pill);
  color: #fff;
  font-family: var(--font-label);
  font-size: max(11px, calc(var(--u) * 14));
  line-height: 1;
  white-space: nowrap;
  transition: filter .2s, transform .2s;
}
.h26-pill .h26-arrow { width: calc(var(--u) * 12); height: calc(var(--u) * 10); color: #fff; order: 2; }
.h26-pill:hover { filter: brightness(.95) saturate(1.2); transform: translateX(-2px); }
.h26-pill--lg { height: max(30px, calc(var(--u) * 37)); padding-inline: calc(var(--u) * 26) calc(var(--u) * 22); font-size: max(12px, calc(var(--u) * 16)); }

.h26-grid-4 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: calc(var(--u) * 63);
  row-gap: calc(var(--u) * 52);
}

/* ---------- Header ---------- */

.h26-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--grad-header);
  transition: box-shadow .3s;
}
.h26-header.is-stuck { box-shadow: 0 6px 24px rgba(31, 67, 74, .14); }
.h26-header-inner {
  width: calc(var(--u) * 1710);
  height: calc(var(--u) * 144);
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 60);
}
.h26-logo { flex: none; display: block; width: calc(var(--u) * 215); }
.h26-logo img { width: 100%; height: auto; }

.h26-nav { flex: 1; display: flex; justify-content: flex-start; padding-inline-start: calc(var(--u) * 40); }
.h26-nav > ul { display: flex; align-items: center; }
.h26-nav-item { position: relative; display: flex; align-items: center; }
.h26-nav-item + .h26-nav-item::before {
  content: "";
  width: calc(var(--u) * 10);
  height: calc(var(--u) * 10);
  margin-inline: calc(var(--u) * 40);
  border-radius: 50%;
  background: rgba(255, 255, 255, .45);
}
.h26-nav-link {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 12);
  padding-block: calc(var(--u) * 20);
  font-family: var(--font-head);
  font-size: calc(var(--u) * 50);
  line-height: 1;
  color: #fff;
  white-space: nowrap;
  transition: opacity .2s;
}
.h26-nav-link:hover { opacity: .82; }
.h26-chev { width: calc(var(--u) * 14); height: calc(var(--u) * 16); color: var(--lime); transition: transform .25s var(--ease); }
.h26-nav-item:hover .h26-chev,
.h26-nav-item:focus-within .h26-chev { transform: rotate(180deg); }

.h26-sub {
  position: absolute;
  top: 100%;
  right: calc(var(--u) * -24);
  min-width: calc(var(--u) * 300);
  padding: calc(var(--u) * 14);
  border-radius: calc(var(--u) * 22);
  background: #fff;
  box-shadow: 0 18px 40px rgba(31, 67, 74, .18);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity .2s, transform .25s var(--ease), visibility .2s;
}
.h26-nav-item:hover > .h26-sub,
.h26-nav-item:focus-within > .h26-sub { opacity: 1; visibility: visible; transform: none; }
.h26-sub a {
  display: block;
  padding: calc(var(--u) * 12) calc(var(--u) * 18);
  border-radius: calc(var(--u) * 12);
  font-family: var(--font-text);
  font-weight: 600;
  font-size: max(14px, calc(var(--u) * 22));
  line-height: 1.6;
  color: var(--ink);
}
.h26-sub a:hover { background: var(--cream); color: var(--teal-head); }

.h26-hbtn { flex: none; display: grid; place-items: center; width: calc(var(--u) * 44); height: calc(var(--u) * 44); color: #fff; }
.h26-hbtn svg { width: calc(var(--u) * 28); height: calc(var(--u) * 28); }
.h26-search-btn { margin-inline-start: auto; }
.h26-burger { display: none; }

.h26-search {
  position: absolute;
  inset-inline: 0;
  top: 100%;
  padding-block: calc(var(--u) * 22);
  background: rgba(255, 255, 255, .97);
  box-shadow: 0 16px 30px rgba(31, 67, 74, .12);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .2s, transform .25s var(--ease), visibility .2s;
}
.h26-search.is-open { opacity: 1; visibility: visible; transform: none; }
.h26-search form { display: flex; gap: calc(var(--u) * 16); }
.h26-search input {
  flex: 1;
  height: calc(var(--u) * 64);
  padding-inline: calc(var(--u) * 28);
  border: 2px solid #e4ead8;
  border-radius: 999px;
  font: 600 calc(var(--u) * 24) var(--font-text);
  color: var(--ink);
  background: var(--cream);
  outline: none;
}
.h26-search input:focus { border-color: var(--teal); }
.h26-search button {
  padding-inline: calc(var(--u) * 40);
  border-radius: 999px;
  background: var(--teal);
  color: #fff;
  font: 400 calc(var(--u) * 30) var(--font-head);
}

.h26-mnav { display: none; }

/* ---------- Drawer (mobile menu) ---------- */

.h26-drawer { position: fixed; inset: 0; z-index: 90; visibility: hidden; }
.h26-drawer.is-open { visibility: visible; }
.h26-drawer-scrim { position: absolute; inset: 0; width: 100%; background: rgba(20, 40, 44, .45); opacity: 0; transition: opacity .3s; }
.h26-drawer.is-open .h26-drawer-scrim { opacity: 1; }
.h26-drawer-panel {
  position: absolute;
  inset-block: 0;
  right: 0;
  width: min(86vw, 360px);
  display: flex;
  flex-direction: column;
  background: var(--cream);
  transform: translateX(100%);
  transition: transform .35s var(--ease);
  overflow-y: auto;
}
.h26-drawer.is-open .h26-drawer-panel { transform: none; }
.h26-drawer-top { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; background: var(--grad-header); }
.h26-drawer-top img { width: 120px; }
.h26-drawer-close { width: 40px; height: 40px; display: grid; place-items: center; color: #fff; }
.h26-drawer-close svg { width: 24px; height: 24px; }
.h26-drawer-nav { padding: 12px 20px 32px; }
.h26-drawer-nav > li { border-bottom: 1px solid #ecebd6; }
.h26-drawer-nav a,
.h26-drawer-nav summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 4px;
  font: 400 22px/1.3 var(--font-head);
  color: var(--teal-head);
  cursor: pointer;
  list-style: none;
}
.h26-drawer-nav summary::-webkit-details-marker { display: none; }
.h26-drawer-nav summary .h26-chev { width: 12px; height: 14px; }
.h26-drawer-nav details[open] summary .h26-chev { transform: rotate(180deg); }
.h26-drawer-nav details ul { padding: 0 14px 10px; }
.h26-drawer-nav details a { padding: 9px 4px; font: 600 16px/1.6 var(--font-text); color: var(--ink); }

/* ---------- Hero ---------- */

.h26-hero { background: var(--cream); padding-block: calc(var(--u) * 114) calc(var(--u) * 52); }
.h26-hero .h26-wrap { width: calc(var(--u) * 1600); }
.h26-lead {
  display: grid;
  grid-template-columns: calc(var(--u) * 662) calc(var(--u) * 873);
  column-gap: calc(var(--u) * 65);
  align-items: start;
}
.h26-lead .h26-media { grid-column: 2; grid-row: 1; aspect-ratio: 873 / 555; background: #1f434a; }
.h26-lead-copy { grid-column: 1; grid-row: 1; padding-top: calc(var(--u) * 4); }
.h26-lead-title {
  font-weight: 600;
  font-size: calc(var(--u) * 52);
  line-height: 1.635;
  color: var(--ink);
  transition: color .2s;
}
.h26-lead:hover .h26-lead-title { color: var(--teal-head); }
.h26-lead-excerpt {
  margin-top: calc(var(--u) * 24);
  font-weight: 400;
  font-size: calc(var(--u) * 25);
  line-height: 2.04;
  color: var(--body);
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.h26-lead .h26-date { margin-top: calc(var(--u) * 10); font-size: max(11px, calc(var(--u) * 16)); }

.h26-hero .h26-stars { margin-block: calc(var(--u) * 44) calc(var(--u) * 56); }

.h26-hero-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: calc(var(--u) * 84);
}
.h26-hero-grid .h26-card:nth-child(n + 4) { display: none; }
.h26-hero-grid .h26-media { aspect-ratio: 478 / 335; }
.h26-hero-grid .h26-card-title { margin-top: calc(var(--u) * 15); font-size: calc(var(--u) * 38); line-height: 1.63; }
.h26-hero-grid .h26-date { font-size: max(11.5px, calc(var(--u) * 22)); }

/* ---------- Slider (report) ---------- */

.h26-slider-sec {
  --star: calc(var(--u) * 75);
  padding-block: calc(var(--u) * 40) calc(var(--u) * 47);
  background: linear-gradient(180deg, #c7e1b3 0%, #95d0b6 52%, #62bfb8 100%);
}
.h26-slider-sec .h26-stars { color: #a0d5ba; }
.h26-slider-sec .h26-orn-head { gap: calc(var(--u) * 50); }
.h26-slider-sec .h26-orn-head h2 { font-size: calc(var(--u) * 84); }

.h26-slider { margin-top: calc(var(--u) * 50); }
.h26-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - var(--gap) * (var(--per) - 1)) / var(--per));
  gap: var(--gap);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
}
.h26-track::-webkit-scrollbar { display: none; }
.h26-track > * { scroll-snap-align: start; }
.h26-slider .h26-track { --per: 3; --gap: calc(var(--u) * 65); }

.h26-pcard .h26-media { aspect-ratio: 503 / 622; background: #fff; }
.h26-pcard .h26-card-title { margin-top: calc(var(--u) * 28); font-size: calc(var(--u) * 39); line-height: 1.64; }
.h26-pcard .h26-date { margin-top: calc(var(--u) * 10); font-size: max(11.5px, calc(var(--u) * 23)); color: #fff; }
.h26-pcard:hover .h26-card-title { color: #1f434a; }

.h26-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--u) * 19);
  margin-top: calc(var(--u) * 40);
}
.h26-bars { display: flex; gap: calc(var(--u) * 10); }
.h26-bar {
  width: calc(var(--u) * 120);
  height: calc(var(--u) * 14);
  border-radius: 999px;
  background: #a8d8b6;
  transition: background .3s, transform .3s;
}
.h26-bar:hover { transform: scaleY(1.25); }
.h26-bar.is-active { background: #7fdcab; }
.h26-btns { display: flex; gap: calc(var(--u) * 14); }
.h26-round {
  display: grid;
  place-items: center;
  width: calc(var(--u) * 57);
  height: calc(var(--u) * 57);
  border-radius: 50%;
  background: #a8d8b6;
  color: #fff;
  transition: background .2s, transform .2s, opacity .2s;
}
.h26-round .h26-arrow { width: calc(var(--u) * 22); height: calc(var(--u) * 18); color: #fff; }
.h26-round[data-dir="prev"] .h26-arrow { transform: scaleX(-1); }
.h26-round:hover { background: #8fd3ad; transform: scale(1.06); }
.h26-round:disabled { opacity: .5; cursor: default; transform: none; }

/* ---------- Section headers ---------- */

.h26-sec { padding-block: calc(var(--u) * 50) calc(var(--u) * 30); }
.h26-sec-head {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 18);
  margin-bottom: calc(var(--u) * 46);
}
.h26-sec-head h2 {
  font-family: var(--font-head);
  font-weight: 400;
  font-size: calc(var(--u) * 60);
  line-height: 1.2;
  color: var(--teal-head);
  white-space: nowrap;
}
.h26-sec-head h2 a:hover { color: #1f6d75; }
.h26-sec-line { flex: 1; height: calc(var(--u) * 4); border-radius: 4px; background: #f4f5de; }
.h26-sec-head--plain { gap: calc(var(--u) * 20); }

.h26-latest { padding-top: calc(var(--u) * 30); padding-bottom: calc(var(--u) * 90); }
.h26-latest .h26-card:nth-child(n + 9) { display: none; }

/* ---------- Tags + spotlight ---------- */

.h26-tags {
  --star: calc(var(--u) * 62);
  width: calc(var(--u) * 1635);
  margin: 0 auto calc(var(--u) * 20);
  padding-block: calc(var(--u) * 71) calc(var(--u) * 60);
  border-radius: calc(var(--u) * 56);
  background: var(--cream);
}
.h26-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: calc(var(--u) * 20) calc(var(--u) * 30);
  width: calc(var(--u) * 1500);
  margin: calc(var(--u) * 38) auto 0;
}
.h26-chip {
  display: inline-flex;
  align-items: center;
  gap: .4em;
  height: max(28px, calc(var(--u) * 41));
  padding-inline: calc(var(--u) * 22);
  border-radius: 999px;
  background: var(--grad-chip);
  color: #fff;
  font-weight: 700;
  font-size: max(12px, calc(var(--u) * 19));
  line-height: 1;
  white-space: nowrap;
  box-shadow: 0 0 0 rgba(80, 184, 186, 0);
  transition: transform .2s var(--ease), box-shadow .2s;
}
.h26-chip:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(80, 184, 186, .35); }
.h26-chips .h26-chip.is-active { background: var(--teal-head); box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--teal-head); }
.h26-chip-hash { font-family: var(--font-latin); font-weight: 600; }

.h26-divider { width: calc(var(--u) * 1318); height: calc(var(--u) * 5); margin: calc(var(--u) * 54) auto; border-radius: 9px; background: #fff; }

.h26-spot {
  display: grid;
  grid-template-columns: calc(var(--u) * 1012) calc(var(--u) * 464);
  column-gap: calc(var(--u) * 55);
  justify-content: center;
  align-items: start;
}
@media (min-width: 1000px) {
  .h26-spot:not(:has(.h26-ad)) { grid-template-columns: calc(var(--u) * 1012); }
}
.h26-ad {
  grid-column: 2;
  grid-row: 1;
  align-self: stretch;
  display: grid;
  place-items: center;
  min-height: calc(var(--u) * 953);
  background: #fff;
  overflow: hidden;
}
.h26-ad img { width: 100%; height: auto; }
.h26-ad-sample {
  position: relative;
  align-self: stretch;
  justify-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(var(--u) * 22);
  padding: calc(var(--u) * 60) calc(var(--u) * 48);
  text-align: center;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .92), rgba(255, 255, 255, .97)),
    linear-gradient(160deg, #e9f5ee 0%, #fbfae7 100%);
  overflow: hidden;
}
.h26-ad-sample::before {
  content: "";
  position: absolute;
  inset: calc(var(--u) * 18);
  border: 2px dashed #e4e7cf;
  pointer-events: none;
  transition: border-color .3s;
}
.h26-ad-sample:hover::before { border-color: var(--teal); }
.h26-ad-label {
  position: absolute;
  top: calc(var(--u) * 36);
  left: 0;
  right: 0;
  font: 600 max(10px, calc(var(--u) * 13)) / 1 var(--font-latin);
  letter-spacing: .24em;
  color: #b9b9a8;
}
.h26-ad-mark {
  width: calc(var(--u) * 130);
  height: calc(var(--u) * 130);
  background: linear-gradient(135deg, #c7e1b3, #5bbcba);
  -webkit-mask: url("/assets/home/h26-star.svg") center / contain no-repeat;
  mask: url("/assets/home/h26-star.svg") center / contain no-repeat;
  transition: transform .6s var(--ease);
}
.h26-ad-sample:hover .h26-ad-mark { transform: rotate(45deg); }
.h26-ad-sample strong {
  font-family: var(--font-head);
  font-weight: 400;
  font-size: calc(var(--u) * 54);
  line-height: 1.2;
  color: var(--teal-head);
}
.h26-ad-text {
  max-width: calc(var(--u) * 300);
  font-weight: 600;
  font-size: max(12px, calc(var(--u) * 21));
  line-height: 1.8;
  color: var(--body);
}
.h26-ad-size { font: 600 max(11px, calc(var(--u) * 16)) / 1 var(--font-latin); letter-spacing: .08em; color: #a8a897; direction: ltr; }
.h26-ad-sample .h26-pill { margin-top: calc(var(--u) * 10); }

.h26-spot-main { grid-column: 1; grid-row: 1; position: relative; transition: opacity .16s var(--ease); }
.h26-spot-main.is-swapping { opacity: 0; }
.h26-spot-hero {
  position: relative;
  display: block;
  height: calc(var(--u) * 432);
  border-radius: calc(var(--u) * 20);
}
.h26-spot-hero.h26-media { background: #1f434a; }
/* When a tag has few posts the ad column is taller, so the banner grows and the chip stays pinned to its bottom. */
@media (min-width: 1000px) {
  .h26-spot-main { display: flex; flex-direction: column; align-self: stretch; }
  .h26-spot-hero { flex: 1 0 auto; }
  .h26-spot-main > .h26-spot-tag {
    position: relative;
    top: auto;
    right: auto;
    align-self: flex-start;
    margin: calc(var(--u) * -131) 0 calc(var(--u) * 90);
    margin-inline-start: calc(var(--u) * 50);
  }
}
.h26-spot-tag {
  position: absolute;
  right: calc(var(--u) * 50);
  top: calc(var(--u) * 301);
  z-index: 1;
}
.h26-spot-card {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: calc(var(--u) * 400) minmax(0, 1fr);
  column-gap: calc(var(--u) * 26);
  width: calc(var(--u) * 940);
  margin: calc(var(--u) * -58) auto 0;
  padding: calc(var(--u) * 29) calc(var(--u) * 59) calc(var(--u) * 40) calc(var(--u) * 30);
  border-radius: calc(var(--u) * 40);
  background: #fff;
  box-shadow: 0 20px 50px rgba(54, 68, 74, .08);
}
/* Lead thumbnails are 16:9 (older 4:3 ones carry baked-in letterbox bars), so a 16:9 frame shows the whole picture and trims only the bars. */
.h26-spot-big { display: flex; flex-direction: column; min-width: 0; }
.h26-spot-big .h26-media {
  flex: none;
  aspect-ratio: 16 / 9;
  border-radius: calc(var(--u) * 20);
  background: #1f2a2e;
  box-shadow: 0 16px 34px -12px rgba(31, 67, 74, .35);
}
.h26-spot-big .h26-media::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 62%, rgba(0, 0, 0, .18) 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14);
  pointer-events: none;
}
.h26-spot-big .h26-spot-meta { margin-top: auto; }
.h26-spot-big .h26-card-title { margin: calc(var(--u) * 18) 0 calc(var(--u) * 14); font-size: calc(var(--u) * 29); -webkit-line-clamp: 2; }
.h26-spot-meta {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 14);
  margin-top: calc(var(--u) * 14);
  padding-top: calc(var(--u) * 14);
  border-top: 1px solid #eef0e6;
}
.h26-spot-cat {
  padding: calc(var(--u) * 5) calc(var(--u) * 14);
  border-radius: 999px;
  background: #e8f5f3;
  color: var(--teal-head);
  font-weight: 700;
  font-size: max(11px, calc(var(--u) * 14));
  line-height: 1.6;
  white-space: nowrap;
}
.h26-spot-meta .h26-date { font-size: max(10.5px, calc(var(--u) * 14)); }
.h26-spot-go {
  display: grid;
  place-items: center;
  flex: none;
  width: max(30px, calc(var(--u) * 44));
  height: max(30px, calc(var(--u) * 44));
  margin-inline-start: auto;
  border-radius: 50%;
  background: var(--teal);
  transition: background .2s, transform .3s var(--ease);
}
.h26-spot-go .h26-arrow { width: max(11px, calc(var(--u) * 15)); height: max(9px, calc(var(--u) * 12)); color: #fff; }
.h26-spot-big:hover .h26-spot-go { background: var(--teal-head); transform: translateX(-4px); }

/* Tags with fewer than three posts: the lead spans the card, image beside text. */
.h26-spot-card--wide { grid-template-columns: minmax(0, 1fr); }
.h26-spot-card--wide .h26-spot-big {
  display: grid;
  grid-template-columns: calc(var(--u) * 340) minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  column-gap: calc(var(--u) * 30);
  align-items: start;
}
.h26-spot-card--wide .h26-spot-big .h26-media { grid-row: 1 / -1; }
.h26-spot-card--wide .h26-spot-big .h26-card-title { margin-top: calc(var(--u) * 6); -webkit-line-clamp: 3; }
.h26-spot-card--wide .h26-spot-meta { align-self: end; }
/* A single post is already shown in the banner, so the card keeps only its text. */
.h26-spot-card--solo .h26-spot-big { grid-template-columns: minmax(0, 1fr); }
.h26-spot-card--solo .h26-spot-big .h26-media { display: none; }
.h26-spot-list { display: grid; align-content: start; gap: calc(var(--u) * 22); }
.h26-mini { display: grid; grid-template-columns: calc(var(--u) * 157) minmax(0, 1fr); column-gap: calc(var(--u) * 22); align-items: start; }
.h26-mini .h26-media { aspect-ratio: 16 / 9; border-radius: calc(var(--u) * 12); }
.h26-mini-title {
  padding-top: calc(var(--u) * 4);
  font-weight: 600;
  font-size: max(12px, calc(var(--u) * 17));
  line-height: 1.75;
  color: var(--ink);
  transition: color .2s;
}
.h26-mini:hover .h26-mini-title { color: var(--teal-head); }
.h26-mini .h26-date { font-size: max(10.5px, calc(var(--u) * 13)); }

/* ---------- Join banner ---------- */

.h26-join { margin-top: calc(var(--u) * 40); background: var(--teal); }
.h26-join .h26-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: calc(var(--u) * 189);
}
.h26-join h2 {
  font-family: var(--font-head);
  font-weight: 400;
  font-size: calc(var(--u) * 66);
  line-height: 1.3;
  color: var(--mint-soft);
}
.h26-join-cta {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--u) * 30);
  margin-inline-end: calc(var(--u) * 47);
  font-family: var(--font-head);
  font-size: calc(var(--u) * 44);
  color: #fff;
  transition: gap .25s var(--ease);
}
.h26-join-cta .h26-arrow { width: calc(var(--u) * 32); height: calc(var(--u) * 27); }
.h26-join-cta:hover { gap: calc(var(--u) * 42); }

/* ---------- Q&A ---------- */

.h26-qa {
  --star: calc(var(--u) * 61);
  margin-top: calc(var(--u) * 40);
  padding-block: calc(var(--u) * 58);
  background: linear-gradient(90deg, #f3f2ec 0%, #ebe6d8 100%);
}
.h26-qa .h26-stars { color: #fff; }
.h26-qa-grid { margin-top: calc(var(--u) * 52); column-gap: calc(var(--u) * 45); }
.h26-qcard { display: block; text-align: center; }
.h26-qcard .h26-media { aspect-ratio: 385 / 288; background: #364449; }
.h26-qcard .h26-media img { filter: grayscale(1) contrast(.9); opacity: .55; }
.h26-qcard .h26-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(181, 211, 160, .9) 0%, rgba(158, 214, 192, .9) 100%);
  transition: opacity .3s;
}
.h26-qcard:hover .h26-media::after { opacity: .78; }
.h26-qicon {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  color: #fff;
}
.h26-qicon svg { width: calc(var(--u) * 116); height: calc(var(--u) * 116); transition: transform .35s var(--ease); }
.h26-qcard:hover .h26-qicon svg { transform: scale(1.08) rotate(-4deg); }
.h26-qcard .h26-card-title { margin-top: calc(var(--u) * 22); font-size: calc(var(--u) * 30); }
.h26-qcard .h26-date { margin-top: calc(var(--u) * 4); font-weight: 400; font-size: max(11px, calc(var(--u) * 17)); }
.h26-center { display: flex; justify-content: center; margin-top: calc(var(--u) * 48); }

/* ---------- On this day ---------- */

.h26-otd { --star: calc(var(--u) * 62); padding-block: calc(var(--u) * 72) calc(var(--u) * 65); }
.h26-otd .h26-center { margin-top: calc(var(--u) * 20); }
.h26-otd-date { pointer-events: none; }
.h26-film { position: relative; margin-top: calc(var(--u) * 38); }
.h26-film .h26-track { --per: 4; --gap: calc(var(--u) * 28); }
.h26-fcard {
  position: relative;
  display: block;
  aspect-ratio: 389 / 533;
  overflow: hidden;
  background: #1f2a2c;
}
.h26-fcard img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.h26-fcard:hover img { transform: scale(1.05); }
.h26-fcard::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, .78) 100%);
}
.h26-year {
  position: absolute;
  top: calc(var(--u) * 26);
  left: calc(var(--u) * 26);
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: calc(var(--u) * 4);
  min-width: calc(var(--u) * 122);
  padding: calc(var(--u) * 14) calc(var(--u) * 12);
  background: rgba(45, 45, 45, .62);
  border: 1px solid rgba(255, 255, 255, .18);
  color: #fff;
  backdrop-filter: blur(4px);
}
.h26-year b { font: 600 calc(var(--u) * 36) / 1 var(--font-latin); letter-spacing: -.01em; }
.h26-year span { font-weight: 600; font-size: max(10px, calc(var(--u) * 15)); line-height: 1.4; }
.h26-fcopy {
  position: absolute;
  inset-inline: calc(var(--u) * 28);
  bottom: calc(var(--u) * 26);
  z-index: 1;
  display: grid;
  justify-items: start;
  gap: calc(var(--u) * 10);
  color: #fff;
}
.h26-fcat {
  padding-bottom: calc(var(--u) * 5);
  border-bottom: calc(var(--u) * 3) solid #2fc49f;
  font-weight: 600;
  font-size: max(12px, calc(var(--u) * 19));
  color: #34d1a8;
}
.h26-ftitle {
  font-weight: 700;
  font-size: calc(var(--u) * 24);
  line-height: 1.7;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.h26-film-btn {
  position: absolute;
  top: 50%;
  z-index: 3;
  display: grid;
  place-items: center;
  width: calc(var(--u) * 66);
  height: calc(var(--u) * 66);
  margin-top: calc(var(--u) * -33);
  background: #fff;
  color: #1f2a2c;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
  transition: transform .2s, opacity .2s;
}
.h26-film-btn svg { width: calc(var(--u) * 24); height: calc(var(--u) * 24); }
.h26-film-btn[data-dir="prev"] { right: calc(var(--u) * 18); }
.h26-film-btn[data-dir="next"] { left: calc(var(--u) * 18); }
.h26-film-btn:hover { transform: scale(1.06); }
.h26-film-btn:disabled { opacity: .45; cursor: default; transform: none; }

/* ---------- Support + footer ---------- */

.h26-support { display: block; background: var(--teal); }
.h26-support .h26-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: calc(var(--u) * 243);
}
.h26-support-copy { max-width: calc(var(--u) * 1000); }
.h26-support h2 {
  font-family: var(--font-head);
  font-weight: 400;
  font-size: calc(var(--u) * 90);
  line-height: 1.15;
  color: var(--mint-soft);
}
.h26-support p {
  margin-top: calc(var(--u) * 8);
  font-size: max(13px, calc(var(--u) * 17));
  line-height: 1.95;
  color: #fff;
}
.h26-support .h26-arrow { width: calc(var(--u) * 45); height: calc(var(--u) * 38); margin-inline-end: calc(var(--u) * 47); transition: transform .3s var(--ease); }
.h26-support:hover .h26-arrow { transform: translateX(calc(var(--u) * -14)); }

.h26-footer { background: #252525; color: #fff; }
.h26-footer-nav { min-height: calc(var(--u) * 136); display: flex; align-items: center; justify-content: center; }
.h26-footer-nav ul { display: flex; flex-wrap: wrap; justify-content: center; gap: calc(var(--u) * 10) calc(var(--u) * 44); }
.h26-footer-nav a { font-weight: 600; font-size: max(13px, calc(var(--u) * 18)); color: rgba(255, 255, 255, .62); transition: color .2s; }
.h26-footer-nav a:hover { color: #fff; }
.h26-footer-bar { background: #2f2f2f; }
.h26-footer-bar .h26-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--u) * 18);
  min-height: calc(var(--u) * 70);
  direction: ltr;
}
.h26-footer-bar img { width: calc(var(--u) * 98); height: auto; }
.h26-footer-bar p { font: 300 max(11px, calc(var(--u) * 14)) / 1.3 var(--font-latin); color: #fff; text-align: left; }

/* ---------- Tablet / mobile (873pt artboard) ---------- */

@media (max-width: 999px) {
  .h26 { --u: calc(clamp(320px, 100vw, 760px) / 873); --wrap: calc(var(--u) * 740); }

  .h26-header-inner { width: calc(var(--u) * 790); height: calc(var(--u) * 145); gap: 0; justify-content: space-between; }
  .h26-logo { order: 2; width: calc(var(--u) * 215); }
  .h26-nav { display: none; }
  .h26-burger { display: grid; order: 1; width: 44px; height: 44px; margin-inline-start: -8px; }
  .h26-burger svg { width: calc(var(--u) * 50); height: calc(var(--u) * 50); }
  .h26-search-btn { order: 3; margin: 0 -8px 0 0; width: 44px; height: 44px; }
  .h26-hbtn svg { width: max(20px, calc(var(--u) * 30)); height: max(20px, calc(var(--u) * 30)); }
  .h26-header-inner { flex-direction: row-reverse; }

  .h26-search { padding-block: 14px; }
  .h26-search input { height: 46px; font-size: 16px; padding-inline: 18px; }
  .h26-search button { padding-inline: 20px; font-size: 20px; }

  .h26-mnav {
    position: relative;
    display: flex;
    align-items: center;
    height: calc(var(--u) * 83);
    background: var(--teal);
  }
  .h26-mnav ul {
    display: flex;
    align-items: center;
    height: 100%;
    padding-inline: calc(var(--u) * 66) calc(var(--u) * 110);
    overflow-x: auto;
    scrollbar-width: none;
    scroll-behavior: smooth;
  }
  .h26-mnav ul::-webkit-scrollbar { display: none; }
  .h26-mnav li { display: flex; align-items: center; flex: none; }
  .h26-mnav li + li::before {
    content: "";
    width: calc(var(--u) * 10);
    height: calc(var(--u) * 10);
    margin-inline: calc(var(--u) * 38);
    border-radius: 50%;
    background: rgba(255, 255, 255, .45);
  }
  .h26-mnav a {
    display: flex;
    align-items: center;
    gap: calc(var(--u) * 12);
    font-family: var(--font-head);
    font-size: max(20px, calc(var(--u) * 50));
    line-height: 1;
    color: #fff;
    white-space: nowrap;
  }
  .h26-mnav-more {
    position: absolute;
    left: 0;
    inset-block: 0;
    display: grid;
    place-items: center;
    width: calc(var(--u) * 110);
    background: linear-gradient(90deg, var(--teal) 55%, rgba(80, 184, 186, 0));
  }
  .h26-mnav-more span {
    display: grid;
    place-items: center;
    width: max(28px, calc(var(--u) * 35));
    height: max(28px, calc(var(--u) * 35));
    border-radius: 50%;
    background: rgba(255, 255, 255, .45);
  }
  .h26-mnav-more .h26-arrow { width: 11px; height: 9px; color: #fff; }

  .h26-orn-head { gap: calc(var(--u) * 30); }
  .h26-orn-head h2 { font-size: calc(var(--u) * 68); }
  .h26-date { font-size: max(11px, calc(var(--u) * 16.5)); }
  .h26-card-title { margin-top: calc(var(--u) * 18); font-size: max(14.5px, calc(var(--u) * 28)); line-height: 1.66; }

  /* hero */
  .h26-hero { padding-block: calc(var(--u) * 39) calc(var(--u) * 40); }
  .h26-hero .h26-wrap { width: var(--wrap); }
  .h26-lead { grid-template-columns: minmax(0, 1fr) auto; column-gap: calc(var(--u) * 24); }
  .h26-lead .h26-media { grid-column: 1 / -1; aspect-ratio: 740 / 638; }
  .h26-lead-copy { display: contents; }
  .h26-lead-title { grid-column: 1; grid-row: 2; margin-top: calc(var(--u) * 30); font-size: max(21px, calc(var(--u) * 52)); line-height: 1.64; }
  .h26-lead-excerpt { display: none; }
  .h26-lead .h26-date { grid-column: 2; grid-row: 2; margin-top: calc(var(--u) * 40); font-size: max(11px, calc(var(--u) * 16.5)); white-space: nowrap; }
  .h26-hero .h26-stars { margin-block: calc(var(--u) * 30) calc(var(--u) * 34); }
  .h26-hero-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: calc(var(--u) * 27); row-gap: calc(var(--u) * 40); }
  .h26-hero-grid .h26-card:nth-child(n + 4) { display: block; }
  .h26-hero-grid .h26-card:nth-child(n + 5) { display: none; }
  .h26-hero-grid .h26-media { aspect-ratio: 354 / 248; }
  .h26-hero-grid .h26-card-title { font-size: max(14.5px, calc(var(--u) * 28)); line-height: 1.66; }
  .h26-hero-grid .h26-date { font-size: max(11px, calc(var(--u) * 16.5)); }

  /* slider */
  .h26-slider-sec { --star: calc(var(--u) * 54); padding-block: calc(var(--u) * 26) calc(var(--u) * 34); }
  .h26-slider-sec .h26-orn-head { gap: calc(var(--u) * 24); }
  .h26-slider-sec .h26-orn-head h2 { font-size: calc(var(--u) * 60); }
  .h26-slider { margin-top: calc(var(--u) * 28); }
  .h26-slider .h26-wrap { width: calc(var(--u) * 750); }
  .h26-slider .h26-track { --per: 2; --gap: calc(var(--u) * 28); }
  .h26-slider .h26-pcard:nth-child(n + 13) { display: none; }
  .h26-pcard .h26-media { aspect-ratio: 361 / 446; }
  .h26-pcard .h26-card-title { margin-top: calc(var(--u) * 30); font-size: max(14.5px, calc(var(--u) * 28)); }
  .h26-pcard .h26-date { font-size: max(11px, calc(var(--u) * 16.5)); }
  .h26-controls { gap: calc(var(--u) * 14); margin-top: calc(var(--u) * 40); }
  .h26-bars { gap: calc(var(--u) * 6); }
  .h26-bar { width: calc(var(--u) * 87); height: calc(var(--u) * 11); }
  .h26-round { width: max(32px, calc(var(--u) * 41)); height: max(32px, calc(var(--u) * 41)); }
  .h26-round .h26-arrow { width: 12px; height: 10px; }

  /* sections */
  .h26-sec { padding-block: calc(var(--u) * 50) calc(var(--u) * 30); }
  .h26-sec-head { gap: calc(var(--u) * 20); margin-bottom: calc(var(--u) * 46); }
  .h26-sec-head h2 { font-size: max(24px, calc(var(--u) * 60)); }
  .h26-sec-line { height: 2px; background: #f4f5de; }
  .h26-arrow { width: max(10px, calc(var(--u) * 17)); height: max(8px, calc(var(--u) * 14)); }
  .h26-pill { height: max(26px, calc(var(--u) * 29)); gap: 6px; padding-inline: 12px 10px; font-size: max(11px, calc(var(--u) * 13)); }
  .h26-pill .h26-arrow { width: 9px; height: 8px; }
  .h26-pill--lg { height: max(30px, calc(var(--u) * 37)); padding-inline: 16px 14px; font-size: max(12px, calc(var(--u) * 16)); }

  .h26-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: calc(var(--u) * 27); row-gap: calc(var(--u) * 40); }
  .h26-latest { padding-bottom: calc(var(--u) * 70); }
  .h26-latest .h26-card:nth-child(n + 5) { display: none; }
  .h26-latest .h26-card .h26-media { aspect-ratio: 354 / 248; }

  .h26-cat .h26-wrap { width: calc(var(--u) * 751); }
  .h26-cat .h26-grid-4 { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: calc(var(--u) * 35); }
  .h26-cat .h26-card:nth-child(n + 4) { display: none; }
  .h26-cat .h26-card .h26-media { aspect-ratio: 228 / 158; }
  .h26-cat .h26-card-title { margin-top: calc(var(--u) * 16); font-size: max(12.5px, calc(var(--u) * 18)); line-height: 1.75; }
  .h26-cat .h26-date { font-size: max(10px, calc(var(--u) * 10.6)); }

  /* tags */
  .h26-tags { --star: calc(var(--u) * 62); width: 100%; border-radius: 0; margin-bottom: 0; padding-block: calc(var(--u) * 34) calc(var(--u) * 36); }
  .h26-chips { width: calc(var(--u) * 800); gap: calc(var(--u) * 20) calc(var(--u) * 24); margin-top: calc(var(--u) * 40); }
  .h26-chip { height: max(28px, calc(var(--u) * 37)); padding-inline: 12px; font-size: max(12px, calc(var(--u) * 18)); }
  .h26-divider { width: calc(var(--u) * 490); height: 2px; margin-block: calc(var(--u) * 36); }
  .h26-spot { grid-template-columns: minmax(0, 1fr); width: calc(var(--u) * 732); margin-inline: auto; }
  .h26-ad { display: none; }
  .h26-spot-hero { height: calc(var(--u) * 431); border-radius: calc(var(--u) * 18); }
  .h26-spot-tag { right: calc(var(--u) * 40); top: calc(var(--u) * 319); }
  /* Stacked, so the lead keeps its full 16:9 image instead of stretching to match a tall list beside it. */
  .h26-spot-card {
    grid-template-columns: minmax(0, 1fr);
    row-gap: calc(var(--u) * 36);
    width: calc(var(--u) * 683);
    margin-top: calc(var(--u) * -49);
    padding: calc(var(--u) * 36) calc(var(--u) * 30) calc(var(--u) * 40);
    border-radius: calc(var(--u) * 40);
  }
  .h26-spot-big .h26-media { border-radius: calc(var(--u) * 24); }
  .h26-spot-cat { display: none; }
  .h26-spot-big .h26-card-title { font-size: max(14.5px, calc(var(--u) * 28.3)); }
  .h26-spot-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(var(--u) * 28) calc(var(--u) * 30); }
  .h26-mini { grid-template-columns: minmax(0, 1fr); row-gap: calc(var(--u) * 12); }
  .h26-mini:nth-child(n + 3) { display: none; }
  .h26-mini .h26-media { aspect-ratio: 16 / 9; border-radius: calc(var(--u) * 14); }
  .h26-mini-title { font-size: max(12px, calc(var(--u) * 15)); line-height: 1.7; }
  .h26-mini .h26-date { font-size: max(10px, calc(var(--u) * 12.5)); }

  /* banners */
  .h26-join { margin-top: calc(var(--u) * 30); }
  .h26-join .h26-wrap { min-height: calc(var(--u) * 109); width: calc(var(--u) * 780); gap: 12px; }
  .h26-join h2 { font-size: max(17px, calc(var(--u) * 51)); }
  .h26-join-cta { gap: calc(var(--u) * 26); margin-inline-end: calc(var(--u) * 6); font-size: max(13px, calc(var(--u) * 34)); white-space: nowrap; }
  .h26-join-cta .h26-arrow { width: max(12px, calc(var(--u) * 18)); height: max(10px, calc(var(--u) * 16)); }

  .h26-qa { --star: calc(var(--u) * 61); margin-top: calc(var(--u) * 50); padding-block: calc(var(--u) * 40) calc(var(--u) * 34); }
  .h26-qa .h26-wrap { width: calc(var(--u) * 693); }
  .h26-qa-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: calc(var(--u) * 37); row-gap: calc(var(--u) * 34); margin-top: calc(var(--u) * 40); }
  .h26-qa-grid .h26-qcard:nth-child(n + 5) { display: none; }
  .h26-qcard .h26-media { aspect-ratio: 328 / 245; }
  .h26-qicon svg { width: calc(var(--u) * 80); height: calc(var(--u) * 80); }
  .h26-qcard .h26-card-title { margin-top: calc(var(--u) * 20); font-size: max(14px, calc(var(--u) * 24.5)); }
  .h26-qcard .h26-date { font-size: max(10.5px, calc(var(--u) * 14.4)); }
  .h26-center { margin-top: calc(var(--u) * 40); }

  .h26-otd { --star: calc(var(--u) * 62); padding-block: calc(var(--u) * 50) calc(var(--u) * 45); }
  .h26-otd .h26-wrap { width: calc(var(--u) * 789); }
  .h26-film .h26-track { --per: 2; --gap: calc(var(--u) * 28); }
  .h26-fcard { aspect-ratio: 379 / 506; }
  .h26-year { top: 10px; left: 10px; min-width: 64px; padding: 7px 6px; }
  .h26-year b { font-size: max(17px, calc(var(--u) * 36)); }
  .h26-year span { font-size: max(9.5px, calc(var(--u) * 14)); }
  .h26-fcopy { inset-inline: 12px; bottom: 12px; gap: 6px; }
  .h26-fcat { font-size: max(11px, calc(var(--u) * 19)); }
  .h26-ftitle { font-size: max(12.5px, calc(var(--u) * 24)); line-height: 1.65; }
  .h26-film-btn {
    width: max(14px, calc(var(--u) * 15));
    height: max(28px, calc(var(--u) * 29));
    margin-top: calc(var(--u) * -15);
    background: none;
    box-shadow: none;
    color: #e3dfbf;
  }
  .h26-film-btn svg { width: 100%; height: 100%; }
  .h26-film-btn[data-dir="prev"] { right: calc(var(--u) * -32); }
  .h26-film-btn[data-dir="next"] { left: calc(var(--u) * -32); }
  .h26-film-btn:disabled { opacity: .35; }

  .h26-support .h26-wrap {
    flex-direction: column;
    justify-content: center;
    gap: 14px;
    min-height: calc(var(--u) * 242);
    width: calc(var(--u) * 760);
    padding-block: 28px 24px;
    text-align: center;
  }
  .h26-support-copy { max-width: none; }
  .h26-support h2 { font-size: max(30px, calc(var(--u) * 90)); }
  .h26-support p { margin-top: 6px; font-size: max(11.5px, calc(var(--u) * 16)); }
  .h26-support .h26-arrow { width: max(22px, calc(var(--u) * 45)); height: max(18px, calc(var(--u) * 38)); margin-inline-end: 0; }

  .h26-footer-nav { min-height: calc(var(--u) * 136); padding-block: 18px; }
  .h26-footer-nav ul { gap: 8px 20px; text-align: center; }
  .h26-footer-bar .h26-wrap { justify-content: center; min-height: calc(var(--u) * 70); gap: 12px; padding-block: 10px; }
  .h26-footer-bar img { width: max(70px, calc(var(--u) * 98)); }
}

@media (prefers-reduced-motion: reduce) {
  .h26 *, .h26 *::before, .h26 *::after { transition: none !important; scroll-behavior: auto !important; }
}