/* Feature layer: merged hero navigation, full-bleed nature banner, dropdowns, and MP3 player. */

/* Homepage: header, logo, and navigation live directly on the hero image. */
.home .site-header{
  position:absolute;
  top:0;left:0;right:0;
  z-index:80;
  background:linear-gradient(180deg,rgba(8,28,19,.48),rgba(8,28,19,.16) 72%,transparent);
  border:0;
  backdrop-filter:none;
  color:#fff;
}
.home .site-header.scrolled{border-color:transparent}
.home .header-inner{height:88px}
.home .brand-logo-only{position:relative;z-index:2}
.home .brand-logo{max-height:54px;max-width:180px;filter:drop-shadow(0 3px 14px rgba(0,0,0,.30))}
.home .brand-mark{
  width:42px;height:42px;border-radius:12px;border:1px solid rgba(255,255,255,.40);
  background:rgba(255,255,255,.16);color:#fff;backdrop-filter:blur(10px);
  box-shadow:0 5px 18px rgba(0,0,0,.12);
}
.home .site-nav>a,
.home .nav-dropdown-trigger>a,
.home .nav-parent-label{color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.32)}
.home .site-nav>a:after{background:#fff}
.home .submenu-toggle{color:rgba(255,255,255,.88)}
.home .theme-toggle,.home .nav-toggle{
  border-color:rgba(255,255,255,.34);background:rgba(255,255,255,.12);color:#fff;
  backdrop-filter:blur(10px);box-shadow:0 4px 16px rgba(0,0,0,.10);
}

/* Hero begins at y=0 and reaches the full browser width, but remains banner-height. */
.nature-banner.shell{
  width:100vw;
  max-width:none;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  height:320px;
}
.home .nature-banner.shell{margin-top:0;margin-bottom:62px}
.nature-banner[data-hero-height="compact"]{height:230px}
.nature-banner[data-hero-height="medium"]{height:320px}
.nature-banner[data-hero-height="tall"]{height:440px}
.nature-banner .nature-frame{border-radius:0;box-shadow:none}
/* Tepi bawah foto TIDAK lagi diberi gradasi.
 *
 * Gradasi sempat dipakai untuk meluruhkan foto ke warna halaman, dan hasilnya
 * justru terlihat seperti gambar yang memudar tanpa sebab. Sekarang batasnya
 * tegas: foto berhenti sebagai foto, lalu langsung disambut pita motif dan
 * ayat di bawahnya (assets/ayat.css). Batas yang jelas lebih baik daripada
 * batas yang berusaha menyamarkan dirinya sendiri. */
/* Sapuan tipis berwarna aksen tepat di garis peralihannya. Tanpa ini, gradasi
   yang berakhir di warna latar terlihat seperti gambar yang memudar tanpa
   sebab; dengan garis ini ia terbaca sebagai batas yang memang dirancang. */
/* Garis tegasnya dipindahkan ke kepala pembatas ayat (assets/ayat.css).
   Dua garis yang bertumpuk hanya membuat batasnya terlihat ragu-ragu. */
.nature-banner-copy{left:max(22px,calc((100vw - 1180px)/2 + 20px));right:22px;max-width:620px}
.home .nature-overlay{
  background:linear-gradient(180deg,rgba(6,24,16,.18),rgba(6,24,16,.03) 34%,rgba(6,24,16,.46));
}
.classic-blog-layout.without-sidebar{grid-template-columns:minmax(0,850px);justify-content:center}

/* Header dropdowns, one nested level. */
.nav-dropdown{position:relative;display:flex;align-items:center}
/* Jembatan tak terlihat menutup celah 15px antara tombol menu dan daftar
   di bawahnya.

   Tanpa ini, kursor yang bergerak dari tombol menuju daftarnya melewati
   pita kosong yang bukan bagian dari .nav-dropdown — hover terputus di
   tengah jalan dan menunya menutup TEPAT saat orang hendak memilih.
   Itulah yang membuat menu hover terasa rusak, dan yang memaksa orang
   mengekliknya. Jembatan ini anak dari .nav-dropdown, jadi melintasinya
   tetap dihitung sebagai hover.

   Hanya untuk tata letak lebar: pada tampilan ponsel daftarnya menyatu
   di bawah tombol (position:static), tidak ada celah, dan bidang tak
   terlihat di sana justru bisa menghalangi sentuhan. */
@media(min-width:901px){
  .nav-dropdown::after{content:"";position:absolute;left:0;right:0;top:100%;height:16px}
}
.nav-dropdown-trigger{display:flex;align-items:center;gap:3px}
.nav-dropdown-trigger>a,.nav-parent-label{font-size:16px;white-space:nowrap}
.nav-parent-label{cursor:default}
.submenu-toggle{border:0;background:transparent;color:var(--muted);padding:4px 5px;cursor:pointer;font-size:13px;line-height:1}
.nav-submenu{
  position:absolute;left:-16px;top:calc(100% + 15px);width:max-content;min-width:190px;
  display:grid;padding:8px;background:var(--card);border:1px solid var(--line);border-radius:14px;
  box-shadow:0 18px 46px rgba(32,60,42,.14);opacity:0;visibility:hidden;transform:translateY(-5px);
  transition:opacity .16s ease,transform .16s ease,visibility .16s;z-index:60;
}
.nav-submenu a{padding:10px 12px;border-radius:9px;font-size:16px;font-weight:500;color:var(--ink);text-shadow:none}
.nav-submenu a:hover{background:var(--paper-2);color:var(--accent)}
.nav-dropdown:hover .nav-submenu,.nav-dropdown:focus-within .nav-submenu,.nav-dropdown.submenu-open .nav-submenu{opacity:1;visibility:visible;transform:none}
/* Ditutup dengan Escape tetap tertutup, walaupun kursornya masih berada di
   atas menunya. Tanpa ini aturan :hover di atas langsung membukanya lagi
   dan Escape terlihat tidak berfungsi. Ditulis SETELAH aturan hover agar
   menang pada kekhususan yang sama. Kelasnya dilepas begitu kursor pergi,
   jadi menyorotnya lagi tetap membuka seperti biasa. */
.nav-dropdown.submenu-tahan .nav-submenu{opacity:0;visibility:hidden;transform:translateY(-5px)}

/* Compact floating MP3 player. */
.blog-audio-player{
  position:fixed;right:20px;bottom:20px;z-index:70;width:min(480px,calc(100vw - 28px));
  display:grid;grid-template-columns:42px minmax(0,1fr) 34px 78px 30px;gap:9px;align-items:center;
  padding:10px 11px;background:color-mix(in srgb,var(--card) 92%,transparent);backdrop-filter:blur(18px);
  border:1px solid var(--line);border-radius:16px;box-shadow:0 18px 55px rgba(29,65,43,.18);
}
.audio-play,.audio-mute,.audio-minimize{border:0;background:var(--paper-2);color:var(--ink);border-radius:10px;height:34px;cursor:pointer}
.audio-play{background:var(--accent);color:#fff;font-weight:800}
.audio-info{min-width:0;display:grid;grid-template-columns:1fr auto;gap:1px 8px;align-items:center}
.audio-info strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:700 14px var(--sans)}
.audio-state{font-size:11px;color:var(--muted);white-space:nowrap}
.audio-progress{grid-column:1/-1;width:100%;height:3px;accent-color:var(--accent)}
.audio-volume{width:78px;accent-color:var(--accent)}
.blog-audio-player.autoplay-blocked{border-color:color-mix(in srgb,var(--accent) 45%,var(--line))}
.blog-audio-player.minimized{width:auto;grid-template-columns:42px 30px}
.blog-audio-player.minimized .audio-info,.blog-audio-player.minimized .audio-mute,.blog-audio-player.minimized .audio-volume{display:none}

/* No repeated visible blog title in the footer. */
.footer-copy p{margin-top:0}

@media(max-width:900px){
  .home .header-inner{height:76px}
  .home .brand-logo{max-height:46px;max-width:150px}
  .home .site-nav{
    top:68px;
    background:rgba(11,35,24,.94);
    border-color:rgba(255,255,255,.18);
    box-shadow:0 20px 55px rgba(0,0,0,.24);
    backdrop-filter:blur(18px);
  }
  .home .site-nav>a,.home .nav-dropdown-trigger>a,.home .nav-parent-label{color:#fff}
  .nav-dropdown{width:100%;display:block}
  .nav-dropdown-trigger{justify-content:space-between;width:100%}
  .nav-dropdown-trigger>a,.nav-parent-label{font-size:16px}
  .nav-submenu{position:static;width:100%;min-width:0;margin-top:6px;display:none;opacity:1;visibility:visible;transform:none;box-shadow:none;background:var(--paper-2);border-radius:10px}
  .nav-dropdown.submenu-open .nav-submenu{display:grid}
  .nav-dropdown:hover .nav-submenu:not(:focus-within){display:none}
  .nav-dropdown.submenu-open:hover .nav-submenu{display:grid}
}

@media(max-width:620px){
  .home .header-inner{height:70px}
  .home .brand-logo{max-height:42px;max-width:130px}
  .nature-banner.shell{height:260px;margin-bottom:38px}
  .nature-banner[data-hero-height="compact"]{height:210px}
  .nature-banner[data-hero-height="medium"]{height:260px}
  .nature-banner[data-hero-height="tall"]{height:340px}
  .nature-banner-copy{left:18px;right:18px;bottom:18px}
  .nature-banner-copy p{max-width:88%;font-size:16px}
  .blog-audio-player{right:14px;bottom:14px;grid-template-columns:40px minmax(0,1fr) 32px 28px}
  .audio-volume{display:none}
}


/* ---------------------------------------------------------------------------
 * Mode murottal pada pemutar global.
 *
 * .blog-audio-player adalah GRID dengan jumlah kolom tetap:
 *
 *   grid-template-columns: 42px minmax(0,1fr) 34px 78px 30px
 *
 * — tepat lima kolom untuk lima anak. Menambahkan tombol surah tanpa menambah
 * kolom membuat setiap anak bergeser satu sel dan sisanya jatuh ke baris baru:
 * tombol putar melar selebar kolom info, judul terpotong, dan pemilih surah
 * hilang dari pandangan. Karena itu mode murottal mendefinisikan ulang seluruh
 * grid, bukan sekadar menata anak-anak barunya.
 *
 * Urutan anak: prev, play, next, info, mute, volume, minimize.
 * ------------------------------------------------------------------------- */
.blog-audio-player.murottal {
  width: min(470px, calc(100vw - 28px));
  grid-template-columns: 30px 42px 30px minmax(0, 1fr) 34px 68px 30px;
  gap: 7px;
}

.blog-audio-player .audio-prev,
.blog-audio-player .audio-next {
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  border-radius: 999px;
  width: 30px; height: 30px;
  cursor: pointer;
  display: grid; place-items: center;
  font-size: 19.5px; line-height: 1;
  padding: 0;
}
.blog-audio-player .audio-prev:hover,
.blog-audio-player .audio-next:hover {
  background: color-mix(in srgb, var(--ink) 10%, transparent);
}

/* Blok info punya tiga baris di mode murottal: judul dan status berdampingan,
   pemilih surah selebar penuh, lalu bilah posisi. Menempatkan pemilih di kolom
   'auto' baris pertama akan mendesak nama qari sampai terpotong. */
.blog-audio-player.murottal .audio-info {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 3px 8px;
}
.blog-audio-player.murottal .audio-info strong { grid-column: 1; grid-row: 1; }
.blog-audio-player.murottal .audio-state       { grid-column: 2; grid-row: 1; }
.blog-audio-player.murottal .audio-surah       { grid-column: 1 / -1; grid-row: 2; }
.blog-audio-player.murottal .audio-progress    { grid-column: 1 / -1; grid-row: 3; }

.blog-audio-player .audio-surah {
  width: 100%;
  border: 1px solid var(--line);
  background: var(--paper-2);
  color: var(--ink);
  border-radius: 7px;
  padding: 3px 5px;
  font: 500 13.5px var(--sans);
  /* Tanpa ini, daftar dropdown bawaan peramban tetap putih di mode gelap. */
  color-scheme: inherit;
}

/* Saat diminimalkan, hanya putar dan tombol perbesar yang tersisa. */
.blog-audio-player.murottal.minimized {
  width: auto;
  grid-template-columns: 42px 30px;
}
.blog-audio-player.murottal.minimized .audio-prev,
.blog-audio-player.murottal.minimized .audio-next { display: none; }

/* Sumber CDN dapat gagal: jaringan mati, host diblokir jaringan kantor, atau
   alamatnya berubah. Tanpa penanda, pemutarnya hanya diam dan tidak ada yang
   tahu kenapa. */
.blog-audio-player.audio-error .audio-state { color: #c0554c; }
.blog-audio-player.audio-error .audio-play  { opacity: .5; }

@media (max-width: 560px) {
  /* Kolom volume dibuang di layar kecil, sejalan dengan pemutar bawaan. */
  .blog-audio-player.murottal {
    right: 14px; bottom: 14px;
    grid-template-columns: 28px 40px 28px minmax(0, 1fr) 32px 28px;
    gap: 6px;
  }
}

/* ---------------------------------------------------------------------------
 * Media sosial dan tombol berbagi
 *
 * Semua ikon memakai stroke="currentColor" sehingga satu berkas melayani mode
 * terang dan gelap sekaligus, tanpa perlu dua set gambar.
 * ------------------------------------------------------------------------- */
.footer-social { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.footer-social a {
  width: 34px; height: 34px;
  border: 1px solid var(--line);
  border-radius: 999px;
  display: grid; place-items: center;
  color: var(--muted);
  transition: color .18s ease, border-color .18s ease, transform .18s ease;
}
.footer-social a:hover { color: var(--accent); border-color: var(--accent); transform: translateY(-2px); }
.footer-social svg { width: 17px; height: 17px; }

.sidebar-social { display: grid; gap: 7px; }
.sidebar-social a {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 9px;
  border: 1px solid var(--line);
  border-radius: 11px;
  font-size: 16px;
  color: var(--ink);
  transition: border-color .18s ease, background .18s ease;
}
.sidebar-social a:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); }
.sidebar-social svg { width: 17px; height: 17px; flex: 0 0 auto; color: var(--accent); }

.share-list { display: flex; flex-wrap: wrap; gap: 7px; margin: 9px 0 12px; }
.share-btn {
  width: 32px; height: 32px;
  border: 1px solid var(--line);
  border-radius: 999px;
  display: grid; place-items: center;
  color: var(--muted);
  transition: color .18s ease, border-color .18s ease, transform .18s ease;
}
.share-btn:hover { color: var(--accent); border-color: var(--accent); transform: translateY(-2px); }
.share-btn svg { width: 16px; height: 16px; }
.share-copy {
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  border-radius: 999px;
  padding: 6px 13px;
  font-size: 15px;
  cursor: pointer;
}
.share-copy:hover { border-color: var(--accent); color: var(--accent); }

/* Rail artikel menumpuk mendatar di layar sempit; tombol berbagi ikut. */
@media (max-width: 900px) {
  .share-list { justify-content: flex-start; }
}

/* ---------------------------------------------------------------------------
 * Penghitung kunjungan
 *
 * Satu kotak per angka, dengan nol di depan — bentuk yang dikenal orang dari
 * penghitung blog lama. Lebarnya tetap, jadi sidebar tidak bergeser saat
 * angkanya bertambah satu digit.
 * ------------------------------------------------------------------------- */
.hit-counter { display: grid; gap: 8px; }
.hit-angka { display: flex; gap: 4px; }
.hit-digit {
  flex: 1 1 0;
  min-width: 0;
  display: grid; place-items: center;
  padding: 9px 0;
  border-radius: 7px;
  background: var(--ink);
  color: var(--paper);
  font: 700 19.5px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  /* Angka monospasi menjaga lebar tiap kotak tetap sama walau angkanya
     berganti dari 1 ke 8. */
  font-variant-numeric: tabular-nums;
}
.hit-total { margin: 2px 0 0; font-size: 15.5px; color: var(--muted); }
.hit-total strong { color: var(--ink); font-variant-numeric: tabular-nums; }
.hit-today { margin: 0; font-size: 14.5px; color: var(--muted); }

/* Angka jumlah tulisan di sebelah nama kategori. */
.sidebar-categories .cat-count {
  display: inline-grid; place-items: center;
  min-width: 18px; height: 18px;
  margin-left: 5px; padding: 0 5px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  color: var(--accent);
  font: 700 13px/1 var(--sans);
  font-variant-numeric: tabular-nums;
}
.sidebar-empty { font-size: 15.5px; color: var(--muted); }

/* ---------------------------------------------------------------------------
 * Gambar di dalam artikel
 *
 * Kelas dan lebar ini ditulis oleh editor CMS (admin/imgtools.js). Aturannya
 * harus ada di sini juga, kalau tidak gambar yang di editor tampak rata kanan
 * selebar 40% akan terbit sebagai gambar penuh rata tengah — dan penulisnya
 * baru tahu setelah artikelnya dibaca orang.
 *
 * Lebar disimpan sebagai persen pada <figure style="width:…">, bukan piksel,
 * supaya gambar yang diatur di layar lebar tidak meluber di ponsel.
 * ------------------------------------------------------------------------- */
.prose figure {
  margin: 2.2em auto;
  max-width: 100%;
}
.prose figure img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
}
.prose figure figcaption {
  margin-top: 9px;
  font-size: .68em;
  line-height: 1.5;
  color: var(--muted);
  text-align: center;
  font-family: var(--sans);
}

.prose figure.br-align-left   { margin-left: 0; margin-right: auto; }
.prose figure.br-align-center { margin-left: auto; margin-right: auto; }
.prose figure.br-align-right  { margin-left: auto; margin-right: 0; }

/* Di ponsel, gambar sesempit 30% menjadi terlalu kecil untuk dilihat. Semua
   lebar yang diatur di editor diabaikan di bawah 640px dan gambar dibuat penuh
   selebar kolom — ini menimpa style sebaris, jadi memerlukan !important. */
@media (max-width: 640px) {
  .prose figure {
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* ---------------------------------------------------------------------------
 * Penanda pergantian halaman
 *
 * Pergantian tanpa memuat ulang menghilangkan bilah kemajuan bawaan peramban.
 * Tanpa penggantinya, mengklik tautan pada koneksi lambat terasa seperti klik
 * yang tidak tertangkap — dan orang akan mengklik lagi.
 *
 * Garis tipis di tepi atas, bukan tirai atau spinner di tengah: cukup untuk
 * memberi tahu bahwa sesuatu sedang berjalan, tanpa menutupi halaman yang
 * masih bisa dibaca.
 * ------------------------------------------------------------------------- */
.sedang-pindah::after {
  content: "";
  position: fixed;
  inset: 0 0 auto 0;
  height: 2px;
  z-index: 200;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  background-size: 45% 100%;
  background-repeat: no-repeat;
  animation: br-pindah 900ms ease-in-out infinite;
  pointer-events: none;
}
@keyframes br-pindah {
  0%   { background-position: -45% 0; }
  100% { background-position: 145% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .sedang-pindah::after { animation: none; background-position: 0 0; background-size: 100% 100%; opacity: .5; }
}

/* ---------------------------------------------------------------------------
 * Media sosial di header
 *
 * Diletakkan di dalam .site-nav, sebelum tombol tema, sehingga ikut aturan
 * buka-tutup menu yang sudah ada di layar sempit tanpa perlu penanganan
 * terpisah.
 * ------------------------------------------------------------------------- */
.header-social {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  /* Pemisah tipis dari tautan menu, supaya ikon tidak terbaca sebagai menu. */
  margin-left: 4px;
  padding-left: 12px;
  border-left: 1px solid var(--line);
}
.header-social a {
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border-radius: 999px;
  color: var(--muted);
  transition: color .18s ease, background .18s ease;
}
.header-social a:hover {
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}
.header-social svg { width: 16px; height: 16px; }

/* Header punya ruang terbatas. Di layar menengah, ikon dipangkas menjadi lima
   pertama saja — sisanya tetap lengkap di footer dan sidebar. */
@media (max-width: 1100px) {
  .header-social a:nth-child(n+6) { display: none; }
}

/* Saat menu mobile terbuka, .site-nav menjadi kolom. Ikon dibiarkan mendatar
   dalam satu baris sendiri, bukan ikut menumpuk satu per baris. */
@media (max-width: 860px) {
  .header-social {
    margin-left: 0;
    padding-left: 0;
    padding-top: 12px;
    border-left: 0;
    border-top: 1px solid var(--line);
    width: 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
  }
  .header-social a:nth-child(n+6) { display: grid; }
}

/* ---------------------------------------------------------------------------
 * Ikon Font Awesome
 *
 * Ikonnya SVG di dalam HTML, bukan huruf ikon. Ukuran bawaannya 1em supaya ia
 * mengikuti ukuran teks di sekitarnya, dan warnanya currentColor supaya mode
 * gelap bekerja tanpa satu aturan tambahan pun.
 *
 * vertical-align:-.125em menyejajarkan tengah ikon dengan tengah huruf; tanpa
 * itu ikon duduk di garis dasar dan terlihat naik sendiri di tengah kalimat.
 * ------------------------------------------------------------------------- */
.ikon {
  width: 1em; height: 1em;
  display: inline-block;
  vertical-align: -.125em;
  fill: currentColor;
  flex: 0 0 auto;
}
/* Tombol yang isinya hanya ikon: ikonnya diletakkan di tengah, bukan mengikuti
   garis dasar teks yang tidak ada. */
.theme-toggle .ikon, .nav-toggle .ikon, .audio-play .ikon, .audio-mute .ikon,
.audio-minimize .ikon, .audio-prev .ikon, .audio-next .ikon,
.submenu-toggle .ikon, .cap-ulang .ikon, .archive-arrow .ikon {
  vertical-align: middle;
}
.header-social .ikon, .footer-social .ikon, .sidebar-social .ikon, .share-btn .ikon { width: 16px; height: 16px; }
.sidebar-social .ikon { color: var(--accent); }
.theme-toggle .ikon { font-size: 17.5px; }
@media(max-width:900px){ .nav-toggle{ display:inline-flex; align-items:center; gap:7px } }
.nav-toggle .ikon { font-size: 16px; }
.article-meta .ikon { font-size: .85em; opacity: .72; }
.rail-sticky > span .ikon { font-size: .9em; margin-right: 5px; opacity: .7; }
.share-copy { display: inline-flex; align-items: center; gap: 7px; }
.pustaka-balik .ikon { font-size: 13.5px; }
.archive-arrow .ikon { font-size: 21.5px; }
.article-end .ikon { font-size: .8em; margin-left: 4px; }
.empty-state span .ikon, .classic-empty .ikon { font-size: .8em; }
.audio-play .ikon, .audio-mute .ikon, .audio-minimize .ikon { font-size: 16px; }
.audio-prev .ikon, .audio-next .ikon { font-size: 15px; }
.archive-search button .ikon { font-size: 16px; vertical-align: middle; }

/* ---------------------------------------------------------------------------
 * Footer dengan kolom tautan
 *
 * Kolomnya diisi dari Admin (Pengaturan → Footer). Lebarnya memakai
 * auto-fit + minmax, bukan jumlah kolom yang dipaku: satu kolom mengisi
 * ruangnya sendiri, empat kolom berbagi rata, dan di ponsel semuanya turun
 * menjadi dua lalu satu tanpa satu pun aturan media tambahan.
 * ------------------------------------------------------------------------- */
/* Bagian kiri (identitas) dan kanan (kolom tautan) dibagi menurut proporsi,
   bukan "sisa ruang" — dengan grid 1fr auto milik site.css, kolom tautannya
   terdesak ke tepi kanan dan tulisannya patah-patah. */
.site-footer .footer-grid{grid-template-columns:minmax(240px,.95fr) minmax(0,1.25fr);gap:56px}
@media(max-width:900px){ .site-footer .footer-grid{grid-template-columns:1fr;gap:34px} }

.footer-columns{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:28px 40px;
  align-content:start;
}
.footer-column{display:flex;flex-direction:column;gap:9px;min-width:0}
.footer-column h3{
  margin:0 0 3px;font:800 12.5px/1.4 var(--sans);
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
}
.footer-column a{
  font-size:16.5px;color:var(--ink);opacity:.82;
  transition:opacity .18s ease,color .18s ease;
  overflow-wrap:anywhere;
}
.footer-column a:hover{opacity:1;color:var(--accent)}
.footer-copy .footer-nav{margin-top:18px}
.footer-copy .footer-social{margin-top:18px;display:flex;gap:14px}

@media(max-width:900px){
  .footer-columns{grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:22px 24px}
}