/* Bauhaus — garis hitam tebal, bidang warna primer, bentuk dasar, huruf geometris kapital */
.fam-bauhaus { --bw: 3px; --card: var(--bg); }
.fam-bauhaus .display { text-transform: uppercase; line-height: 1.06; letter-spacing: -.02em; }
.fam-bauhaus .h1, .fam-bauhaus .h2 { text-transform: uppercase; letter-spacing: -.01em; }
.fam-bauhaus .display em, .fam-bauhaus .h1 em, .fam-bauhaus .h2 em { font-style: normal; background: var(--accent); color: var(--on-accent); padding: 0 .12em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.fam-bauhaus .eyebrow { gap: .6rem; color: var(--ink); font-weight: 800; letter-spacing: .14em; }
.fam-bauhaus .eyebrow::before { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--primary); box-shadow: 16px 0 0 var(--accent); margin-right: 16px; }

.fam-bauhaus .btn { border: var(--bw) solid var(--ink); border-radius: 0; text-transform: uppercase; letter-spacing: .08em; font-weight: 800; font-size: .86rem; box-shadow: 5px 5px 0 var(--ink); }
.fam-bauhaus .btn:hover { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 var(--ink); }
.fam-bauhaus .btn:active { transform: translate(3px, 3px); box-shadow: 2px 2px 0 var(--ink); }
.fam-bauhaus .btn--ghost { --btn-bg: var(--bg); }
.fam-bauhaus .btn--light { --btn-bg: var(--accent); --btn-ink: var(--on-accent); }
.fam-bauhaus .badge { border-radius: 0; border: 2px solid var(--ink); background: var(--accent); color: var(--on-accent); text-transform: uppercase; letter-spacing: .06em; }
.fam-bauhaus .input, .fam-bauhaus .select, .fam-bauhaus .textarea, .fam-bauhaus .catbtn, .fam-bauhaus .qty, .fam-bauhaus .opt__v span { border: var(--bw) solid var(--ink); border-radius: 0; }
.fam-bauhaus .opt__v input:checked + span { background: var(--primary); color: var(--on-primary); border-color: var(--ink); }
.fam-bauhaus .icon-btn { border-radius: 0; }

/* kartu produk: kotak bergaris tebal dengan bentuk berwarna di pojok foto */
.pcard--geo { overflow: hidden; border: var(--bw) solid var(--ink); border-radius: 0; background: var(--bg); transition: transform .15s ease, box-shadow .15s ease; }
.pcard--geo:hover { transform: translate(-3px, -3px); box-shadow: 6px 6px 0 var(--ink); }
.pcard--geo .pcard__media { aspect-ratio: 1; border-radius: 0; border-bottom: var(--bw) solid var(--ink); }
.pcard--geo .pcard__media::after { content: ""; position: absolute; right: -22px; top: -22px; width: 64px; height: 64px; border-radius: 50%; background: var(--primary); border: var(--bw) solid var(--ink); }
.pcard--geo:nth-child(3n+2) .pcard__media::after { border-radius: 0; background: var(--accent); transform: rotate(45deg); }
.pcard--geo:nth-child(3n) .pcard__media::after { border: 0; border-radius: 0; background: var(--ink); clip-path: polygon(0 0, 100% 0, 100% 100%); right: 0; top: 0; width: 44px; height: 44px; }
.pcard--geo .pcard__tag { left: 0; bottom: 0; padding: .4rem .65rem; background: var(--accent); color: var(--on-accent); border-top: var(--bw) solid var(--ink); border-right: var(--bw) solid var(--ink); font-family: var(--font-head), sans-serif; font-size: clamp(.86rem, .8rem + .3vw, 1rem); }
.pcard--geo:nth-child(3n+2) .pcard__tag { background: var(--primary); color: var(--on-primary); }
.pcard--geo:nth-child(3n) .pcard__tag { background: var(--ink); color: var(--bg); }
.pcard--geo .pcard__body { padding: .8rem .85rem .9rem; }
.pcard--geo .pcard__name { text-transform: uppercase; font-size: clamp(.92rem, .86rem + .3vw, 1.06rem); letter-spacing: 0; }
.pcard--geo .pcard__add, .pcard--geo .pcard__go { border-radius: 0; border: 2px solid var(--ink); }
.pcard--geo .pcard__go { background: var(--accent); color: var(--on-accent); }
@media (min-width: 1080px) { .card-geo .pgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; } }

/* blok isi */
.fam-bauhaus .feat, .fam-bauhaus .tcard, .fam-bauhaus .step, .fam-bauhaus .cinfo { border: var(--bw) solid var(--ink); border-radius: 0; background: var(--bg); }
.fam-bauhaus .feat__ic { border-radius: 50%; background: var(--primary); color: var(--on-primary); }
.fam-bauhaus .feat:nth-child(3n+2) .feat__ic { border-radius: 0; background: var(--accent); color: var(--on-accent); }
.fam-bauhaus .feat:nth-child(3n) .feat__ic { background: var(--ink); color: var(--bg); clip-path: polygon(50% 0, 100% 100%, 0 100%); padding-top: 10px; }
.fam-bauhaus .step__n { border-radius: 0; border: var(--bw) solid var(--ink); }
.fam-bauhaus .stats { border: var(--bw) solid var(--ink); border-radius: 0; gap: var(--bw); background: var(--ink); }
.fam-bauhaus .stat:nth-child(4n+1) { background: var(--primary); color: var(--on-primary); --muted: color-mix(in oklab, var(--on-primary) 80%, var(--primary)); }
.fam-bauhaus .stat:nth-child(4n+2) { background: var(--accent); color: var(--on-accent); --muted: color-mix(in oklab, var(--on-accent) 80%, var(--accent)); }
.fam-bauhaus .stat:nth-child(4n+3) { background: var(--bg); }
.fam-bauhaus .stat:nth-child(4n) { background: var(--ink); color: var(--bg); --muted: color-mix(in oklab, var(--bg) 70%, var(--ink)); }
.fam-bauhaus .stat__v { color: inherit; }
.fam-bauhaus .cat { border: var(--bw) solid var(--ink); border-radius: 0; }
.fam-bauhaus .cat::after { background: linear-gradient(180deg, transparent 50%, color-mix(in oklab, var(--primary) 85%, #000)); }
.fam-bauhaus .cat:nth-child(even)::after { background: linear-gradient(180deg, transparent 50%, color-mix(in oklab, var(--ink) 90%, transparent)); }
.fam-bauhaus .faq { border-top: var(--bw) solid var(--ink); }
.fam-bauhaus .faq__i { border-bottom: var(--bw) solid var(--ink); }
.fam-bauhaus .faq__q { text-transform: uppercase; font-size: .98rem; letter-spacing: .02em; }
.fam-bauhaus .faq__q .ic { width: 28px; height: 28px; padding: 4px; border-radius: 50%; background: var(--accent); color: var(--on-accent); }
.fam-bauhaus .about-banner { border: var(--bw) solid var(--ink); border-radius: 0; background: var(--accent); color: var(--on-accent); --muted: color-mix(in oklab, var(--on-accent) 80%, var(--accent)); --primary-text: var(--on-accent); }
.fam-bauhaus .about-banner .about__img { border-left: var(--bw) solid var(--ink); }
.fam-bauhaus .cta { border: var(--bw) solid var(--ink); border-radius: 0; background: var(--primary); color: var(--on-primary); }
.fam-bauhaus .cta::after { background: radial-gradient(circle at 92% 50%, var(--accent) 0 18%, transparent 18.5%); }
.fam-bauhaus .cta .cta__bg { display: none; }
.fam-bauhaus .cta .lead { color: color-mix(in oklab, var(--on-primary) 82%, var(--primary)); }
.fam-bauhaus .cta .h2 em { background: var(--ink); color: var(--bg); }
.fam-bauhaus .marquee { border-block: var(--bw) solid var(--ink); background: var(--ink); color: var(--bg); }
.fam-bauhaus .marquee__item { text-transform: uppercase; letter-spacing: .06em; }
.fam-bauhaus .marquee__item::after { content: "●"; color: var(--primary); }
.fam-bauhaus .marquee__item:nth-child(even)::after { content: "■"; color: var(--accent); }
.fam-bauhaus .gitem, .fam-bauhaus .about__img, .fam-bauhaus .pd__main, .fam-bauhaus .pd__shot, .fam-bauhaus .promo, .fam-bauhaus .map { border-radius: 0; }
.fam-bauhaus .pd__shot, .fam-bauhaus .pd__main { border: var(--bw) solid var(--ink); }
.fam-bauhaus .pd__box { border: var(--bw) solid var(--ink); border-radius: 0; background: var(--bg); }
.fam-bauhaus .avatar { border-radius: 0; background: var(--accent); color: var(--on-accent); }
.fam-bauhaus .tcard:nth-child(3n+1) .avatar { border-radius: 50%; background: var(--primary); color: var(--on-primary); }

/* kepala halaman: pita dengan tiga bentuk */
.phead--geo { position: relative; overflow: hidden; margin-bottom: clamp(28px, 4vw, 56px); border-bottom: var(--bw) solid var(--ink); background: var(--bg); }
.phead--geo .h1 { max-width: 18ch; text-transform: uppercase; }
.phead--geo::before { content: ""; position: absolute; right: 6%; top: 50%; width: clamp(80px, 14vw, 180px); aspect-ratio: 1; border-radius: 50%; background: var(--primary); transform: translateY(-50%); }
.phead--geo::after { content: ""; position: absolute; right: calc(6% + clamp(50px, 9vw, 120px)); bottom: 0; width: clamp(60px, 10vw, 130px); aspect-ratio: 1; background: var(--accent); clip-path: polygon(0 100%, 100% 100%, 50% 0); }
@media (max-width: 639px) { .phead--geo::before { right: -30px; top: 30px; width: 90px; } .phead--geo::after { display: none; } }
@media (min-width: 640px) { .phead--geo .phead__in { padding-right: clamp(120px, 26vw, 340px); } }

/* halaman galeri: kotak & lingkaran berselang */
.fam-bauhaus.page-gallery .gmason { columns: auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 900px) { .fam-bauhaus.page-gallery .gmason { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; } }
.fam-bauhaus.page-gallery .gmason .gitem { margin: 0; aspect-ratio: 1; border: var(--bw) solid var(--ink); }
.fam-bauhaus.page-gallery .gmason .gitem:nth-child(3n+1) { border-radius: 50%; }
.fam-bauhaus.page-gallery .gmason .gitem:nth-child(3n+2) { border-radius: 999px 999px 0 0; }