/* Shared look for the site's own pages besides the home page: the author page, the journal and Kontribusi pages, the privacy page.
   Same paper, ink and Georgia headings as the home page; one calm column. */
:root{color-scheme:light;--ink:#303e31;--muted:#5d6852;--accent:#87634c;--paper:#f6f1e4;--sheet:#fbf8ef;--line:#dcdcca;--deep:#17352f}
*{box-sizing:border-box}
html{background:#e6ece0;-webkit-text-size-adjust:100%}
body{margin:0;color:var(--ink);font-family:Arial,Helvetica,sans-serif;line-height:1.6;-webkit-font-smoothing:antialiased;background:linear-gradient(180deg,#e6ece0,var(--paper) 340px)}
a{color:inherit}
a:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
::selection{background:var(--ink);color:var(--paper)}
img{max-width:100%;height:auto}
.wrap{max-width:720px;margin:0 auto;padding-inline:max(16px,5vw);padding-block:28px 48px}
.top{display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;font-size:11px;letter-spacing:1.3px;line-height:1.6}
.brand img{width:44px;height:44px;border-radius:50%}
.home{font-size:13px;text-underline-offset:4px;padding-block:12px;margin-block:-12px}
nav.crumbs{margin-top:40px;font-size:12.5px;color:var(--muted)}
nav.crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
nav.crumbs li+li::before{content:"/";margin-right:6px;color:var(--line)}
nav.crumbs a{text-underline-offset:3px;padding-block:14px}
.eyebrow{margin:28px 0 0;font-size:11.5px;letter-spacing:3px;text-transform:uppercase;color:var(--accent)}
h1{margin:10px 0 0;font:400 clamp(32px,7vw,52px)/1.08 Georgia,'Times New Roman',serif;letter-spacing:-.03em;color:var(--deep);text-wrap:balance}
h1 i{color:var(--accent)}
h2{margin:40px 0 12px;font:400 24px/1.2 Georgia,'Times New Roman',serif;color:var(--deep)}
.role{margin:14px 0 0;font:italic 400 19px/1.45 Georgia,'Times New Roman',serif;color:var(--accent)}
.prose{margin-top:28px;display:grid;gap:14px;font-size:16.5px;max-width:62ch}
.prose p{margin:0}
.prose blockquote{margin:6px 0;padding-left:16px;border-left:2px solid var(--accent);font:italic 400 18px/1.5 Georgia,'Times New Roman',serif;color:var(--accent)}
.facts{margin:32px 0 0;padding:20px;background:var(--sheet);border:1px solid var(--line);border-radius:14px;display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px 20px;font-size:14.5px}
.facts dt{font-size:11px;letter-spacing:1.8px;text-transform:uppercase;color:var(--muted);padding-top:3px}
.facts dd{margin:0}
.links{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.links a{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border:1px solid var(--line);border-radius:99px;background:var(--sheet);text-decoration:none;font-size:14px}
.links a:hover{border-color:var(--accent)}
.links svg{width:16px;height:16px}
.links .handle{color:var(--muted)}
.more{margin:0;padding:0;list-style:none;display:grid;gap:12px;font-size:15px}
.more a{text-underline-offset:4px}
.more span{display:block;font-size:13px;color:var(--muted)}
.byline{margin:16px 0 0;font-size:13.5px;color:var(--muted)}
.byline a{color:var(--ink);text-underline-offset:3px}
/* journal and Kontribusi pages: photos as a small album, each with its own caption; a photo alone on its row (the first one,
   or the last of an even count) spans the row in its own shape, never taller than most of the screen */
.album{margin:28px 0 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.album figure{margin:0;display:grid;gap:6px}
.album :is(img,video){display:block;width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:10px;background:var(--line)}
.album .is-lebar{grid-column:1/-1}
.album .is-lebar :is(img,video){width:auto;max-width:100%;max-height:78vh;margin-inline:auto;aspect-ratio:auto}
.album figcaption{font-size:12.5px;line-height:1.45;color:var(--muted)}
.artikel-aksi{display:flex;align-items:center;gap:10px;margin:26px 0 0}
.story-artikel{display:inline-flex;align-items:center;gap:9px;padding:12px 20px;border:1px solid #e1d4b6;border-radius:999px;background:#fbf8ef;color:var(--ink);font:inherit;font-size:14.5px;cursor:pointer;transition:border-color .25s,background .25s}
.story-artikel[hidden]{display:none}
.story-artikel svg{width:20px;height:20px;color:var(--accent)}
.story-artikel:active{scale:.98}
@media(hover:hover) and (pointer:fine){.story-artikel:hover{border-color:var(--accent);background:#fffdf7}}
.story-status{margin:10px 0 0;min-height:1.4em;font-size:13px;color:var(--muted)}
.pager{margin:40px 0 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.pager a{display:grid;gap:2px;padding:14px 16px;border:1px solid var(--line);border-radius:12px;background:var(--sheet);text-decoration:none}
.pager a:hover{border-color:var(--accent)}
.pager small{font-size:11px;letter-spacing:1.6px;text-transform:uppercase;color:var(--muted)}
.pager span{font:400 16px/1.3 Georgia,'Times New Roman',serif;color:var(--deep)}
.pager .next{text-align:right;grid-column:2}
/* journal hub: one row per chapter */
.chapters{margin:28px 0 0;padding:0;list-style:none;display:grid;gap:16px}
.chapters a{display:grid;grid-template-columns:120px minmax(0,1fr);gap:16px;align-items:start;padding:12px;border:1px solid var(--line);border-radius:14px;background:var(--sheet);text-decoration:none}
.chapters a:hover{border-color:var(--accent)}
.chapters img{width:120px;aspect-ratio:1;object-fit:cover;border-radius:10px;display:block}
.chapters small{display:block;font-size:11px;letter-spacing:1.6px;text-transform:uppercase;color:var(--accent)}
.chapters strong{display:block;margin-top:4px;font:400 19px/1.25 Georgia,'Times New Roman',serif;color:var(--deep)}
.chapters span{display:block;margin-top:6px;font-size:13.5px;color:var(--muted)}
/* privacy page: the analytics choice */
.choice{margin:16px 0 0;padding:16px;border:1px solid var(--line);border-radius:14px;background:var(--sheet);display:grid;gap:12px}
.choice p{margin:0;font-size:14.5px}
.choice div{display:flex;flex-wrap:wrap;gap:8px}
.choice button{font:inherit;font-size:14px;padding:8px 18px;border-radius:99px;border:1px solid var(--deep);background:transparent;color:var(--deep);cursor:pointer}
.choice button[aria-pressed="true"]{background:var(--deep);color:var(--sheet)}
footer{margin-top:56px;padding-top:18px;border-top:1px solid var(--line);font-size:12.5px;color:var(--muted);display:flex;flex-wrap:wrap;gap:6px 16px;justify-content:space-between}
footer nav{display:flex;flex-wrap:wrap;gap:6px 16px}
/* the small text links reach a tap area of about 44px; inline padding and the negative margins keep every line where it was */
footer nav a{padding-block:12px;margin-block:-12px}
@media(max-width:480px){
  .facts{grid-template-columns:1fr;gap:2px}.facts dd{margin-bottom:10px}
  .album{grid-template-columns:1fr}
  .chapters a{grid-template-columns:84px minmax(0,1fr);gap:12px}.chapters img{width:84px}
  .pager{grid-template-columns:1fr}.pager .next{grid-column:auto}
}
/* Kontribusi articles and /kontribusi (body.tulisan; tools/buat-kontribusi.mjs): read like an article on a good news site or
   blog. One reading column of 640px (about 69 characters at 19px); a wide cover and the cards under it may take 880px.
   Every photo box has its shape (--r) before the file arrives, so nothing moves while photos load. */
.tulisan{--kolom:640px;--lebar:880px;--tepi:max(16px,5vw)}
.tulisan .wrap{max-width:calc(var(--lebar) + 2 * var(--tepi));padding:20px var(--tepi) 40px}
.tulisan .top,.tulisan nav.crumbs{max-width:var(--kolom);margin-inline:auto}
.tulisan nav.crumbs{margin-top:32px;font-size:13.5px}
.tulisan article>:not(.album){max-width:var(--kolom);margin-inline:auto}
.tulisan .eyebrow{margin-top:14px;font-size:14.5px;letter-spacing:0;text-transform:none;color:var(--muted)}
.tulisan .eyebrow b{font-weight:700;color:#7f5d47} /* a shade under --accent: 4.9:1 on the green top of the page */
.tulisan h1{margin-top:10px;font-size:clamp(32px,4.4vw + 15px,46px);line-height:1.12;letter-spacing:-.02em}
.tulisan .byline{margin:20px 0 0;font-size:15px;line-height:1.45;color:var(--ink)}
.tulisan .byline a{font-weight:700;color:var(--deep);text-decoration:none}
.tulisan .byline a:hover{text-decoration:underline;text-underline-offset:3px}
.tulisan .tempat{display:flex;align-items:flex-start;gap:6px;margin:6px 0 0;font-size:14px;line-height:1.45;color:var(--muted)}
.tulisan .tempat svg{flex:none;width:16px;height:16px;margin-top:1px;color:var(--accent)}
.tulisan .album{display:block;margin:0}
.tulisan .album figure{--tinggi:min(70vh,560px);margin:0 auto;width:min(100%,calc(var(--tinggi) * var(--r)));display:block}
.tulisan .album :is(img,video){display:block;width:100%;height:auto;max-height:none;aspect-ratio:var(--r);object-fit:cover;margin:0;border-radius:6px;background:var(--line)}
.tulisan .album figcaption{margin-top:8px;font-size:13.5px;line-height:1.5;color:var(--muted)}
.tulisan .album .sampul{--tinggi:min(62vh,580px);margin-top:32px}
.tulisan .album .sampul:not(.is-tegak){width:min(100%,var(--kolom))}
.tulisan .album .sampul.is-mendatar{width:min(100%,var(--lebar),calc(var(--tinggi) * var(--r)))}
@media(min-width:601px){
  /* every upright photo is as wide as an upright 3:4 cover and no upright photo or video is taller than the cover (LAPTOP_UP
     in the generator); a photo only a little narrower than the column takes all of it (.is-penuh, cropped to 8:7 at most) */
  .tulisan .album figure.is-tegak{--tinggi:min(62vh,560px);width:min(100%,calc(var(--tinggi) * .75),calc(var(--tinggi) * var(--r)))}
  .tulisan .album .is-penuh{width:min(100%,var(--kolom))}
  .tulisan .album .is-penuh :is(img,video){aspect-ratio:8/7}
}
.tulisan .prose{display:block;max-width:var(--kolom);margin-top:32px;font-size:18px;line-height:1.7;color:var(--ink)}
.tulisan .prose p{margin:0 0 1.15em}
.tulisan .prose .album{margin:2em 0 2.2em}
.tulisan .prose .album:has(.is-pasang){display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.tulisan .prose .album .is-pasang{width:100%}
.tulisan .prose .album .is-pasang :is(img,video){aspect-ratio:var(--rp)}
.tulisan .prose .album .is-pasang:last-child:nth-child(odd){grid-column:1/-1;width:min(100%,calc(var(--tinggi) * var(--r)))}
.tulisan .prose .album .is-pasang:last-child:nth-child(odd) :is(img,video){aspect-ratio:var(--r)}
.tulisan .artikel-aksi{margin-top:36px;padding-top:24px;border-top:1px solid var(--line)}
.tulisan .story-status{min-height:0;margin:8px auto 0}
.tulisan .story-status:empty{margin-top:0}
/* the cards: Kontribusi lainnya under an article, and every article on /kontribusi */
.tulisan .lainnya{margin-top:64px;padding-top:28px;border-top:1px solid var(--line)}
.tulisan .lainnya h2{margin:0 0 20px;font-size:24px}
.tulisan .terkait{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.tulisan .terkait a{display:grid;gap:6px;align-content:start;height:100%;padding:10px 10px 16px;border:1px solid var(--line);border-radius:12px;background:var(--sheet);text-decoration:none;transition:border-color .25s}
.tulisan .terkait a:hover{border-color:var(--accent)}
.tulisan .terkait img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:7px;background:var(--line);margin-bottom:6px}
.tulisan .terkait small{padding-inline:4px;font-size:13px;color:var(--muted)}
.tulisan .terkait .judul{margin:0;padding-inline:4px;font:400 19px/1.3 Georgia,'Times New Roman',serif;color:var(--deep);text-wrap:pretty}
.tulisan .terkait .kutipan{padding-inline:4px;font-size:14px;line-height:1.5;color:var(--muted)}
.tulisan .semua{display:inline-flex;align-items:center;gap:6px;margin-top:24px;font-size:15px;color:var(--deep);text-underline-offset:4px}
.tulisan .semua svg{width:18px;height:18px}
.tulisan footer{margin-top:48px}
.tulisan.daftar{--kolom:var(--lebar)}
.tulisan.daftar h1{margin-top:14px}
.tulisan.daftar .terkait{margin-top:32px}
@media(min-width:601px){
  .tulisan.daftar .terkait{margin-top:40px;padding-top:32px;border-top:1px solid var(--line);grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 24px}
  .tulisan.daftar .terkait a{padding:0;border:0;border-radius:0;background:none;gap:8px}
  .tulisan.daftar .terkait img{aspect-ratio:3/2;border-radius:8px;margin-bottom:4px}
  .tulisan.daftar .terkait small{padding:0}
  .tulisan.daftar .terkait .judul{padding:0;font-size:23px;line-height:1.25}
  .tulisan.daftar .terkait .kutipan{padding:0;font-size:15px}
}
.tulisan.daftar .terkait a:hover .judul,.tulisan .utama a:hover .judul{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.tulisan .utama{margin-top:32px}
.tulisan .utama a{display:grid;gap:10px;color:inherit;text-decoration:none}
.tulisan .utama img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;border-radius:10px;background:var(--line);margin-bottom:6px}
.tulisan .utama small{font-size:14.5px;color:var(--muted)}
.tulisan .utama .judul{margin:0;font:400 clamp(28px,3.6vw + 12px,40px)/1.15 Georgia,'Times New Roman',serif;letter-spacing:-.01em;color:var(--deep);text-wrap:balance}
.tulisan .utama .ringkas{max-width:640px;margin:0;font-size:18px;line-height:1.6;color:var(--ink)}
.tulisan .utama .baca{justify-self:start;margin-top:4px;font-size:15px;font-weight:700;color:var(--deep);border-bottom:2px solid var(--accent);padding-bottom:2px}
@media(min-width:900px){.tulisan .prose{font-size:19px}}
@media(max-width:600px){
  .tulisan nav.crumbs{margin-top:20px}
  .tulisan .album figure{--tinggi:64svh}
  /* a wide cover runs edge to edge; an upright one stands in the middle, under half the screen, so the first line shows */
  .tulisan .album .sampul{--tinggi:56svh;margin-top:24px}
  .tulisan .album .sampul.is-tegak{--tinggi:46svh}
  /* every upright photo and video is as wide as an upright cover of 3:4, so two in a row stand level (UPRIGHT in the generator) */
  .tulisan .album figure.is-tegak,.tulisan .prose .album .is-pasang.is-tegak{width:min(100%,34.5svh,calc(var(--tinggi) * var(--r)))}
  .tulisan .album .sampul:not(.is-tegak){width:calc(100% + 2 * var(--tepi));max-width:none;margin-inline:calc(-1 * var(--tepi))}
  .tulisan .album .sampul:not(.is-tegak) :is(img,video){border-radius:0}
  .tulisan .album .sampul:not(.is-tegak) figcaption{padding-inline:var(--tepi)}
  .tulisan .prose{margin-top:24px}
  .tulisan .prose .album:has(.is-pasang){display:block}
  .tulisan .prose .album .is-pasang+.is-pasang{margin-top:24px}
  .tulisan .prose .album .is-pasang{width:min(100%,calc(var(--tinggi) * var(--r)))}
  .tulisan .prose .album .is-pasang :is(img,video){aspect-ratio:var(--r)}
  .tulisan .lainnya{margin-top:48px}
  .tulisan .terkait{grid-template-columns:1fr;gap:12px}
  .tulisan .terkait a{grid-template-columns:96px minmax(0,1fr);grid-template-rows:auto auto 1fr;column-gap:14px;row-gap:4px;padding:10px}
  .tulisan .terkait img{grid-row:1/4;width:96px;aspect-ratio:1;margin:0}
  .tulisan .terkait small{align-self:end;padding:2px 0 0}
  .tulisan .terkait .judul{padding:0;font-size:17px}
  .tulisan .terkait .kutipan{padding:0;font-size:13.5px;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden}
  /* two lines of the excerpt: its first part, with "…" when that part stops inside a sentence (excerpt() in the generator) */
  .tulisan .terkait .lanjut{display:none}
  .tulisan .terkait .is-potong .awal::after{content:"…"}
}