/* The Aisle — brand layer, from company.theaisle.wedding/design-guideline (DS v1.0) */

:root{
  /* primary palette */
  --color-primary:#bf798a;      /* Rose Pink   */
  --color-dusty:#b75668;        /* Dusty Rose  */
  --color-accent:#85201b;       /* Deep Burgundy */
  --color-terracotta:#b65e4f;
  --color-mauve:#ad6e7a;
  --color-neutral:#878484;
  --color-neutral-lt:#c4c4c4;
  --color-bg-light:#f8f8f8;
  --color-white:#fff;
  --color-black:#000;

  /* secondary ramps */
  --burgundy-900:#4a1012; --burgundy-700:#6b1715;
  --burgundy-300:#b06560; --burgundy-100:#f1dddc;
  --rose-700:#9c5466; --rose-300:#d7a3b0; --rose-100:#f6e6ea;
  --cream:#fdf9f8; --linen:#f1ebe9;
  --ink-mid:#6b5055; --ink-subtle:#9e8489;

  /* 8px scale */
  --spacing-xs:.5rem; --spacing-sm:1rem; --spacing-md:1.5rem;
  --spacing-lg:2rem;  --spacing-xl:3rem; --spacing-2xl:4rem; --spacing-3xl:5rem;

  --font-display:"Montserrat","Noto Sans TC",system-ui,sans-serif;
  --font-body:"Lato","Noto Sans TC",system-ui,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--color-white); color:var(--ink-mid);
  font:400 1.0625rem/1.8 var(--font-body);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:700;color:var(--color-accent);
  line-height:1.25;margin:0;letter-spacing:-.01em}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

/* trilingual: zh-TW default, English and Simplified toggle.
   Simplified copy is added one page at a time by C.O.R.A.; most .zh/.en
   pairs have no .sc sibling yet. In sc mode .zh only hides when a .sc
   sibling exists, so an untranslated pair falls back to Traditional rather
   than going blank or showing English. */
[data-lang="zh"] .en,[data-lang="zh"] .sc{display:none}
[data-lang="en"] .zh,[data-lang="en"] .sc{display:none}
[data-lang="sc"] .en{display:none}
[data-lang="sc"] .zh:has(~ .sc){display:none}

/* shared bits */
.wrap{width:min(1180px,100% - 2.5rem);margin-inline:auto}
@media(max-width:760px){.topbar .menubtn{margin-left:auto}}
.eyebrow{font-family:var(--font-display);font-size:.6875rem;font-weight:700;
  letter-spacing:.22em;text-transform:uppercase;color:var(--color-dusty)}
.chev{display:block;margin:0 auto;color:var(--color-primary);opacity:.55}

/* Language control — 繁 / 英 / 簡, all three always shown, one tap each.
   The current one is marked three ways so it never rests on colour alone:
   heavier weight, a ring, and a light ground. Inline-flex because it sits in
   a flex header on some layouts and in a plain footer block on others. */
.langbtn{display:inline-flex;align-items:center;gap:.1rem;
  border:1px solid var(--color-neutral-lt);border-radius:999px;padding:.15rem}
.langbtn button{font-family:var(--font-display);font-size:.8125rem;font-weight:400;
  line-height:1;letter-spacing:normal;color:var(--ink-subtle);
  border-radius:999px;padding:.3rem .5rem;transition:.2s}
.langbtn button:hover{color:var(--color-accent)}
.langbtn button.on{font-weight:700;color:var(--color-accent);background:var(--rose-100);
  box-shadow:inset 0 0 0 1px var(--color-accent)}
.langbtn button:focus-visible{outline:2px solid var(--color-accent);outline-offset:1px}

/* demo chrome — not part of the design, just so Matt can move around */
.demobar{position:sticky;top:0;z-index:99;background:var(--burgundy-900);
  color:#fff;font:400 .75rem/1 var(--font-body);letter-spacing:.02em}
.demobar .wrap{display:flex;align-items:center;gap:.75rem;
  min-height:2.5rem;padding-block:.4rem;flex-wrap:wrap}
.demobar b{font-family:var(--font-display);font-size:.6875rem;letter-spacing:.16em;
  text-transform:uppercase;font-weight:700}
.demobar span{color:#e3c9c8}
.demobar a{border-bottom:1px solid rgba(255,255,255,.35);padding-bottom:1px}
.demobar a:hover{border-color:#fff}
.demobar .sp{flex:1}
@media(max-width:640px){.demobar .hidesm{display:none}}