/*
 * Mading: the landing page of the campus's student blogs as a majalah dinding, sheets pinned to a cork board.
 * Design read: campus hub for student blogs, wall-magazine language, dial ENERGY 3 / RHYTHM 3 / MOTION 2.
 * - Cork board with a fine speckle: the board is the identity, so it is the one texture on the page.
 * - Text never sits on the cork: every sheet, label and slip is its own paper with ink at 7:1 or more.
 * - Bricolage Grotesque: a sturdy grotesk with optical sizes that holds both cut-out labels and small print.
 *   Caveat only for the hand-written notes (read counts, step numbers), the way students annotate a mading.
 * - One accent, pin red, for pins, hand notes and the main button. Tilted sheets straighten when pointed at or
 *   focused and settle into place as they scroll in (mading.js); nothing moves with prefers-reduced-motion.
 * - Light only: a cork board and paper do not have a dark version.
 */
:root {
  --papan: #b88a5d;
  --kayu: #3a2a1e;
  --kayu-teks: #f6efe3;     /* 12.9:1 on the frame */
  --kertas: #fffdf6;
  --kertas-kuning: #fff5cc; /* announcement sheets */
  --tinta: #1f1b17;         /* 16:1 on paper */
  --abu: #5a5249;           /* 7.2:1 on paper */
  --merah: #b3261e;         /* 6.3:1 on paper, white on it 6.5:1 */
  --selotip: rgba(250, 230, 150, .8);
  --bayang: 0 1px 1px rgba(40, 22, 6, .18), 0 8px 16px -6px rgba(40, 22, 6, .45);
  --lebar: 76rem;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  color: var(--tinta);
  font-family: "Bricolage Grotesque", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 1rem;
  line-height: 1.55;
  font-optical-sizing: auto;
  background-color: var(--papan);
  background-image:
    radial-gradient(rgba(78, 46, 18, .22) .8px, transparent 1.4px),
    radial-gradient(rgba(255, 238, 205, .2) .8px, transparent 1.4px);
  background-size: 7px 7px, 11px 11px;
  background-position: 0 0, 3px 5px;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
a { color: inherit; text-underline-offset: .18em; }
img { max-width: 100%; height: auto; display: block; }
:focus-visible { outline: 3px solid var(--tinta); outline-offset: 2px; }
.md-bingkai :focus-visible, .md-kaki :focus-visible { outline-color: var(--kayu-teks); }

.md-tersembunyi { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.md-lompat { position: absolute; left: 1rem; top: -4rem; z-index: 20; padding: .75rem 1rem; background: var(--kertas); color: var(--tinta); }
.md-lompat:focus { top: 1rem; }

/* ---- Frame: the wooden edge of the board ---- */
.md-bingkai { background: var(--kayu); color: var(--kayu-teks); border-bottom: 6px solid #2a1d14; }
.md-bingkai-dalam { max-width: var(--lebar); margin: 0 auto; padding: .75rem 1.25rem; display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.5rem; }
.md-merek { display: flex; align-items: center; gap: .75rem; min-height: 2.75rem; text-decoration: none; font-weight: 700; font-size: 1.0625rem; line-height: 1.2; margin-right: auto; }
.md-logo { width: 2.5rem; height: 2.5rem; object-fit: contain; background: var(--kertas); border-radius: 3px; padding: 2px; }
.md-monogram { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; background: var(--kertas); color: var(--tinta); border-radius: 3px; font-weight: 800; }
.md-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 .25rem; }
.md-nav a { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 .75rem; text-decoration: none; border-radius: 3px; }
.md-nav a:hover { background: rgba(246, 239, 227, .12); }
.md-nav a[aria-current] { background: var(--kayu-teks); color: var(--kayu); font-weight: 700; }

/* ---- Buttons ---- */
.md-tombol {
  display: inline-flex; align-items: center; justify-content: center; min-height: 2.75rem; padding: 0 1.1rem;
  font: inherit; font-weight: 700; color: var(--kertas); background: var(--tinta); border: 0; border-radius: 4px;
  text-decoration: none; cursor: pointer;
}
.md-tombol:hover { background: #3a332c; }
.md-tombol-utama { background: var(--merah); }
.md-tombol-utama:hover { background: #8f1d16; }
.md-tombol-masuk { background: var(--kayu-teks); color: var(--kayu); }
.md-tombol-masuk:hover { background: #fff; }

/* ---- Board ---- */
.md-papan { flex: 1 0 auto; width: 100%; max-width: var(--lebar); margin: 0 auto; padding: 2.5rem 1.25rem 4rem; }

/* A sheet of paper with a red pin. --putar tilts it; pointing at it straightens it. */
.md-lembar {
  --putar: 0deg;
  position: relative;
  background: var(--kertas);
  padding: 1.5rem 1.25rem 1.25rem;
  box-shadow: var(--bayang);
  transform: rotate(var(--putar));
  transition: transform .2s ease, box-shadow .2s ease;
}
.md-lembar::before {
  content: "";
  position: absolute; top: -.45rem; left: 50%; width: 1rem; height: 1rem; margin-left: -.5rem; z-index: 2;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #f08a7f 0 18%, var(--merah) 45%, #6e140f 100%);
  box-shadow: 0 2px 2px rgba(0, 0, 0, .35);
}
.md-lembar:hover, .md-lembar:focus-within { transform: rotate(0) translateY(-3px); box-shadow: 0 1px 1px rgba(40, 22, 6, .18), 0 14px 22px -8px rgba(40, 22, 6, .5); }
.md-kisi > :nth-child(4n+1) { --putar: -1.1deg; }
.md-kisi > :nth-child(4n+2) { --putar: .8deg; }
.md-kisi > :nth-child(4n+3) { --putar: -.4deg; }
.md-kisi > :nth-child(4n+4) { --putar: 1.3deg; }

/* Settling in on scroll, only when mading.js runs and motion is welcome */
@media (prefers-reduced-motion: no-preference) {
  .md-js .md-kisi > .md-lembar:not(.md-terpasang), .md-js .md-kisi > .md-kartu-nama:not(.md-terpasang), .md-js .md-kisi > .md-cetak:not(.md-terpasang) {
    transform: translateY(1.25rem) rotate(calc(var(--putar) * 3));
  }
  .md-js .md-kisi > .md-terpasang { transition: transform .45s cubic-bezier(.2, .8, .3, 1.2), box-shadow .2s ease; }
}
@media (prefers-reduced-motion: reduce) {
  .md-lembar, .md-kartu-nama, .md-cetak { transition: none; }
  .md-lembar:hover, .md-lembar:focus-within, .md-kartu-nama:hover, .md-kartu-nama:focus-within, .md-cetak:hover { transform: rotate(var(--putar)); }
}

/* Section label: black tape with cut-out letters */
.md-label {
  display: inline-block; margin: 0 0 1.5rem; padding: .35rem .9rem .4rem;
  background: var(--tinta); color: #fff; font-size: clamp(1.35rem, 3vw, 1.75rem); font-weight: 800; line-height: 1.2;
  transform: rotate(-1.2deg); box-shadow: 0 2px 4px rgba(0, 0, 0, .3);
}
.md-label small { display: block; font-size: .875rem; font-weight: 500; color: #e9e3da; }
.md-label-besar { font-size: clamp(1.75rem, 5vw, 2.75rem); }
.md-sublabel { display: inline-block; margin: 2rem 0 1rem; padding: .25rem .7rem; background: var(--kertas); font-size: 1.125rem; transform: rotate(.8deg); box-shadow: var(--bayang); }

/* Hand-written notes in pin red */
.md-catatan-tangan { font-family: Caveat, "Comic Sans MS", cursive; font-weight: 600; color: var(--merah); font-size: 1.375rem; line-height: 1.2; margin: .75rem 0 0; }

/* ---- Welcome ---- */
.md-sambutan { display: grid; gap: 2rem; margin-bottom: 3.5rem; }
.md-lembar-utama { --putar: -.6deg; padding: 2.5rem 2rem 2rem; }
.md-lembar-utama::before { left: 1.5rem; margin-left: 0; }
.md-lembar-utama::after { content: ""; position: absolute; top: -.45rem; right: 1.5rem; width: 1rem; height: 1rem; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #f08a7f 0 18%, var(--merah) 45%, #6e140f 100%); box-shadow: 0 2px 2px rgba(0, 0, 0, .35); }
.md-judul { margin: 0; font-size: clamp(2.25rem, 6vw, 4.25rem); line-height: 1.02; font-weight: 800; letter-spacing: -.02em; }
.md-pengantar { margin: 1rem 0 1.5rem; font-size: 1.125rem; max-width: 40rem; color: var(--abu); }
.md-cari { display: flex; gap: .5rem; max-width: 36rem; }
.md-cari input {
  flex: 1; min-width: 0; min-height: 2.75rem; padding: .5rem .85rem; font: inherit; font-size: 1rem;
  color: var(--tinta); background: #fff; border: 2px solid var(--tinta); border-radius: 4px;
}
.md-catatan-jumlah { transform: rotate(-2deg); display: inline-block; font-size: 1.625rem; }
.md-lembar-ajakan { --putar: 1.2deg; background: var(--kertas-kuning); align-self: start; }
.md-ajakan-judul { margin: 0 0 .5rem; font-size: 1.75rem; line-height: 1.1; font-weight: 800; }
.md-lembar-ajakan p { margin: 0 0 1rem; }
.md-alamat-contoh { font-weight: 600; overflow-wrap: anywhere; }
.md-tautan-kecil { display: inline-flex; align-items: center; min-height: 2.75rem; margin-left: .75rem; font-weight: 600; }

/* ---- Sections ---- */
.md-bagian { margin: 0 0 4rem; }
.md-kisi { display: grid; gap: 2rem 1.75rem; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); }
.md-kosong, .md-catatan-papan, .md-hasil {
  display: inline-block; margin: 0 0 1.5rem; padding: .75rem 1rem; background: var(--kertas); box-shadow: var(--bayang); max-width: 40rem;
}
.md-catatan-papan { display: table; transform: rotate(.6deg); }
.md-selengkapnya { margin: 2rem 0 0; }

/* Post sheets */
.md-lembar-tulisan { display: flex; flex-direction: column; }
.md-foto { position: relative; margin: -.5rem -.25rem 1rem; }
.md-foto img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.md-foto::after {
  content: ""; position: absolute; top: -.6rem; left: 50%; width: 5.5rem; height: 1.4rem; margin-left: -2.75rem;
  background: var(--selotip); transform: rotate(-3deg); box-shadow: 0 1px 1px rgba(0, 0, 0, .08);
}
.md-ada-foto::before { display: none; }
.md-peringkat { position: absolute; top: .6rem; right: .9rem; font-family: Caveat, cursive; font-weight: 600; font-size: 2.5rem; line-height: 1; color: var(--merah); }
.md-ada-foto .md-peringkat { top: auto; right: .5rem; margin-top: -3rem; background: var(--kertas); padding: 0 .4rem; border-radius: 3px; position: relative; align-self: flex-end; }
.md-lembar-judul { margin: 0 0 .5rem; font-size: 1.25rem; line-height: 1.25; font-weight: 700; padding-right: 1.5rem; }
.md-lembar-judul a { text-decoration: none; }
.md-lembar-judul a:hover { text-decoration: underline; }
.md-lembar-ringkasan { margin: 0 0 .75rem; color: var(--abu); font-size: .9375rem; }
.md-lembar-penulis { margin: auto 0 0; font-size: .9375rem; font-weight: 600; }
.md-lembar-penulis a { display: inline-block; padding: .35rem 0; }
.md-lembar-tanggal { margin: 0; font-size: .875rem; color: var(--abu); }

/* Name cards of blogs */
.md-kartu-nama {
  --putar: 0deg;
  position: relative; display: flex; gap: 1rem; padding: 1.25rem; background: var(--kertas); box-shadow: var(--bayang);
  transform: rotate(var(--putar)); transition: transform .2s ease;
}
.md-kartu-nama::before { content: ""; position: absolute; top: -.55rem; left: 1rem; width: 4rem; height: 1.25rem; background: var(--selotip); transform: rotate(-6deg); }
.md-kartu-nama:hover, .md-kartu-nama:focus-within { transform: rotate(0) translateY(-3px); }
.md-kartu-inisial { flex: none; display: grid; place-items: center; width: 3.5rem; height: 3.5rem; background: var(--tinta); color: var(--kertas); font-weight: 800; font-size: 1.25rem; }
.md-kartu-teks { min-width: 0; }
.md-kartu-judul { margin: 0; font-size: 1.1875rem; line-height: 1.25; }
.md-kartu-judul a { text-decoration: none; }
.md-kartu-judul a:hover { text-decoration: underline; }
.md-kartu-orang { margin: .25rem 0 0; font-weight: 600; font-size: .9375rem; }
.md-kartu-tagline { margin: .4rem 0 0; color: var(--abu); font-size: .9375rem; }
.md-kartu-meta { margin: .5rem 0 0; font-size: .875rem; color: var(--abu); }
.md-kartu-host { margin: .25rem 0 0; font-size: .8125rem; color: var(--abu); overflow-wrap: anywhere; }
.md-daftar-baru { list-style: none; margin: 0; padding: 1rem 1.25rem; background: var(--kertas); box-shadow: var(--bayang); max-width: 40rem; }
.md-daftar-baru li { padding: .4rem 0; border-bottom: 1px dashed #d9cfbf; }
.md-daftar-baru li:last-child { border-bottom: 0; }
.md-daftar-baru a { font-weight: 700; }
.md-daftar-baru span { color: var(--abu); font-size: .9375rem; }

/* Announcement sheet: the yellow pad of a notice */
.md-bagian-dua { display: grid; gap: 2.5rem; align-items: start; }
.md-pengumuman { --putar: -.8deg; background: var(--kertas-kuning); padding: 2rem 1.75rem 1.5rem; }
.md-pengumuman-judul { margin: 0 0 1.25rem; font-size: 1.75rem; line-height: 1.1; font-weight: 800; }
.md-langkah { list-style: none; margin: 0 0 1rem; padding: 0; counter-reset: langkah; }
.md-langkah li { counter-increment: langkah; position: relative; padding: 0 0 1rem 3rem; }
.md-langkah li::before { content: counter(langkah); position: absolute; left: 0; top: -.35rem; font-family: Caveat, cursive; font-weight: 600; font-size: 2.25rem; line-height: 1; color: var(--merah); }
.md-langkah h3 { margin: 0; font-size: 1.125rem; }
.md-langkah p { margin: .2rem 0 0; color: var(--abu); overflow-wrap: anywhere; }
.md-pengumuman-lebar { margin-top: 3rem; max-width: 44rem; }

/* Programme tags */
.md-label-prodi { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .75rem; }
.md-label-prodi a {
  display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 .9rem; background: var(--kertas); text-decoration: none; font-weight: 600;
  box-shadow: var(--bayang); border-radius: 2px;
}
.md-label-prodi li:nth-child(odd) a { transform: rotate(-1deg); }
.md-label-prodi li:nth-child(even) a { transform: rotate(.9deg); }
.md-label-prodi a:hover { text-decoration: underline; }
.md-label-prodi a[aria-current] { background: var(--tinta); color: var(--kertas); }
.md-label-prodi span { margin-left: .3rem; font-weight: 400; }
.md-saring .md-label-prodi a { box-shadow: none; border: 1px solid #cfc4b2; transform: none; }

/* Template prints */
.md-cetak { --putar: 0deg; margin: 0; padding: .65rem .65rem 1rem; background: #fff; box-shadow: var(--bayang); transform: rotate(var(--putar)); transition: transform .2s ease; }
.md-cetak:hover { transform: rotate(0) translateY(-3px); }
.md-cetak img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; object-position: top; border: 1px solid #e8e1d4; }
.md-cetak-kosong { display: grid; place-items: center; aspect-ratio: 3 / 2; padding: 1rem; text-align: center; color: var(--abu); background: #f4efe6; border: 1px dashed #c9bda8; }
.md-cetak figcaption { margin-top: .85rem; }
.md-cetak strong { display: block; font-size: 1.25rem; }
.md-cetak span { display: block; color: var(--abu); font-size: .9375rem; margin-top: .25rem; }
.md-kisi-template-besar { grid-template-columns: repeat(auto-fill, minmax(min(100%, 28rem), 1fr)); }

/* Directory and search pages */
.md-kepala-halaman { margin-bottom: 1.25rem; }
.md-saring { --putar: 0deg; margin: 0 0 2.5rem; padding: 1.5rem 1.25rem; }
.md-saring::before { display: none; }
.md-saring .md-cari { margin-bottom: 1rem; }
.md-saring .md-hasil { margin: 1rem 0 0; padding: 0; box-shadow: none; color: var(--abu); }

/* Guide */
.md-catatan-kumpulan { display: grid; gap: 1.75rem; }
.md-lembar-catatan h2 { margin: 0 0 .4rem; font-size: 1.25rem; }
.md-lembar-catatan p { margin: 0; }
.md-catatan-kumpulan > :nth-child(odd) { --putar: .7deg; }
.md-catatan-kumpulan > :nth-child(even) { --putar: -.6deg; }

.md-lembar-galat { --putar: -1deg; max-width: 34rem; margin: 2rem auto; text-align: center; padding: 2.5rem 1.5rem; }
.md-galat-judul { margin: 0 0 1rem; font-size: 1.75rem; line-height: 1.2; }

/* Pagination slips */
.md-paginasi { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin-top: 2.5rem; }
.md-paginasi-tautan { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 1rem; background: var(--kertas); box-shadow: var(--bayang); font-weight: 700; text-decoration: none; }
.md-paginasi-tautan:hover { text-decoration: underline; }
.md-paginasi-posisi { padding: .5rem .85rem; background: var(--tinta); color: #fff; font-size: .9375rem; }

/* ---- Footer: the lower edge of the frame ---- */
.md-kaki { background: var(--kayu); color: var(--kayu-teks); border-top: 6px solid #2a1d14; }
.md-kaki-dalam { max-width: var(--lebar); margin: 0 auto; padding: 1.5rem 1.25rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; }
.md-kaki-nama { margin: 0; font-weight: 700; }
.md-kaki-tautan { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .25rem 1rem; }
.md-kaki-tautan a { display: inline-flex; align-items: center; min-height: 2.75rem; }

@media (min-width: 56rem) {
  .md-sambutan { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); align-items: start; }
  .md-bagian-dua { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
  .md-kisi-populer { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .md-kisi-populer > :first-child { grid-row: span 2; }
  .md-kisi-populer > :first-child .md-lembar-judul { font-size: 1.75rem; }
  .md-kisi-blog { grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr)); }
}
@media (max-width: 40rem) {
  .md-papan { padding-top: 1.75rem; }
  .md-kisi > * { --putar: 0deg !important; }
  .md-lembar-utama { padding: 2rem 1.25rem 1.5rem; }
  .md-cari { flex-direction: column; }
  .md-cari .md-tombol { width: 100%; }
  .md-tautan-kecil { margin-left: 0; }
  .md-merek { margin-right: 0; width: 100%; }
  .md-tombol-masuk { width: 100%; }
}