/* Nyonya theme for Nuren Heritage Trails: Peranakan tiles, shophouse colours, kebaya lace.
   Shared by every page; loaded after each page's own styles. */
:root{--cobalt:#2D5B9A;--coral:#E9897A;--blush:#FBEDE6;--tile:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Crect width='40' height='40' fill='%23FBEDE6'/%3E%3Cg fill='%232D5B9A'%3E%3Cpath d='M0 0h9a9 9 0 0 1-9 9z'/%3E%3Cpath d='M40 0v9a9 9 0 0 1-9-9z'/%3E%3Cpath d='M0 40v-9a9 9 0 0 1 9 9z'/%3E%3Cpath d='M40 40h-9a9 9 0 0 1 9-9z'/%3E%3C/g%3E%3Cg fill='%231F7A72'%3E%3Cellipse cx='20' cy='10.5' rx='3.6' ry='6.5'/%3E%3Cellipse cx='20' cy='29.5' rx='3.6' ry='6.5'/%3E%3Cellipse cx='10.5' cy='20' rx='6.5' ry='3.6'/%3E%3Cellipse cx='29.5' cy='20' rx='6.5' ry='3.6'/%3E%3C/g%3E%3Cg fill='%23D9577F'%3E%3Cellipse cx='13' cy='13' rx='2.2' ry='4.6' transform='rotate%28-45 13 13%29'/%3E%3Cellipse cx='27' cy='13' rx='2.2' ry='4.6' transform='rotate%2845 27 13%29'/%3E%3Cellipse cx='13' cy='27' rx='2.2' ry='4.6' transform='rotate%2845 13 27%29'/%3E%3Cellipse cx='27' cy='27' rx='2.2' ry='4.6' transform='rotate%28-45 27 27%29'/%3E%3C/g%3E%3Ccircle cx='20' cy='20' r='3.8' fill='%23E0A526'/%3E%3Ccircle cx='20' cy='20' r='1.5' fill='%23FBEDE6'/%3E%3C/svg%3E");--tile-faint:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Crect width='40' height='40' fill='%23F3F7F6'/%3E%3Cg fill='%23E4ECEA'%3E%3Cpath d='M0 0h9a9 9 0 0 1-9 9z'/%3E%3Cpath d='M40 0v9a9 9 0 0 1-9-9z'/%3E%3Cpath d='M0 40v-9a9 9 0 0 1 9 9z'/%3E%3Cpath d='M40 40h-9a9 9 0 0 1 9-9z'/%3E%3C/g%3E%3Cg fill='%23E2EEEB'%3E%3Cellipse cx='20' cy='10.5' rx='3.6' ry='6.5'/%3E%3Cellipse cx='20' cy='29.5' rx='3.6' ry='6.5'/%3E%3Cellipse cx='10.5' cy='20' rx='6.5' ry='3.6'/%3E%3Cellipse cx='29.5' cy='20' rx='6.5' ry='3.6'/%3E%3C/g%3E%3Cg fill='%23F4E3E6'%3E%3Cellipse cx='13' cy='13' rx='2.2' ry='4.6' transform='rotate%28-45 13 13%29'/%3E%3Cellipse cx='27' cy='13' rx='2.2' ry='4.6' transform='rotate%2845 27 13%29'/%3E%3Cellipse cx='13' cy='27' rx='2.2' ry='4.6' transform='rotate%2845 13 27%29'/%3E%3Cellipse cx='27' cy='27' rx='2.2' ry='4.6' transform='rotate%28-45 27 27%29'/%3E%3C/g%3E%3Ccircle cx='20' cy='20' r='3.8' fill='%23F5EAD0'/%3E%3Ccircle cx='20' cy='20' r='1.5' fill='%23F3F7F6'/%3E%3C/svg%3E")}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--cobalt:#8FB0E6;--coral:#F2A596;--blush:#2A3B3A;--tile-faint:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Crect width='40' height='40' fill='%2313302F'/%3E%3Cg fill='%23183A39'%3E%3Cpath d='M0 0h9a9 9 0 0 1-9 9z'/%3E%3Cpath d='M40 0v9a9 9 0 0 1-9-9z'/%3E%3Cpath d='M0 40v-9a9 9 0 0 1 9 9z'/%3E%3Cpath d='M40 40h-9a9 9 0 0 1 9-9z'/%3E%3C/g%3E%3Cg fill='%231A3F3D'%3E%3Cellipse cx='20' cy='10.5' rx='3.6' ry='6.5'/%3E%3Cellipse cx='20' cy='29.5' rx='3.6' ry='6.5'/%3E%3Cellipse cx='10.5' cy='20' rx='6.5' ry='3.6'/%3E%3Cellipse cx='29.5' cy='20' rx='6.5' ry='3.6'/%3E%3C/g%3E%3Cg fill='%2321403F'%3E%3Cellipse cx='13' cy='13' rx='2.2' ry='4.6' transform='rotate%28-45 13 13%29'/%3E%3Cellipse cx='27' cy='13' rx='2.2' ry='4.6' transform='rotate%2845 27 13%29'/%3E%3Cellipse cx='13' cy='27' rx='2.2' ry='4.6' transform='rotate%2845 13 27%29'/%3E%3Cellipse cx='27' cy='27' rx='2.2' ry='4.6' transform='rotate%28-45 27 27%29'/%3E%3C/g%3E%3Ccircle cx='20' cy='20' r='3.8' fill='%23243F36'/%3E%3Ccircle cx='20' cy='20' r='1.5' fill='%2313302F'/%3E%3C/svg%3E")}}
:root[data-theme="dark"]{--cobalt:#8FB0E6;--coral:#F2A596;--blush:#2A3B3A;--tile-faint:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Crect width='40' height='40' fill='%2313302F'/%3E%3Cg fill='%23183A39'%3E%3Cpath d='M0 0h9a9 9 0 0 1-9 9z'/%3E%3Cpath d='M40 0v9a9 9 0 0 1-9-9z'/%3E%3Cpath d='M0 40v-9a9 9 0 0 1 9 9z'/%3E%3Cpath d='M40 40h-9a9 9 0 0 1 9-9z'/%3E%3C/g%3E%3Cg fill='%231A3F3D'%3E%3Cellipse cx='20' cy='10.5' rx='3.6' ry='6.5'/%3E%3Cellipse cx='20' cy='29.5' rx='3.6' ry='6.5'/%3E%3Cellipse cx='10.5' cy='20' rx='6.5' ry='3.6'/%3E%3Cellipse cx='29.5' cy='20' rx='6.5' ry='3.6'/%3E%3C/g%3E%3Cg fill='%2321403F'%3E%3Cellipse cx='13' cy='13' rx='2.2' ry='4.6' transform='rotate%28-45 13 13%29'/%3E%3Cellipse cx='27' cy='13' rx='2.2' ry='4.6' transform='rotate%2845 27 13%29'/%3E%3Cellipse cx='13' cy='27' rx='2.2' ry='4.6' transform='rotate%2845 13 27%29'/%3E%3Cellipse cx='27' cy='27' rx='2.2' ry='4.6' transform='rotate%28-45 27 27%29'/%3E%3C/g%3E%3Ccircle cx='20' cy='20' r='3.8' fill='%23243F36'/%3E%3Ccircle cx='20' cy='20' r='1.5' fill='%2313302F'/%3E%3C/svg%3E")}

/* porcelain floor with a whisper of tiles */
body{background-color:var(--porcelain);background-image:var(--tile-faint);background-size:56px 56px}

/* tile bands: under the header, above the footer, around coloured sections */
header{border-bottom:0;box-shadow:0 1px 0 var(--line)}
header::after{content:"";display:block;height:12px;background:var(--tile) 0 0/12px 12px repeat-x}
footer{position:relative;border-top:0;background:var(--paper)}
footer::before{content:"";position:absolute;left:0;right:0;top:0;height:14px;background:var(--tile) 0 0/14px 14px repeat-x}
footer .wrap,footer .foot{padding-top:12px}
section.band{position:relative;background:var(--blush)}
section.band::before,section.band::after{content:"";position:absolute;left:0;right:0;height:10px;background:var(--tile) 0 0/10px 10px repeat-x;opacity:.9}
section.band::before{top:0}section.band::after{bottom:0}
.tiles{height:44px;background:var(--tile) 0 0/44px 44px repeat-x;opacity:1}

/* section headings get a small nyonya ornament */
.sec-head h2::after,.head h1::after,.mylist h1::after{content:"";display:block;width:84px;height:12px;margin-top:12px;
  background:radial-gradient(circle,var(--kunyit) 0 3px,transparent 3.5px) 0 50%/14px 12px repeat-x,
             linear-gradient(var(--pink),var(--pink)) 0 50%/100% 1px no-repeat}
.eyebrow{color:var(--pink);letter-spacing:.14em}

/* cards: tile strip on top, kebaya-lace stitch inside */
.card,.mitem,.item,.pillar,.answer,.callout{position:relative;overflow:hidden;border-radius:16px}
.card::before,.mitem::before,.item::before,.answer::before{content:"";position:absolute;left:0;right:0;top:0;height:6px;
  background:repeating-linear-gradient(90deg,var(--pink) 0 14px,var(--kunyit) 14px 28px,var(--teal) 28px 42px,var(--cobalt) 42px 56px)}
.card,.mitem,.item{padding-top:20px;outline:1px dashed color-mix(in srgb,var(--pink) 45%,transparent);outline-offset:-7px}
.card:hover,.mitem:hover{border-color:var(--pink)}
.chip{background:color-mix(in srgb,var(--teal) 12%,var(--paper));color:var(--teal);border:1px solid color-mix(in srgb,var(--teal) 30%,transparent)}
.chip.star{background:var(--pink);border-color:var(--pink);color:var(--paper)}

/* city tabs look like glazed tiles */
.pillar{border:1px solid color-mix(in srgb,var(--teal) 35%,var(--line));background:var(--paper)}
.pillar::after{content:"";position:absolute;right:-14px;bottom:-14px;width:56px;height:56px;background:var(--tile) 0 0/28px 28px;opacity:.35;border-radius:12px}
.pillar.on{background:var(--teal);border-color:var(--teal)}
.pillar.on::after{opacity:.9}
.cities a.on{background:var(--pink);color:var(--paper)}

/* buttons: jade with a kunyit edge, coral outline */
.btn.primary{background:var(--teal);box-shadow:0 0 0 2px var(--paper),0 0 0 3px var(--kunyit)}
.btn.primary:hover{background:color-mix(in srgb,var(--teal) 85%,var(--ink))}
.btn.ghost{border-color:var(--coral);color:var(--ink)}
.lang{border-color:var(--pink);color:var(--pink)}

/* hero and features get a scalloped kebaya edge */
.gifwalk img,.feature,.scene svg{border:3px solid var(--paper);box-shadow:0 0 0 1px var(--line),0 0 0 6px var(--blush),0 0 0 7px color-mix(in srgb,var(--pink) 40%,transparent)}
.manifesto{background:var(--paper)}
.resv{background:var(--blush);border:1px dashed color-mix(in srgb,var(--pink) 45%,transparent)}
.nm{border-top:8px solid transparent;border-image:repeating-linear-gradient(90deg,var(--pink) 0 14px,var(--kunyit) 14px 28px,var(--teal) 28px 42px,var(--cobalt) 42px 56px) 8}