/* Detail treatment options for Julian's site (preview only). Selected with html[data-style]. */
:root{--orn:#d9d2cd;--wine-lit:#8e3443}
/* Shared star used by option A (4-point sparkle from his ornamental pieces) */
:root{--star:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M6 0L7.3 4.7L12 6L7.3 7.3L6 12L4.7 7.3L0 6L4.7 4.7Z'/%3E%3C/svg%3E")}

/* ---------- A · ORNAMENT: dotted arcs + sparkle, from the jaguar/mandala dotwork ---------- */
[data-style=a] .eyebrow,[data-style=a] .section-kicker span:first-child{font:500 12px/1.6 var(--serif);letter-spacing:.22em;color:var(--orn)}
[data-style=a] .eyebrow::before,[data-style=a] .section-kicker span:first-child::before{content:'';display:inline-block;width:58px;height:10px;margin-right:14px;vertical-align:-1px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='58' height='10' viewBox='0 0 58 10'%3E%3Cg fill='%23d9d2cd'%3E%3Ccircle cx='1.5' cy='5' r='.9'/%3E%3Ccircle cx='8' cy='5' r='.9'/%3E%3Ccircle cx='14.5' cy='5' r='.9'/%3E%3Ccircle cx='21' cy='5' r='.9'/%3E%3Ccircle cx='27.5' cy='5' r='.9'/%3E%3Ccircle cx='34' cy='5' r='.9'/%3E%3Cpath d='M41 3.6l1.4 1.4-1.4 1.4-1.4-1.4z'/%3E%3Cpath d='M52 0L53.3 3.7L57 5L53.3 6.3L52 10L50.7 6.3L47 5L50.7 3.7Z'/%3E%3C/g%3E%3C/svg%3E") no-repeat center/contain}
[data-style=a] .button{border-radius:0;outline:1px solid #ffffff40;outline-offset:4px;letter-spacing:.14em;text-transform:uppercase;font-weight:500}
[data-style=a] .button span{font-size:0;width:11px;height:11px;background:currentColor;-webkit-mask:var(--star) center/contain no-repeat;mask:var(--star) center/contain no-repeat;transition:transform .4s}
[data-style=a] .button:hover span{transform:rotate(90deg)}
[data-style=a] .social-icons{gap:18px}
[data-style=a] .social-icons a{border-radius:0;transform:rotate(45deg);width:38px;height:38px}
[data-style=a] .social-icons a svg{transform:rotate(-45deg)}
[data-style=a] .social-icons a:hover{transform:rotate(45deg) scale(1.08)}
[data-style=a] summary span{font-size:0;width:12px;height:12px;align-self:center;background:currentColor;-webkit-mask:var(--star) center/contain no-repeat;mask:var(--star) center/contain no-repeat;transition:transform .4s}
[data-style=a] details[open] summary span{transform:rotate(45deg)}

/* ---------- B · SEAL: hanko-style ink stamp, pairs with the Japanese type and his anime work ---------- */
[data-style=b] .eyebrow,[data-style=b] .section-kicker span:first-child{display:inline-flex;align-items:center;gap:12px;font:500 11px/1.6 var(--sans);letter-spacing:.3em;color:var(--orn)}
[data-style=b] .eyebrow::before,[data-style=b] .section-kicker span:first-child::before{content:'JH';flex:none;display:grid;place-items:center;width:22px;height:22px;background:var(--wine-lit);color:#f3e9e6;font:600 9px/1 var(--serif);letter-spacing:0;border-radius:2px;transform:rotate(-4deg)}
[data-style=b] .button{border-radius:2px;padding:0 0 0 22px;gap:18px;align-items:center;letter-spacing:.08em;overflow:hidden}
[data-style=b] .button span{align-self:stretch;display:grid;place-items:center;width:48px;background:var(--wine-lit);color:#f3e9e6;font-size:16px;transition:width .25s}
[data-style=b] .button:hover span{width:58px}
[data-style=b] .social-icons a{border-radius:2px;border-color:#ffffff38}
[data-style=b] .social-icons a:hover{background:var(--wine-lit);border-color:var(--wine-lit);transform:rotate(-4deg)}
[data-style=b] summary span{display:grid;place-items:center;width:24px;height:24px;border:1px solid #ffffff45;border-radius:2px;font-size:16px}
[data-style=b] details[open] summary span{background:var(--wine-lit);border-color:var(--wine-lit)}

/* ---------- C · NEEDLE LINE: a single fine stroke with a needle point, from his linework ---------- */
[data-style=c] .eyebrow,[data-style=c] .section-kicker span:first-child{display:inline-flex;align-items:center;gap:14px;font:italic 400 15px/1.5 var(--serif);letter-spacing:.02em;text-transform:none;color:var(--orn)}
[data-style=c] .eyebrow::before,[data-style=c] .section-kicker span:first-child::before{content:'';flex:none;width:52px;height:5px;background:linear-gradient(currentColor,currentColor) left center/calc(100% - 4px) 1px no-repeat,radial-gradient(circle,currentColor 2px,transparent 2.5px) right center/5px 5px no-repeat}
[data-style=c] .button{border-radius:0;border-width:0 0 1px;padding-inline:2px;gap:16px;background:none!important;color:var(--paper)!important;letter-spacing:.06em;font-size:13px}
[data-style=c] .button.light{border-bottom-color:var(--paper)}
[data-style=c] .button span{font-size:0;width:34px;height:7px;background:linear-gradient(currentColor,currentColor) left center/100% 1px no-repeat;position:relative;transition:width .3s}
[data-style=c] .button span::after{content:'';position:absolute;right:0;top:50%;width:7px;height:7px;border-top:1px solid currentColor;border-right:1px solid currentColor;transform:translate(-1px,-50%) rotate(45deg)}
[data-style=c] .button:hover span{width:50px}
[data-style=c] .social-icons{gap:0}
[data-style=c] .social-icons a{border:0;border-radius:0;width:46px}
[data-style=c] .social-icons a+a{border-left:1px solid #ffffff2e}
[data-style=c] .social-icons a:hover{background:none;transform:translateY(-2px)}
[data-style=c] summary span{font-size:0;width:16px;height:16px;align-self:center;background:linear-gradient(currentColor,currentColor) center/100% 1px no-repeat,linear-gradient(currentColor,currentColor) center/1px 100% no-repeat;transition:transform .3s}

/* Mark sits above the label so wrapped and centered labels stay tidy */
[data-style] .eyebrow::before{display:block!important;margin:0 0 12px!important}
[data-style] .inquiry .eyebrow::before{margin:0 auto 14px!important}
[data-style=b] .eyebrow,[data-style=c] .eyebrow{display:block}
[data-style=b] .eyebrow::before{display:grid!important}
[data-style=c] .eyebrow::before{width:52px}
[data-style=c] .eyebrow,[data-style=c] .section-kicker span:first-child{text-transform:lowercase}
[data-style=c] .eyebrow::first-letter,[data-style=c] .section-kicker span:first-child::first-letter{text-transform:uppercase}
@media(max-width:700px){[data-style] .footer-main .eyebrow::before{margin:0 auto 12px!important}}