/*
Theme Name: The Indonesian
Theme URI: https://example.com/the-indonesian
Author: The Indonesian
Description: Tema blog klasik bergaya majalah, terinspirasi The New Yorker. Responsif, cepat, dan siap dipakai untuk tulisan panjang.
Version: 1.0.0
Requires at least: 5.8
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: the-indonesian
Tags: blog, news, one-column, two-columns, custom-menu, custom-logo, featured-images, threaded-comments, translation-ready
*/
:root{--ink:#1b1b1b;--paper:#fff;--mute:#6a6762;--rule:#d8d4cc;--accent:#8a1c2b;--tint:#f3f1ec;
--head:"Playfair Display",Georgia,serif;--body:"Source Serif 4",Georgia,serif;--ui:"Inter",system-ui,sans-serif}
*{box-sizing:border-box}
html{scroll-padding-top:70px}
body{margin:0;background:var(--paper);color:var(--ink);font:18px/1.65 var(--body);-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
a:hover{color:var(--accent)}
a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px}
.skip{position:absolute;left:-999px}.skip:focus{left:8px;top:8px;background:#fff;padding:8px;z-index:99}
.topbar{border-bottom:1px solid var(--rule);font:13px var(--ui);color:var(--mute)}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;min-height:40px}
.topbar a{margin-left:20px}
.masthead{text-align:center;padding:28px 0 18px}
.masthead .logo{font:900 clamp(40px,8vw,84px)/1 var(--head);letter-spacing:-.01em;display:inline-block}
.masthead .tag{font:italic 15px var(--body);color:var(--mute);margin:8px 0 0}
.nav{border-top:3px double var(--ink);border-bottom:1px solid var(--ink);position:sticky;top:0;background:var(--paper);z-index:20}
.nav .wrap{display:flex;justify-content:center;align-items:center}
.nav ul{list-style:none;margin:0;padding:0;display:flex;gap:30px}
.nav a{display:block;padding:13px 0;font:600 15px var(--head)}
.nav a[aria-current],.nav a:hover{color:var(--accent)}
.burger{display:none;background:none;border:0;font:600 15px var(--head);padding:13px 0;cursor:pointer;color:var(--ink)}
.hero{display:grid;grid-template-columns:1.7fr 1fr;gap:40px;padding:40px 0;border-bottom:1px solid var(--rule)}
.ph{background:var(--tint);aspect-ratio:3/2;position:relative;overflow:hidden}
.ph.a{background:#2c3a5a}.ph.b{background:#b4532f}.ph.c{background:#4f6b57}.ph.d{background:#c9a24b}.ph.e{background:#7a6a8a}
.ph::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(45deg,transparent 0 14px,rgba(255,255,255,.08) 14px 15px)}
.cat{font:600 13px var(--ui);color:var(--accent)}
.hero h1{font:700 clamp(30px,4.4vw,52px)/1.1 var(--head);margin:14px 0 12px}
.dek{color:#3b3935;margin:0 0 12px}
.by{font:13px var(--ui);color:var(--mute)}
.by b{color:var(--ink);font-weight:600}
.hero-side{border-left:1px solid var(--rule);padding-left:40px}
.sec-title{font:700 20px var(--head);margin:0 0 18px;padding-bottom:10px;border-bottom:2px solid var(--ink)}
.item{padding:16px 0;border-bottom:1px solid var(--rule)}
.item:last-child{border:0}
.item h3{font:700 20px/1.25 var(--head);margin:6px 0}
.section{padding:40px 0}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:36px}
.card h3{font:700 23px/1.2 var(--head);margin:14px 0 8px}
.card p{margin:0 0 10px;font-size:16px;color:#3b3935}
.layout{display:grid;grid-template-columns:2fr 1fr;gap:56px}
.row{display:grid;grid-template-columns:200px 1fr;gap:24px;padding:24px 0;border-bottom:1px solid var(--rule)}
.row h3{font:700 24px/1.2 var(--head);margin:6px 0 8px}
.row p{margin:0 0 8px;font-size:16px}
.side-box{background:var(--tint);padding:26px;margin-bottom:32px}
.side-box h2{font:700 20px var(--head);margin:0 0 8px}
.side-box p{font-size:15px;margin:0 0 16px}
.form{display:flex;flex-direction:column;gap:10px}
.form input{padding:12px;border:1px solid var(--ink);font:15px var(--ui);background:#fff}
.btn{background:var(--ink);color:#fff;border:0;padding:12px 18px;font:600 14px var(--ui);cursor:pointer}
.btn:hover{background:var(--accent)}
.popular ol{padding-left:22px;margin:0}
.popular li{font:700 17px/1.3 var(--head);padding:10px 0;border-bottom:1px solid var(--rule)}
.article{max-width:720px;margin:0 auto;padding:48px 24px}
.article h1{font:700 clamp(32px,5vw,54px)/1.1 var(--head);margin:14px 0}
.article .dek{font:italic 22px/1.4 var(--body)}
.article .by{padding:16px 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);margin:24px 0}
.article figure{margin:32px -80px}
.article figcaption{font:13px var(--ui);color:var(--mute);margin-top:8px}
.article .entry-content>p:first-of-type::first-letter{font:900 4.4em/.8 var(--head);float:left;padding:6px 10px 0 0}
.article blockquote{font:italic 26px/1.35 var(--head);margin:36px 0;padding:0 0 0 24px;border-left:3px solid var(--accent)}
.tags{display:flex;gap:10px;flex-wrap:wrap;margin-top:32px}
.tags a{border:1px solid var(--rule);padding:4px 12px;font:13px var(--ui)}
.footer{background:var(--ink);color:#e8e5de;margin-top:40px;padding:48px 0 24px}
.footer a{color:#e8e5de}.footer a:hover{color:#fff;text-decoration:underline}
.f-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:32px}
.footer .logo{font:900 32px var(--head)}
.footer h4{font:600 15px var(--head);margin:0 0 12px}
.footer ul{list-style:none;margin:0;padding:0;font:14px/2 var(--ui)}
.footer p{font-size:14px;color:#aaa6a0}
.copy{border-top:1px solid #444;margin-top:32px;padding-top:18px;font:13px var(--ui);color:#aaa6a0}
@media(max-width:960px){.hero,.layout{grid-template-columns:1fr}.hero-side{border:0;padding:0}.grid{grid-template-columns:repeat(2,1fr)}.f-grid{grid-template-columns:1fr 1fr}.article figure{margin:32px 0}}
@media(max-width:680px){body{font-size:17px}.topbar .date{display:none}.topbar .wrap{justify-content:flex-end}
.nav .wrap{justify-content:space-between}.burger{display:block}
.nav ul{display:none;position:absolute;top:100%;left:0;right:0;background:var(--paper);flex-direction:column;gap:0;border-bottom:1px solid var(--ink);padding:0 24px}
.nav ul.open{display:flex}.nav li{border-top:1px solid var(--rule)}
.grid{grid-template-columns:1fr}.row{grid-template-columns:1fr;gap:12px}.f-grid{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
/* ---- WordPress ---- */
a.ph,.thumb{display:block}
.thumb img{width:100%;aspect-ratio:3/2;object-fit:cover}
.hero-text{padding-top:6px}
.nav .current-menu-item>a,.nav .current-cat>a,.nav .current-menu-ancestor>a{color:var(--accent)}
.nav ul ul{display:none}
.search{display:flex;gap:6px}
.search input{border:1px solid var(--rule);padding:5px 10px;font:13px var(--ui);background:#fff;width:150px}
.search button{background:none;border:0;font:600 13px var(--ui);cursor:pointer;color:var(--ink)}
.page-head h1{font:700 clamp(30px,4vw,44px)/1.1 var(--head);margin:0 0 8px}
.page-head p{color:var(--mute);margin:0 0 20px}
.pagination{margin:32px 0;font:600 14px var(--ui)}
.nav-links{display:flex;gap:10px;flex-wrap:wrap}
.page-numbers{padding:6px 12px;border:1px solid var(--rule)}
.page-numbers.current{background:var(--ink);color:#fff;border-color:var(--ink)}
.widget{margin-bottom:32px}
.widget ul{list-style:none;padding:0;margin:0}
.widget li{padding:8px 0;border-bottom:1px solid var(--rule);font:600 16px var(--head)}
.author-box{display:flex;gap:16px;background:var(--tint);padding:20px;margin-top:40px;font-size:15px}
.author-box img{border-radius:50%;height:64px}
.author-box p{margin:4px 0 0}
.post-navigation .nav-links{justify-content:space-between;margin-top:40px;padding-top:20px;border-top:1px solid var(--rule);font:600 16px var(--head)}
.comments{margin-top:56px}
.comments-title{font:700 24px var(--head)}
.comment-list,.comment-list .children{list-style:none;padding:0}
.comment-list .children{padding-left:24px}
.comment-body{padding:18px 0;border-bottom:1px solid var(--rule);font-size:16px}
.comment-author img{float:left;margin-right:12px;border-radius:50%}
.comment-form input[type=text],.comment-form input[type=email],.comment-form input[type=url],.comment-form textarea{width:100%;padding:10px;border:1px solid var(--ink);font:16px var(--body)}
.entry-content a{color:var(--accent);text-decoration:underline}
.entry-content h2,.entry-content h3{font-family:var(--head);line-height:1.2;margin:1.8em 0 .6em}
.entry-content img{height:auto}
.alignleft{float:left;margin:0 20px 10px 0}.alignright{float:right;margin:0 0 10px 20px}.aligncenter{margin:0 auto;display:block}
.wp-caption{max-width:100%}.wp-caption-text,.wp-element-caption{font:13px var(--ui);color:var(--mute)}
.screen-reader-text{position:absolute;left:-9999px}
.error-page{text-align:center;padding:80px 0}
.more-link{display:inline-block;margin-top:20px;font:600 15px var(--head);border-bottom:2px solid var(--ink)}
.admin-bar .nav{top:32px}
@media(max-width:782px){.admin-bar .nav{top:46px}}
@media(max-width:680px){.topbar .search input{width:110px}.author-box{flex-direction:column}}