/* luxury138resmi.com - anggur tua + emas hangat. Majalah dua kolom, badan serif, drop cap. */
:root{
  --wine:#2B0A12; --wine2:#3A1019; --wine3:#4A1622; --line:#5B2430;
  --gold:#D4A15A; --gold2:#B07F3C;
  --ink:#F2E6DC; --ink2:#BCA294;
  --ok:#7BC47F; --no:#D98A80;
}
*{box-sizing:border-box}
body{margin:0;background:var(--wine);color:var(--ink);
  font:17px/1.75 Georgia,"Times New Roman",serif}
img{max-width:100%;height:auto;display:block}
a{color:var(--gold)}

.gutter{max-width:1120px;margin:0 auto;padding:0 24px}

/* masthead */
.plate{background:var(--wine2);border-bottom:1px solid var(--line)}
.plate .gutter{padding-block:16px}
.wordmark{display:inline-block;font-size:23px;font-weight:700;letter-spacing:.4px;text-decoration:none;color:var(--ink)}
.wordmark i{font-style:italic;color:var(--gold)}
.plate .sub{font-family:ui-sans-serif,system-ui,sans-serif;font-size:11px;letter-spacing:2.6px;
  text-transform:uppercase;color:var(--ink2);margin:4px 0 12px}
.plate nav{display:flex;flex-wrap:wrap;gap:0 4px;border-top:1px solid var(--line);padding-top:8px}
.plate nav a{font-family:ui-sans-serif,system-ui,sans-serif;font-size:13.5px;padding:11px 10px;
  color:var(--ink2);text-decoration:none;min-height:48px;display:flex;align-items:center}
.plate nav a:hover{color:var(--gold)}
.plate nav a[aria-current]{color:var(--gold);border-bottom:2px solid var(--gold)}

/* strip peringatan */
.banderole{background:var(--wine3);border-bottom:1px solid var(--line);
  font-family:ui-sans-serif,system-ui,sans-serif;font-size:13.5px}
.banderole p{margin:0;padding:10px 0;color:var(--ink)}

/* dua kolom */
.folio{display:grid;grid-template-columns:minmax(0,1fr) 290px;gap:46px;padding:34px 0 10px;align-items:start}
.copy{min-width:0}
.rail{font-family:ui-sans-serif,system-ui,sans-serif;font-size:14px;position:sticky;top:20px}

/* lede */
.trail{font-family:ui-sans-serif,system-ui,sans-serif;font-size:12.5px;color:var(--ink2);margin:0 0 14px}
.trail a{color:var(--ink2);text-decoration:none}
.overline{font-family:ui-sans-serif,system-ui,sans-serif;font-size:11px;letter-spacing:2.6px;
  text-transform:uppercase;color:var(--gold);margin:0 0 10px}
h1{font-size:36px;line-height:1.2;margin:0 0 16px;font-weight:400;letter-spacing:-.4px}
.stand{font-size:19.5px;line-height:1.62;color:var(--ink2);margin:0 0 26px;
  border-left:3px solid var(--gold);padding-left:18px}

h2{font-size:24px;font-weight:400;margin:34px 0 12px;letter-spacing:-.2px;color:var(--gold)}
h3{font-size:18px;font-weight:700;margin:22px 0 6px;font-family:ui-sans-serif,system-ui,sans-serif}
p{margin:0 0 16px}
.copy>p:first-of-type::first-letter{float:left;font-size:56px;line-height:.86;padding:6px 10px 0 0;color:var(--gold)}
ul,ol{padding-left:22px}
li{margin-bottom:9px}

/* tabel */
.roster{border:1px solid var(--line);background:var(--wine2);margin:22px 0}
.roster figcaption{padding:13px 18px;border-bottom:1px solid var(--line);display:flex;
  justify-content:space-between;gap:12px;flex-wrap:wrap;align-items:baseline;
  font-family:ui-sans-serif,system-ui,sans-serif}
.roster figcaption b{font-size:15px;font-weight:700}
.roster figcaption span{font-size:12.5px;color:var(--ink2)}
.scroll{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-family:ui-sans-serif,system-ui,sans-serif;font-size:14.5px}
th{text-align:left;padding:10px 18px;font-size:11px;letter-spacing:1.4px;text-transform:uppercase;
  color:var(--ink2);border-bottom:1px solid var(--line);font-weight:600}
td{padding:13px 18px;border-bottom:1px solid var(--line)}
tr:last-child td{border-bottom:0}
.state{display:inline-block;font-size:11.5px;letter-spacing:.8px;text-transform:uppercase;
  padding:2px 9px;border-radius:2px;font-weight:700}
.state-ok{background:rgba(123,196,127,.16);color:var(--ok);border:1px solid rgba(123,196,127,.4)}
.state-no{background:rgba(217,138,128,.14);color:var(--no);border:1px solid rgba(217,138,128,.4)}

/* blok */
.flag{background:var(--wine2);border-left:3px solid var(--gold);padding:16px 20px;margin:22px 0;
  font-family:ui-sans-serif,system-ui,sans-serif;font-size:15px}
.flag p:last-child{margin:0}
.pane{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px;margin:22px 0}
.pane>div{border-top:2px solid var(--gold2);padding-top:12px}
.pane h3{margin-top:0}
.pane p:last-child{margin:0}
.tally{list-style:none;counter-reset:v;padding:0;margin:22px 0}
.tally li{counter-increment:v;padding:0 0 16px 52px;position:relative}
.tally li::before{content:counter(v,decimal-leading-zero);position:absolute;left:0;top:0;
  font-family:ui-sans-serif,system-ui,sans-serif;font-size:15px;font-weight:700;color:var(--gold);
  border:1px solid var(--line);width:36px;height:32px;display:grid;place-items:center;border-radius:2px}
.tally b{display:block;font-family:ui-sans-serif,system-ui,sans-serif;font-size:15.5px;margin-bottom:2px}

/* rel kanan */
.rail section{border:1px solid var(--line);background:var(--wine2);padding:16px 18px;margin-bottom:18px}
.rail h2{font-size:12px;letter-spacing:2px;text-transform:uppercase;color:var(--ink2);margin:0 0 10px;
  font-family:ui-sans-serif,system-ui,sans-serif}
.rail ul{list-style:none;padding:0;margin:0}
.rail li{margin-bottom:8px;line-height:1.5}
.rail a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line)}
.rail a:hover{color:var(--gold)}
.rail p{margin:0;color:var(--ink2);font-size:13.5px;line-height:1.6}

/* faq */
.dialog{font-family:ui-sans-serif,system-ui,sans-serif}
.dialog dt{font-weight:700;margin-top:18px;font-size:16px;color:var(--ink)}
.dialog dd{margin:5px 0 0;color:var(--ink2);font-size:15px;line-height:1.65}

/* footer */
.colophon{background:var(--wine2);border-top:1px solid var(--line);margin-top:36px;
  font-family:ui-sans-serif,system-ui,sans-serif;font-size:14px;color:var(--ink2);padding:30px 0 26px}
.colophon a{color:var(--ink2)}
.colophon .links{display:flex;flex-wrap:wrap;gap:10px 26px;margin-bottom:22px}
.colophon .links a{text-decoration:none}
.colophon .links a:hover{color:var(--gold)}
.colophon .fine{border-top:1px solid var(--line);padding-top:18px;font-size:13px;line-height:1.65}
.age{display:inline-block;border:1px solid var(--no);color:var(--no);font-weight:700;font-size:12px;
  padding:1px 7px;border-radius:2px;margin-right:8px}

@media (max-width:900px){
  .folio{grid-template-columns:1fr;gap:0}
  .rail{position:static;margin-top:24px}
}
@media (max-width:640px){
  body{font-size:16.5px}
  h1{font-size:27px}
  h2{font-size:21px}
  .stand{font-size:17px}
  .copy>p:first-of-type::first-letter{font-size:46px}
  td,th{padding:10px 14px}
}
/* logo header */
.wordmark img{display:block;height:36px;width:auto}

/* area sentuh (R15) */
.colophon .links a,.colophon .fine a{display:inline-flex;align-items:center;min-height:44px}
td a[rel~="sponsored"]{display:inline-flex;align-items:center;min-height:44px}