/* HOUSE OF JUPITER — shared website and style-reference stylesheet */
:root {
  --cream:#F8F3E8; --burgundy:#5A2633; --burgundy-light:#7A3B48;
  --gold:#B58A3A; --gold-text:#806021; --text:#3A2A2A;
  --content-width:1200px; --gutter:25px; --icon-size:82px;
}
* { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; scroll-padding-top:110px; }
body { font-family:"Lato",Arial,sans-serif; color:var(--text); line-height:1.7;
  background:linear-gradient(rgba(248,243,232,.88),rgba(248,243,232,.94)),url('/assets/images/background_jupiter.png') center/cover fixed; }
h1,h2,h3,h4 { font-family:"Playfair Display",Georgia,serif; line-height:1.25; color:var(--burgundy); }
a { color:inherit; text-decoration:none; }
img { display:block; max-width:100%; }
button { font:inherit; }
a:focus-visible,button:focus-visible,summary:focus-visible { outline:3px solid var(--burgundy-light); outline-offset:4px; }
.skip-link { position:fixed; top:-100px; left:16px; z-index:2000; background:white; padding:12px; }
.skip-link:focus { top:12px; }
header { position:sticky; top:0; z-index:1000; background:rgba(248,243,232,.96); border-bottom:1px solid rgba(181,138,58,.35); backdrop-filter:blur(10px); }
.nav { max-width:var(--content-width); padding:12px var(--gutter); margin:auto; display:flex; align-items:center; justify-content:space-between; gap:20px; }
.logo { display:flex; align-items:center; gap:12px; color:var(--burgundy); font:24px/1.25 "Playfair Display",Georgia,serif; }
.logo img { width:55px; height:55px; object-fit:contain; flex:none; }
header nav { display:flex; align-items:center; gap:20px; }
header nav a { font-size:14px; padding:10px 0; white-space:nowrap; }
header nav a:hover { color:var(--gold-text); }
.menu { display:none; width:46px; height:46px; flex:none; cursor:pointer; border:1px solid var(--gold); border-radius:8px; background:transparent; color:var(--burgundy); font-size:28px; line-height:1; }
#main { width:100%; max-width:var(--content-width); margin:auto; }
.hero { padding:56px var(--gutter) 48px; }
.hero-content { max-width:760px; }
.hero h1 { font-size:clamp(38px,4.5vw,56px); margin-bottom:14px; }
.hero h2 { font-size:24px; font-weight:400; color:var(--gold-text); }
.hero p { font-size:18px; margin-top:20px; max-width:700px; }
.explore { padding:24px var(--gutter) 40px; }
.title { text-align:center; margin-bottom:64px; }
.title h2 { font-size:36px; }
.cards { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:64px 24px; }
.card { position:relative; display:block; min-width:0; padding:60px 24px 28px; text-align:center; background:rgba(255,255,255,.88); border:1px solid rgba(181,138,58,.55); border-radius:24px; box-shadow:0 12px 28px rgba(90,38,51,.1); transition:transform .2s,box-shadow .2s; }
.card:hover { transform:translateY(-5px); box-shadow:0 16px 32px rgba(90,38,51,.16); }
.card-icon { position:absolute; top:calc(var(--icon-size) / -2); left:50%; transform:translateX(-50%); width:var(--icon-size); height:var(--icon-size); border-radius:50%; overflow:hidden; border:1px solid var(--gold); background:var(--burgundy); }
.card-icon img { display:block; width:100%; height:100%; max-width:none; max-height:none; object-fit:cover; border-radius:inherit; }
.card h3 { font-size:22px; margin-bottom:10px; }
.card p { font-size:16px; line-height:1.6; }
.quote { font:26px/1.5 "Playfair Display",Georgia,serif; color:var(--burgundy); text-align:center; padding:36px var(--gutter) 56px; }
footer { background:var(--burgundy); color:var(--cream); padding:40px max(var(--gutter),calc((100% - var(--content-width)) / 2 + var(--gutter))) 24px; }
.footer-top { display:flex; align-items:center; justify-content:space-between; gap:28px; }
.footer-brand { display:flex; align-items:center; gap:18px; }
.footer-logo { width:65px; height:65px; object-fit:contain; flex:none; }
.footer-brand h3 { font-size:28px; color:#E0BD70; }
.footer-brand p { margin-top:8px; font-size:15px; }
.footer-right,.footer-icons { display:flex; align-items:center; gap:20px; }
.footer-icons img { width:38px; height:38px; object-fit:contain; transition:transform .2s; }
.footer-icons a:hover img { transform:translateY(-3px); }
.sg-flag { width:45px; height:auto; }
.footer-copy { margin-top:28px; padding-top:18px; border-top:1px solid rgba(248,243,232,.25); text-align:center; font-size:14px; }
.inner-page { padding:44px var(--gutter) 56px; }
.inner-page .hero { padding:0; }
.inner-page .hero h1 { font-size:clamp(36px,4vw,48px); }
.content { max-width:760px; margin-top:32px; font-size:18px; }
.content h2 { font-size:30px; margin:28px 0 12px; }
.content h3 { font-size:22px; margin:20px 0 10px; }
.content p + p { margin-top:16px; }
.content a,.text-link { color:var(--burgundy); text-decoration:underline; text-underline-offset:3px; }
.content ul,.content ol { padding-left:24px; margin:16px 0; }
/* Style-reference components; code is deliberately selectable. */
.style-guide { padding:44px var(--gutter) 60px; }
.style-guide > h1 { font-size:clamp(36px,4vw,48px); }
.style-guide > p { max-width:760px; margin-top:16px; }
.guide-links { display:flex; flex-wrap:wrap; gap:10px 20px; margin:24px 0 32px; }
.guide-links a { text-decoration:underline; }
.style-section { border-top:1px solid rgba(181,138,58,.45); padding:32px 0; scroll-margin-top:100px; }
.style-section > h2 { font-size:30px; margin-bottom:16px; }
.style-section > p { margin-bottom:18px; }
.style-section .hero { padding:0; }
.style-section .cards { margin-top:64px; }
.style-section .quote { padding:24px 0; }
.style-section .content { margin:0; }
.swatches { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:16px; }
.swatch { border:1px solid var(--gold); border-radius:12px; overflow:hidden; background:var(--cream); }
.swatch-colour { height:80px; }
.swatch p { padding:12px; font-size:14px; }
pre { margin-top:18px; padding:20px; border:1px solid rgba(181,138,58,.45); border-radius:12px; background:#fff; overflow:auto; max-width:100%; font:14px/1.65 monospace; white-space:pre; }
code { font-family:monospace; }
details { margin-top:18px; }
summary { cursor:pointer; color:var(--burgundy); font-weight:bold; }
@media (max-width:1100px) {
 .nav { flex-wrap:wrap; gap:12px; }
 .logo { flex:1; min-width:0; }
 .menu { display:block; }
 header nav { display:none; flex:0 0 100%; width:100%; flex-direction:column; align-items:stretch; gap:0; border-top:1px solid rgba(181,138,58,.35); padding-top:8px; max-height:calc(100dvh - 100px); overflow-y:auto; }
 header nav.active { display:flex; }
 header nav a { padding:10px 4px; }
}
@media (max-width:900px) { .cards { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:650px) {
 :root { --gutter:18px; --icon-size:76px; }
 .logo { font-size:21px; gap:8px; }
 .logo img { width:45px; height:45px; }
 .hero { padding-top:36px; padding-bottom:36px; }
 .hero h2 { font-size:21px; }
 .hero p { font-size:16px; }
 .title h2 { font-size:30px; }
 .cards { grid-template-columns:1fr; gap:60px; }
 .footer-top { flex-direction:column; align-items:flex-start; }
 .footer-brand { gap:12px; }
 .footer-brand h3 { font-size:22px; }
 .footer-logo { width:50px; height:50px; }
 .footer-right { flex-wrap:wrap; }
 .quote { font-size:23px; }
}
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { transition:none !important; } .card:hover { transform:none; } }