/* Latar kanvas halaman: tampak saat overscroll elastis (macOS/iOS).
   Wajib sama dengan base brand, bukan warna kanvas prototype. */
:root{--page-bg:#FAF7F2;color-scheme:light}

/* style.css - CSS brand Florentine (theme-florentine).
   Di-port PERSIS dari blok CSS kontrak UI (prototype/layouts/florentine.py).
   Bergantung pada shared/base.css (reset, token brand, kartu produk generik, modal,
   mekanisme bahasa .li/.le). Namespace .theme-florentine dipertahankan; nol selector
   global. CSS khusus prototype (prototype-bar) tidak ada di brand ini. */

/* ============ FLORENTINE - editorial magazine (theme-florentine) ============ */
.theme-florentine{--disp:'Bodoni Moda',Georgia,'Times New Roman',serif;--txt:'Jost',-apple-system,'Segoe UI',Helvetica,Arial,sans-serif;background:#FAF7F2;--sec-pad:clamp(7rem,14vh,12rem)}/* ritme lapang majalah (beda dari XU rapat & AT sedang) */

/* Didone tuning */
.theme-florentine .h-disp{font-weight:700;letter-spacing:-.015em;line-height:1.02}
.theme-florentine h2.h2{font-weight:600;letter-spacing:-.005em}
.theme-florentine .lead{font-weight:300}
.theme-florentine .eyebrow{letter-spacing:.24em}

/* ---- masthead (logo tengah + N.01 + rule maroon) ---- */
.theme-florentine .flmast{background:rgba(250,247,242,.96);border-bottom:none}
.theme-florentine .flmast .wrap{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;row-gap:.55rem;padding-block:.5rem}/* padding diramping: kompensasi logo emblem yang membesar */
.theme-florentine .flmast-ed{grid-column:1;grid-row:1;justify-self:start;font:500 .6875rem var(--txt);letter-spacing:.3em;color:var(--muted)}
.theme-florentine .flmast-logo{grid-column:2;grid-row:1;justify-self:center;line-height:0}
/* emblem PERSEGI (320/319): massa visual < wordmark pd tinggi sama, tinggi optis 54px (bukan 34) */
.theme-florentine .flmast-logo img{height:54px;width:auto;aspect-ratio:320/319;object-fit:contain}
.theme-florentine .flmast-tools{grid-column:3;grid-row:1;justify-self:end;display:flex;gap:.55rem;align-items:center}
.theme-florentine .flmast-links{grid-column:1 / -1;grid-row:2;display:flex;justify-content:center;flex-wrap:wrap;gap:clamp(.9rem,3vw,1.6rem);padding-top:.6rem;border-top:1px solid var(--ac)}
.theme-florentine .flmast-links a{font:500 .72rem var(--txt);letter-spacing:.2em;text-transform:uppercase;color:var(--ink);text-decoration:none;border-bottom:1px solid transparent;padding-bottom:2px;transition:border-color .2s ease-out}
.theme-florentine .flmast-links a:hover{border-color:var(--ac)}
.theme-florentine .flmast .btn{padding:.42rem .95rem;font-size:.72rem;letter-spacing:.12em}

/* ---- hero sampul (satin kiri 5fr, teks kanan 7fr) ---- */
.theme-florentine .flhero{position:relative;overflow:hidden}
.theme-florentine .flhero .wrap{display:grid;grid-template-columns:5fr 7fr;gap:clamp(1.5rem,4vw,3.5rem);align-items:center;padding-block:clamp(3rem,8vh,6rem)}
.theme-florentine .flhero-img{aspect-ratio:4/5;overflow:hidden;border-radius:2px;box-shadow:var(--shadow);position:relative}
.theme-florentine .flhero-img img{width:100%;height:100%;object-fit:cover;object-position:center}
.theme-florentine .flhero-img::after{content:'';position:absolute;inset:0;background:#870000;mix-blend-mode:multiply;opacity:.12}
.theme-florentine .flhero-copy .lead{margin:1.4rem 0 2.1rem;max-width:32rem;color:var(--muted)}
.theme-florentine .flhero-copy .ctas{display:flex;gap:1rem;flex-wrap:wrap}
.theme-florentine .flwave{margin:0 auto;padding:.2rem 0 0}

/* ---- intro editorial (kolom 60ch + drop cap maroon) ---- */
.theme-florentine .flintro{max-width:60ch;margin-inline:auto}
.theme-florentine .flintro p{font-weight:300;font-size:1.18rem;line-height:1.7;color:var(--ink)}
.theme-florentine .flintro p::first-letter{font-family:var(--disp);font-weight:700;float:left;font-size:4.4rem;line-height:.78;padding:.08em .1em 0 0;color:var(--ac)}

/* ---- jeda gambar full-bleed + pull-quote mengambang ---- */
.theme-florentine .fljeda{position:relative;overflow:hidden;min-height:clamp(360px,58vh,540px);display:flex;align-items:center;background-size:cover;background-position:center}
.theme-florentine .fljeda::before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(20,18,16,.82),rgba(20,18,16,.5))}
.theme-florentine .fljeda .wrap{position:relative;z-index:1}
.theme-florentine .flpull{max-width:36rem}
.theme-florentine .flpull .q{font-family:var(--disp);font-style:italic;font-weight:600;font-size:clamp(1.6rem,1rem+3.4cqw,2.8rem);line-height:1.22;color:#fff}
/* byline di atas foto marmer terang, putih .9 (gold gagal AA di area scrim rendah) */
.theme-florentine .flpull .by{margin-top:1.1rem;font:500 .72rem var(--txt);letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.9)}
.theme-florentine .flpull .barline{width:56px;height:1px;background:var(--gold);margin-bottom:1.4rem}
/* jeda LANSKAP (Tuscany terang), scrim kiri diperkuat .86 supaya teks putih tetap >=7:1 (dihitung, bukan ditebak) */
.theme-florentine .fljeda.is-land::before{background:linear-gradient(90deg,rgba(18,16,14,.86),rgba(18,16,14,.4))}
/* substrat foto tipis (paper/marmer) di section terang, isolasi kontras teks gelap tak berubah */
.theme-florentine .flsubtex{background-repeat:no-repeat;background-position:center;background-size:cover}

/* ---- USP editorial (angka romawi + rule maroon, tanpa kartu) ---- */
.theme-florentine .fluspgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:clamp(1.3rem,3vw,2.6rem)}
.theme-florentine .flusp{border-top:2px solid var(--ac);padding-top:.9rem}
.theme-florentine .flusp .n{font-family:var(--disp);font-weight:700;font-size:1.55rem;line-height:1;color:var(--ac)}
.theme-florentine .flusp h3{font:500 1rem var(--txt);letter-spacing:.01em;margin:.55rem 0 .3rem;color:var(--ink)}
.theme-florentine .flusp p{font-size:.875rem;color:var(--muted)}

/* ---- katalog SPREAD (chapter + feature/grid asimetris) ---- */
.theme-florentine .flchap{margin:clamp(2.6rem,5vw,4rem) 0 1.6rem}
.theme-florentine .flchap-t{font-family:var(--disp);font-weight:600;font-size:clamp(1.6rem,1rem+2.6cqw,2.5rem);line-height:1.04;color:var(--ac)}
.theme-florentine .flchap .flwave{margin:.5rem 0 0}
.theme-florentine .flspread{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:clamp(1rem,2vw,1.6rem);align-items:start}
.theme-florentine .flspread .feat{grid-column:1;grid-row:1 / span 2}
.theme-florentine .flspread.rev{grid-template-columns:1fr 1fr 1.6fr}
.theme-florentine .flspread.rev .feat{grid-column:3;grid-row:1 / span 2}
.theme-florentine .flspread.solo{grid-template-columns:minmax(0,360px)}
.theme-florentine .flspread.solo .feat{grid-column:1;grid-row:auto}
.theme-florentine .flspread .feat .pmeta h4{font-size:.875rem}
.theme-florentine .flspread .feat .tcard .tn{font-size:1.8rem}

/* ---- band maroon (single color band - tanda-tangan perfumer) ---- */
.theme-florentine .flband{position:relative;overflow:hidden;background:var(--ac);color:#fff}
.theme-florentine .flband-bg{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.16;mix-blend-mode:luminosity;pointer-events:none}
.theme-florentine .flband .wrap{position:relative;z-index:1;text-align:center;max-width:52rem}
.theme-florentine .flband .eyebrow{color:var(--gold);justify-content:center}
.theme-florentine .flband .eyebrow::before{background:var(--gold)}
.theme-florentine .flband .q{font-family:var(--disp);font-style:italic;font-weight:600;font-size:clamp(1.8rem,1rem+3.6cqw,3rem);line-height:1.2;margin-top:1rem}
.theme-florentine .flband .sig{margin-top:1.5rem;font:500 .8125rem var(--txt);letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.88)}

/* ---- figur bahan (mawar duotone maroon, inline editorial) ---- */
.theme-florentine .flfig .wrap{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(1.5rem,4vw,3.5rem);align-items:center}
.theme-florentine .flfig-imgs{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}
.theme-florentine .flduo{position:relative;aspect-ratio:4/5;overflow:hidden;border-radius:2px}
.theme-florentine .flduo img{width:100%;height:100%;object-fit:cover;filter:saturate(.82) contrast(1.04)}
.theme-florentine .flduo::after{content:'';position:absolute;inset:0;background:#870000;mix-blend-mode:multiply;opacity:.26}
.theme-florentine .flfig-copy .cap{margin-top:1rem}

/* ---- lockup brand editorial (emblem besar + hairline gold dekoratif + tagline), kehadiran brand megah di section Bahan ---- */
.theme-florentine .fllockup{text-align:center;max-width:44rem;margin:0 auto clamp(2.6rem,5vw,4.4rem)}
/* emblem persegi 320/319, tinggi optis besar; nol shadow/gradien/bevel/glow (editorial, bukan norak) */
.theme-florentine .fllockup-logo{display:block;height:clamp(88px,12vw,168px);width:auto;aspect-ratio:320/319;object-fit:contain;margin-inline:auto}
/* hairline gold DEKORATIF-ONLY (gold dilarang jadi teks di krem) */
.theme-florentine .fllockup .hair{width:clamp(72px,12vw,140px);height:1px;background:var(--gold);margin:clamp(1.3rem,3vw,2rem) auto clamp(.9rem,2.2vw,1.5rem)}
/* tagline: Bodoni italic MAROON (var(--ac)), kontras aman di krem, gold hanya di hairline */
.theme-florentine .fllockup .tag{font-family:var(--disp);font-style:italic;font-weight:600;font-size:clamp(1.05rem,.85rem+.9vw,1.5rem);line-height:1.3;letter-spacing:.005em;color:var(--ac)}

/* ---- liputan media (logo grayscale seragam - tanpa eyebrow) ---- */
.theme-florentine .flpress .presswrap{background:#FFFFFF;border-top:1px solid rgba(20,18,16,.1);border-bottom:1px solid rgba(20,18,16,.1);padding:clamp(2.4rem,5vw,3.2rem) 1rem;margin-bottom:clamp(2.4rem,5vw,3.4rem)}
.theme-florentine .flmediarow{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;column-gap:clamp(2.25rem,5vw,3.25rem);row-gap:1.5rem}
.theme-florentine .flmedia-item{display:inline-flex;align-items:center}
.theme-florentine .flmedia-logo{height:40px;width:auto;max-width:150px;object-fit:contain;filter:grayscale(1);opacity:.62;transition:filter .2s ease-out,opacity .2s ease-out}
.theme-florentine .flmedia-logo.is-icon{height:32px}
.theme-florentine .flmedia-item:hover .flmedia-logo,.theme-florentine .flmedia-logo:focus{filter:grayscale(0);opacity:1}
.theme-florentine .flmedia-fb{font:600 .75rem var(--txt);letter-spacing:.13em;text-transform:uppercase;color:var(--muted);align-items:center;height:40px}

/* ---- bottom sections: bahasa editorial (nomor artikel + rule maroon) - beda dari XU/AT ---- */
/* blog: kartu bernomor, rule maroon, tanpa shadow */
.theme-florentine .bgrid{counter-reset:flblog}
.theme-florentine .bcard{background:none;box-shadow:none;border-radius:0;border-top:2px solid var(--ac);padding:1.1rem .2rem 1.6rem;counter-increment:flblog}
.theme-florentine .bcard .bk{color:var(--ac)}
.theme-florentine .bcard .bk::before{content:"N." counter(flblog,decimal-leading-zero) " \00B7 "}
.theme-florentine .bcard h3{font-family:var(--disp);font-weight:600}
.theme-florentine a.bcard:hover{transform:translateY(-4px)}
/* press: baris bernomor, rule maroon, judul serif besar */
.theme-florentine .presslist{border-top:2px solid var(--ac);counter-reset:flpr}
.theme-florentine .pressrow{grid-template-columns:auto 1fr auto;column-gap:1.3rem;border-bottom:1px solid rgba(20,18,16,.12);align-items:start}
.theme-florentine .pressrow::before{content:counter(flpr,decimal-leading-zero);counter-increment:flpr;grid-column:1;grid-row:1 / span 2;align-self:center;font-family:var(--disp);font-weight:700;font-size:1.5rem;line-height:1;color:var(--ac)}
.theme-florentine .pressrow .pr-head{grid-column:2}
.theme-florentine .pressrow .pr-title{grid-column:2;font-size:1.35rem}
.theme-florentine .pr-arrow{grid-column:3;align-self:center}
.theme-florentine .pressrow:hover{transform:translateX(4px)}
.theme-florentine .pressrow:hover .pr-title{border-color:var(--ac)}
/* accordion: pertanyaan serif Bodoni, rule tipis */
.theme-florentine .acc{border-top-color:rgba(20,18,16,.14)}
.theme-florentine .acc:last-child{border-bottom-color:rgba(20,18,16,.14)}
.theme-florentine .acc-q{font-family:var(--disp);font-weight:600;font-size:1.2rem}
.theme-florentine .acc-q .ic{color:var(--ac)}
/* contact: rule maroon di atas, latar halaman */
.theme-florentine .contact{background:none;border-top:2px solid var(--ac)}

/* ---- artikel blog: tabel markdown (GFM) ter-render MFAX.md, di-scroll bila lebar (anti hscroll mobile) ---- */
.theme-florentine .article table{display:block;overflow-x:auto;width:100%;border-collapse:collapse;margin:2rem 0;font-size:.9375rem;background:var(--card);box-shadow:var(--shadow)}
.theme-florentine .article table th,.theme-florentine .article table td{padding:.7rem 1rem;border:1px solid rgba(20,18,16,.1);text-align:left}
.theme-florentine .article table thead th{background:#141210;color:#FAF7F2;font-weight:600}
.theme-florentine .article img{border-radius:2px;margin:1.6rem 0}

/* ---- responsive (container) ---- */
@container (max-width:760px){
  .theme-florentine .pressrow{grid-template-columns:auto 1fr auto}
  .theme-florentine .flhero .wrap{grid-template-columns:1fr}
  .theme-florentine .flhero-img{max-width:340px}
  .theme-florentine .flspread,.theme-florentine .flspread.rev,.theme-florentine .flspread.solo{grid-template-columns:1fr}
  .theme-florentine .flspread .feat,.theme-florentine .flspread.rev .feat{grid-column:1;grid-row:auto}
  .theme-florentine .flfig .wrap{grid-template-columns:1fr}
  .theme-florentine .flmast-tools .btn{display:none}
  .theme-florentine .flmast-logo img{height:40px}/* emblem persegi di mobile: proporsional turun */
  .theme-florentine .flmedia-logo{height:30px}
  .theme-florentine .flmedia-logo.is-icon{height:26px}
  .theme-florentine .flmedia-fb{height:30px}
}