/*
 * Etalase: a portfolio blog for design, IT and architecture students. Gallery language: white walls, square-cornered
 * prints, short captions underneath. Dial ENERGY 3 / RHYTHM 3 / MOTION 2.
 *
 * Type: Bricolage Grotesque for everything. Its optical-size axis (12 to 96) draws headings tight and characterful
 * and body text wider and more open, so one family carries both the display name and a 70ch reading column, and
 * the page loads one font file instead of two.
 * Colour: white page, #121212 ink, and one accent the student picks. The accent appears in four places only: the
 * square after the blog name, the square on the active menu or filter link, link underlines and hovers, and the
 * background of a post card that has no cover. That square is the motif: the student's colour shown as a swatch.
 * Layout: the newest post is the biggest card, later cards alternate wide and small (sizes set in beranda.php).
 * Square corners throughout, matching the swatch and the prints.
 * Dark mode follows the OS; accent text switches to a lighter tint there, cards without a cover keep the
 * darker accent because they carry white text.
 */
.et {
  color-scheme: light dark;
  --kertas: #fff;
  --tinta: #121212;          /* 18.7:1 on white */
  --abu: #5c5c5c;            /* captions and meta, 6.7:1 */
  --garis: #121212;          /* strong rules */
  --garis-sedang: #b5b5b5;   /* dashed frame, underline of quiet links, decoration */
  --garis-tipis: #dedede;    /* hairlines, decoration */
  --bingkai: #ececec;        /* frame behind a cover while it loads or when it fails */
  --kode: #f4f4f4;
  --kaki: #121212;           /* footer: the page ends on an ink plinth */
  --kaki-teks: #ededed;      /* 16:1 on the footer */
  --kaki-abu: #a3a3a3;       /* 7.4:1 on the footer */
  --kaki-garis: #3a3a3a;
  /* accent: oranye by default. --aksen holds white text (5:1+) and is text on white; --aksen-terang is text on dark */
  --aksen: #c2410c;          /* 5.2:1 */
  --aksen-terang: #fb923c;   /* 8.1:1 on #141414 */
  --aksen-teks: var(--aksen);
  --tepi: clamp(1rem, 4vw, 3rem);
}
.et-aksen-biru { --aksen: #1d4ed8; --aksen-terang: #7aa2f7; }      /* 6.7:1 / 7.3:1 */
.et-aksen-hijau { --aksen: #15803d; --aksen-terang: #4ade80; }     /* 5.0:1 / 10.6:1 */
.et-aksen-magenta { --aksen: #be185d; --aksen-terang: #f472b6; }   /* 6.0:1 / 7.0:1 */

@media (prefers-color-scheme: dark) {
  .et {
    --kertas: #141414;
    --tinta: #ededed;          /* 15.7:1 */
    --abu: #a3a3a3;            /* 7.3:1 */
    --garis: #ededed;
    --garis-sedang: #5a5a5a;
    --garis-tipis: #2e2e2e;
    --bingkai: #222;
    --kode: #1f1f1f;
    --kaki: #000;
    --kaki-abu: #a3a3a3;       /* 8.3:1 */
    --kaki-garis: #2e2e2e;
    --aksen-teks: var(--aksen-terang);
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body.et {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0;
  background: var(--kertas);
  color: var(--tinta);
  font-family: "Bricolage Grotesque", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 1.0625rem;
  line-height: 1.6;
  font-optical-sizing: auto;
}
.et a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .2em; }
.et a:hover { color: var(--aksen-teks); }
.et :focus-visible { outline: 3px solid var(--tinta); outline-offset: 3px; }

.et-tersembunyi { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.et .et-lompat {
  position: absolute; left: var(--tepi); top: -5rem; z-index: 10;
  padding: .75rem 1rem; background: var(--tinta); color: var(--kertas); font-weight: 700;
}
.et .et-lompat:focus { top: .75rem; }

.et-wadah { width: min(100% - 2 * var(--tepi), 86rem); margin-inline: auto; }

/* ---------- Header ---------- */
.et-kepala { padding-top: .5rem; }
.et-bilah { display: flex; flex-wrap: wrap; align-items: center; gap: 0 2rem; }
.et-kepala:not(.et-kepala--profil) .et-bilah { padding-bottom: .25rem; border-bottom: 2px solid var(--garis); }
.et-merek { margin: 0; font-size: 1.375rem; line-height: 1.2; font-weight: 750; letter-spacing: -.025em; }
.et-merek a { display: inline-block; padding: .6rem 0; text-decoration: none; }
.et-merek a:hover { color: inherit; text-decoration: underline 2px; text-decoration-color: var(--aksen-teks); }

/* the swatch: the student's accent as a square, after the blog name and on the current menu or filter link */
.et-merek a::after, .et-nama::after {
  content: ""; display: inline-block; width: .3em; height: .3em; margin-left: .1em; background: var(--aksen-teks);
}
.et-nama::after { width: .14em; height: .14em; margin-left: .05em; }

.et-menu { display: flex; flex-wrap: wrap; gap: 0 1.5rem; margin-left: auto; }
.et-menu a, .et-saring a { display: inline-flex; align-items: center; min-height: 2.75rem; font-weight: 600; text-decoration: none; }
.et-menu a:hover, .et-saring a:hover { text-decoration: underline 2px; }
.et-menu a[aria-current]::before, .et-saring a[aria-current]::before {
  content: ""; flex: none; width: .5em; height: .5em; margin-right: .45em; background: var(--aksen-teks);
}

.et-nama {
  margin: clamp(1.5rem, 6vw, 4.5rem) 0 0;
  font-size: clamp(3rem, 1.25rem + 8.5vw, 8.5rem);
  line-height: .9;
  font-weight: 800;
  letter-spacing: -.045em;
  overflow-wrap: break-word;
}
.et-nama--panjang { font-size: clamp(2.5rem, 1rem + 5.5vw, 6rem); line-height: .95; }
.et-nama--sangat-panjang { font-size: clamp(2.25rem, 1rem + 3.8vw, 4.5rem); line-height: 1; letter-spacing: -.035em; }

.et-profil { display: grid; gap: .5rem 2rem; margin-top: clamp(1.5rem, 4vw, 2.75rem); padding-top: 1rem; border-top: 2px solid var(--garis); }
.et-profil p { margin: 0; }
.et-profil-identitas { font-weight: 600; }
.et-profil-tagline { font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem); line-height: 1.25; font-weight: 500; letter-spacing: -.015em; }
.et-profil-tentang { color: var(--abu); max-width: 46ch; }

.et-saring { display: flex; flex-wrap: wrap; align-items: center; gap: 0 1.5rem; margin-top: 1.5rem; border-bottom: 1px solid var(--garis-tipis); }
.et-kepala--profil .et-saring { margin-top: clamp(2rem, 6vw, 4rem); border-top: 1px solid var(--garis-tipis); }
.et-saring-label { color: var(--abu); font-size: .9375rem; }
.et-saring ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 1.25rem; }
.et-saring-jumlah { position: relative; top: -.45em; margin-left: .2em; font-size: .75em; font-weight: 500; color: var(--abu); }

/* ---------- Main ---------- */
.et-utama { flex: 1 0 auto; padding: clamp(1.75rem, 4vw, 3rem) 0 clamp(3.5rem, 9vw, 7rem); }

/* ---------- Post cards ---------- */
.et-kisi { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.5rem 1.5rem; }
.et-kartu { position: relative; display: flex; flex-direction: column; min-width: 0; }
.et-kartu-bingkai { position: relative; flex: 1 0 auto; aspect-ratio: 4 / 3; overflow: hidden; background: var(--bingkai); }
.et-kartu-bingkai img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .2s ease-out; }
.et-kartu-teks { padding-top: .8rem; }
.et-kartu-judul { margin: 0; font-size: 1.3125rem; line-height: 1.2; font-weight: 650; letter-spacing: -.015em; text-wrap: pretty; }
.et-kartu-tautan {
  text-decoration: underline 2px transparent; text-underline-offset: .15em;
  transition: text-decoration-color .2s ease-out;
}
.et .et-kartu-tautan:hover { color: inherit; }
/* the title link covers the whole card, so the card is one tap target */
.et-kartu-tautan::after { content: ""; position: absolute; inset: 0; }
.et .et-kartu-tautan:focus-visible { outline: none; }
.et-kartu-tautan:focus-visible::after { outline: 3px solid var(--tinta); outline-offset: 4px; }
.et-kartu-tautan:hover, .et-kartu-tautan:focus-visible { text-decoration-color: var(--aksen-teks); }
.et-kartu:has(.et-kartu-tautan:hover) .et-kartu-bingkai img,
.et-kartu:has(.et-kartu-tautan:focus-visible) .et-kartu-bingkai img { transform: scale(1.03); }

.et-kartu-ringkasan { margin: .65rem 0 0; max-width: 60ch; }
.et-kartu-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0 1rem; min-height: 2.75rem; margin: .1rem 0 0; color: var(--abu); font-size: .9375rem; }
.et-kartu-kategori {
  position: relative; z-index: 1; display: inline-flex; align-items: center; min-height: 2.75rem;
  color: var(--tinta); font-weight: 600; text-decoration: underline 1px; text-decoration-color: var(--garis-sedang); text-underline-offset: .25em;
}
.et-kartu-kategori:hover { text-decoration: underline 2px; text-decoration-color: currentColor; }

/* the newest post */
.et-kartu--utama .et-kartu-judul { font-size: clamp(1.75rem, 1rem + 2vw, 2.75rem); line-height: 1.05; font-weight: 750; letter-spacing: -.03em; }

/* a post without a cover becomes a swatch: its title set large on the accent, white text */
.et-kartu--polos { background: var(--aksen); color: #fff; }
.et-kartu--polos .et-kartu-teks { flex: 1 0 auto; display: flex; flex-direction: column; min-height: 15rem; padding: 1.25rem 1.25rem .5rem; }
.et-kartu--polos .et-kartu-judul { font-size: clamp(1.625rem, 1.1rem + 1.2vw, 2.125rem); line-height: 1.05; font-weight: 750; letter-spacing: -.03em; }
.et-kartu--polos.et-kartu--utama .et-kartu-judul { font-size: clamp(2.25rem, 1rem + 4vw, 5rem); line-height: .95; letter-spacing: -.045em; }
.et-kartu--polos.et-kartu--utama .et-kartu-ringkasan { font-size: 1.125rem; }
.et-kartu--polos.et-kartu--utama .et-kartu-teks { min-height: 20rem; }
.et-kartu--polos .et-kartu-meta { margin-top: auto; padding-top: 1.25rem; }
.et-kartu--polos .et-kartu-meta, .et .et-kartu--polos a, .et .et-kartu--polos a:hover { color: #fff; }
.et-kartu--polos .et-kartu-tautan:hover, .et-kartu--polos .et-kartu-tautan:focus-visible { text-decoration-color: #fff; }
.et-kartu--polos .et-kartu-kategori { text-decoration-color: rgba(255, 255, 255, .6); }
.et-kartu--polos .et-kartu-kategori:hover { text-decoration-color: #fff; }

/* below four columns: two columns. The newest post and the wide cards take the full row, small cards pair up
   (beranda.php always places small cards in pairs, so no row is left half empty) */
@media (max-width: 63.99rem) {
  .et-kisi--etalase { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .et-kisi--etalase > .et-kartu--utama, .et-kisi--etalase > .et-kartu--lebar { grid-column: 1 / -1; }
  .et-kisi--etalase > .et-kartu--lebar .et-kartu-bingkai { aspect-ratio: 2 / 1; }
}
@media (min-width: 40rem) and (max-width: 63.99rem) {
  .et-kisi--rata { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .et-kisi--etalase > .et-kartu--utama .et-kartu-bingkai { aspect-ratio: 16 / 9; }
}
/* phones: small cards become square thumbnails with a smaller title; images align at the top of each pair */
@media (max-width: 39.99rem) {
  .et-kisi--etalase { align-items: start; gap: 2rem .75rem; }
  .et-kisi--etalase > .et-kartu--polos { align-self: stretch; }
  .et-kisi--etalase > .et-kartu--lebar .et-kartu-bingkai { aspect-ratio: 16 / 9; }
  .et-kisi--etalase > :not(.et-kartu--utama):not(.et-kartu--lebar) .et-kartu-bingkai { aspect-ratio: 1; }
  .et-kisi--etalase > :not(.et-kartu--utama):not(.et-kartu--lebar) .et-kartu-judul { font-size: 1.0625rem; line-height: 1.25; }
  .et-kisi--etalase > :not(.et-kartu--utama):not(.et-kartu--lebar) .et-kartu-meta { column-gap: .75rem; font-size: .875rem; }
  .et-kisi--etalase > .et-kartu--polos:not(.et-kartu--utama):not(.et-kartu--lebar) .et-kartu-teks { min-height: 12rem; padding: .875rem .875rem .25rem; }
  .et-kisi--etalase > .et-kartu--polos:not(.et-kartu--utama):not(.et-kartu--lebar) .et-kartu-judul { font-size: 1.25rem; line-height: 1.1; }
}
@media (min-width: 40rem) {
  /* every small caption keeps room for a two-line title, so the images in a row end on one line */
  .et-kartu:not(.et-kartu--utama):not(.et-kartu--polos) .et-kartu-teks { min-height: calc(.8rem + 2.4 * 1.3125rem + .1rem + 2.75rem); }
  .et-kartu--polos .et-kartu-teks { min-height: 19rem; }
}
/* four columns: sizes come from beranda.php; images start from a ratio and stretch to the row they sit in */
@media (min-width: 64rem) {
  .et-kisi--etalase { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .et-kisi--etalase > .et-kartu--utama { grid-column: span 2; grid-row: span 2; }
  .et-kisi--etalase > .et-kartu--datar { grid-row: span 1; }
  .et-kisi--etalase > .et-kartu--lebar { grid-column: span 2; }
  .et-kisi--etalase > .et-kartu--penuh { grid-column: 1 / -1; }
  .et-kisi--etalase > .et-kartu--utama .et-kartu-bingkai { aspect-ratio: 3 / 2; }
  .et-kisi--etalase > .et-kartu--lebar .et-kartu-bingkai { aspect-ratio: 3 / 1; }
  .et-kisi--etalase > .et-kartu--penuh .et-kartu-bingkai { aspect-ratio: 21 / 9; }
  .et-kisi--etalase > .et-kartu--lebar.et-kartu--polos .et-kartu-judul { font-size: clamp(2rem, 1rem + 1.6vw, 2.75rem); }
  .et-kisi--rata { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------- List pages ---------- */
/* newer on the left, older on the right, whichever of the two exists; the position sits above them on phones */
.et-paginasi {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 0 1.5rem;
  margin-top: clamp(2.5rem, 6vw, 4rem); padding-top: .5rem; border-top: 2px solid var(--garis);
}
.et-paginasi-tautan { display: inline-flex; align-items: center; min-height: 2.75rem; font-size: 1.25rem; font-weight: 700; text-decoration: none; }
.et-paginasi-tautan:hover { text-decoration: underline 2px; }
.et-paginasi-tautan[rel="prev"] { grid-column: 1; grid-row: 2; justify-self: start; }
.et-paginasi-tautan[rel="next"] { grid-column: 2; grid-row: 2; justify-self: end; }
.et-paginasi-posisi { grid-column: 1 / -1; grid-row: 1; padding-top: .5rem; color: var(--abu); }
@media (min-width: 40rem) {
  .et-paginasi { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
  .et-paginasi-tautan[rel="prev"] { grid-row: 1; }
  .et-paginasi-tautan[rel="next"] { grid-column: 3; grid-row: 1; }
  .et-paginasi-posisi { grid-column: 2; padding-top: 0; }
}

/* an empty case: the frame stays, with the reason inside */
.et-kosong { display: grid; place-items: center; min-height: 16rem; padding: 2rem; border: 2px dashed var(--garis-sedang); text-align: center; }
.et-kosong p { margin: 0; max-width: 32ch; font-size: 1.25rem; font-weight: 600; line-height: 1.35; }

.et-arsip-kepala { margin-bottom: clamp(2rem, 5vw, 3rem); }
.et-arsip-jenis { margin: 0; color: var(--abu); font-weight: 600; }
.et-arsip-judul {
  margin: .35rem 0 0; font-size: clamp(2.5rem, 1rem + 6vw, 6rem); line-height: .95; font-weight: 800; letter-spacing: -.045em;
  overflow-wrap: break-word;
}
.et-arsip-jumlah { margin: .75rem 0 0; color: var(--abu); }

.et-cari { display: flex; gap: .5rem; }
.et-cari--arsip { max-width: 36rem; margin-top: 1.5rem; }
.et-cari input {
  -webkit-appearance: none; appearance: none;
  flex: 1; min-width: 0; min-height: 3rem; padding: .5rem .875rem;
  font: inherit; font-size: 1rem; color: var(--tinta); background: var(--kertas);
  border: 2px solid var(--garis); border-radius: 0;
}
.et-cari input::placeholder { color: var(--abu); opacity: 1; }
.et-cari button {
  min-height: 3rem; padding: 0 1.25rem; font: inherit; font-size: 1rem; font-weight: 700;
  color: var(--kertas); background: var(--tinta); border: 2px solid var(--garis); border-radius: 0; cursor: pointer;
}
.et-cari button:hover { color: #fff; background: var(--aksen); border-color: var(--aksen); }

/* ---------- Single post or page ---------- */
.et-artikel-kepala { max-width: 62rem; }
.et-artikel-judul {
  margin: 0; font-size: clamp(2.25rem, 1rem + 4.4vw, 4.5rem); line-height: .98; font-weight: 800; letter-spacing: -.04em;
  overflow-wrap: break-word; text-wrap: balance;
}
.et-artikel-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0 1.5rem; margin: 1rem 0 0; color: var(--abu); }
.et-artikel-meta > * { display: inline-flex; align-items: center; min-height: 2.75rem; }
.et-artikel-meta a {
  color: var(--tinta); font-weight: 600; text-decoration: underline 1px; text-decoration-color: var(--garis-sedang); text-underline-offset: .25em;
}
.et-artikel-meta a:hover { text-decoration: underline 2px; text-decoration-color: currentColor; }
.et-sampul { margin-top: clamp(1.5rem, 4vw, 2.5rem); aspect-ratio: 16 / 9; overflow: hidden; background: var(--bingkai); }
.et-sampul img { display: block; width: 100%; height: 100%; object-fit: cover; }

.et-isi { max-width: 70ch; margin-top: clamp(2rem, 5vw, 3.5rem); font-size: 1.125rem; line-height: 1.65; overflow-wrap: break-word; }
.et-isi > :first-child { margin-top: 0; }
.et-isi p, .et-isi ul, .et-isi ol, .et-isi pre, .et-isi table, .et-isi figure, .et-isi blockquote { margin: 0 0 1.25em; }
.et-isi h2 { margin: 2em 0 .6em; font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2rem); line-height: 1.15; font-weight: 750; letter-spacing: -.025em; }
.et-isi h3 { margin: 1.75em 0 .5em; font-size: 1.375rem; line-height: 1.2; font-weight: 700; letter-spacing: -.015em; }
.et-isi h4 { margin: 1.5em 0 .5em; font-size: 1.125rem; line-height: 1.3; font-weight: 700; }
.et-isi a { text-decoration: underline 2px; text-decoration-color: var(--aksen-teks); }
.et-isi ul, .et-isi ol { padding-left: 1.4em; }
.et-isi li { margin: .3em 0; }
.et-isi li::marker { color: var(--abu); }
/* Bricolage has no italic, so a quotation is set larger and heavier behind an ink rule */
.et-isi blockquote { margin: 2em 0; padding-left: 1.25rem; border-left: 3px solid var(--garis); font-size: 1.3125rem; line-height: 1.45; font-weight: 500; letter-spacing: -.01em; }
.et-isi blockquote p:last-child { margin-bottom: 0; }
.et-isi pre { overflow-x: auto; padding: 1rem 1.25rem; background: var(--kode); font-size: .9375rem; line-height: 1.55; }
.et-isi code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .88em; }
.et-isi :not(pre) > code { padding: .1em .3em; background: var(--kode); }
.et-isi img { display: block; max-width: 100%; height: auto; }
.et-isi figure { margin: 2em 0; }
.et-isi figcaption { margin-top: .6rem; color: var(--abu); font-size: .9375rem; line-height: 1.5; }
.et-isi table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; font-size: 1rem; font-variant-numeric: tabular-nums; }
/* cells keep a readable width; a wide table scrolls inside its own box instead of squeezing its columns */
.et-isi th, .et-isi td { min-width: 6.5rem; padding: .5rem .75rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--garis-tipis); }
.et-isi th { font-weight: 700; border-bottom: 2px solid var(--garis); }
.et-isi iframe { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; margin: 0 0 1.25em; border: 0; background: var(--bingkai); }
.et-isi hr { width: 4rem; margin: 2.5em 0; border: 0; border-top: 2px solid var(--garis); }

.et-tag { margin-top: 2.5rem; }
.et-tag ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.et-tag a { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 1rem; border: 2px solid var(--garis); font-weight: 600; text-decoration: none; }
.et-tag a:hover { border-color: var(--aksen-teks); }

/* the hanging title: on wide screens the text column starts a quarter in, the title stays at the left edge */
@media (min-width: 64rem) {
  .et-isi, .et-tag { margin-left: 25%; }
}

.et-sebelah { display: grid; gap: 0 2rem; margin-top: clamp(3rem, 8vw, 5.5rem); border-top: 2px solid var(--garis); }
.et-sebelah a { display: block; padding: 1.25rem 0; text-decoration: none; }
.et .et-sebelah a:hover { color: inherit; }
.et-sebelah a + a { border-top: 1px solid var(--garis-tipis); }
.et-sebelah-label { display: block; color: var(--abu); font-size: .9375rem; }
.et-sebelah-judul {
  display: block; margin-top: .35rem; font-size: clamp(1.5rem, 1rem + 1.8vw, 2.5rem); line-height: 1.05; font-weight: 750; letter-spacing: -.03em;
  text-decoration: underline 2px transparent; text-underline-offset: .12em; transition: text-decoration-color .2s ease-out;
}
.et-sebelah a:hover .et-sebelah-judul, .et-sebelah a:focus-visible .et-sebelah-judul { text-decoration-color: var(--aksen-teks); }
@media (min-width: 48rem) {
  .et-sebelah { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .et-sebelah a + a { border-top: 0; }
  .et-sebelah-baru { grid-column: 2; text-align: right; }
}

/* ---------- Error page ---------- */
.et-galat { padding: clamp(1rem, 6vw, 4rem) 0; }
.et-galat-judul { margin: 0; max-width: 14ch; font-size: clamp(2.5rem, 1rem + 6vw, 6rem); line-height: .95; font-weight: 800; letter-spacing: -.045em; overflow-wrap: break-word; }
.et-galat p { margin: 1.5rem 0 0; }
.et-galat-kembali {
  display: inline-flex; align-items: center; min-height: 2.75rem; font-size: 1.25rem; font-weight: 700;
  text-decoration: underline 2px; text-decoration-color: var(--aksen-teks); text-underline-offset: .2em;
}

/* ---------- Footer ---------- */
.et-kaki { padding: clamp(3rem, 7vw, 5rem) 0 1.5rem; background: var(--kaki); color: var(--kaki-teks); }
.et-kaki-kisi { display: grid; gap: 2.5rem; }
.et-kaki-label { margin: 0 0 .75rem; font-size: .9375rem; font-weight: 600; color: var(--kaki-abu); }
.et-penulis-nama { margin: 0; font-size: clamp(1.75rem, 1rem + 2.5vw, 3rem); line-height: 1; font-weight: 800; letter-spacing: -.035em; }
.et-penulis-identitas { margin: .6rem 0 0; color: var(--kaki-abu); }
.et-penulis-tentang { margin: 1rem 0 0; max-width: 60ch; }
.et .et-kaki a:hover { color: var(--aksen-terang); }
.et .et-kaki :focus-visible { outline-color: var(--kaki-teks); }
.et-kaki .et-cari input { color: var(--kaki-teks); background: var(--kaki); border-color: var(--kaki-teks); }
.et-kaki .et-cari input::placeholder { color: var(--kaki-abu); }
.et-kaki .et-cari button { color: var(--kaki); background: var(--kaki-teks); border-color: var(--kaki-teks); }
.et-kaki .et-cari button:hover { color: #fff; background: var(--aksen); border-color: var(--aksen); }
.et-asal { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0 1.5rem; margin: 0; padding-top: .5rem; border-top: 1px solid var(--kaki-garis); color: var(--kaki-abu); }
.et-asal a { display: inline-flex; align-items: center; min-height: 2.75rem; color: var(--kaki-teks); }
@media (min-width: 52rem) {
  .et-profil { grid-template-columns: minmax(0, 3fr) minmax(0, 5fr) minmax(0, 4fr); }
  .et-profil-identitas { grid-column: 1; }
  .et-profil-tagline { grid-column: 2; }
  .et-profil-tentang { grid-column: 3; }
  .et-kaki-kisi { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: 4rem; }
  .et-asal { grid-column: 1 / -1; }
}
@media (max-width: 39.99rem) {
  .et-menu { margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .et-kartu-bingkai img, .et-kartu-tautan, .et-sebelah-judul { transition: none; }
  .et-kartu:has(.et-kartu-tautan:hover) .et-kartu-bingkai img,
  .et-kartu:has(.et-kartu-tautan:focus-visible) .et-kartu-bingkai img { transform: none; }
}