/* 森羅創藝 — colours sampled from the trifold (森羅創藝三折頁設計 20260407) and mascot logo */
:root{
/* Moss / olive — primary */
--moss-900:#2f3719;--moss-800:#414b22;--moss-700:#56622e;--moss-600:#66743a;--moss-500:#7a8a48;--moss-400:#97a56a;--moss-300:#b7c197;--moss-200:#d5dbc0;--moss-100:#e9ecdf;
/* Sage — the misty grey-green of the cover panel */
--sage-600:#7f8f84;--sage-500:#97a59b;--sage-400:#b0bcb2;--sage-300:#c8d1c9;--sage-200:#dde3dd;--sage-100:#eef1ee;
/* Paper — rice white & warm light grey */
--paper-0:#fdfbf6;--paper-50:#f8f4ea;--paper-100:#f2ecdf;--paper-200:#e8e1d2;--paper-300:#d8cfbd;--paper-400:#b9ae98;
/* Wood — the logo's soil-brown disc */
--wood-900:#2e1d12;--wood-800:#3f2819;--wood-700:#553723;--wood-600:#6e4a30;--wood-500:#8b6444;--wood-300:#c2a283;--wood-100:#efe4d6;
/* Warm yellow — the ochre "森羅創藝" acrostic & "6" numeral */
--ochre-600:#b9842a;--ochre-500:#d9a23f;--ochre-400:#e6b75d;--ochre-200:#f3dca8;--ochre-100:#faf0d8;
/* Mascot accents — use sparingly (flower, ears) */
--coral-500:#d9573b;--coral-100:#f8e1da;
/* Ink */
--ink-900:#2a2a22;--ink-700:#4a4a3e;--ink-500:#6f6c5e;--ink-400:#8d8978;

/* Semantic */
--bg-page:var(--paper-50);--bg-clean:var(--paper-0);--bg-muted:var(--paper-100);--bg-sage:var(--sage-200);--bg-moss:var(--moss-700);--bg-moss-deep:var(--moss-800);--bg-wood:var(--wood-800);
--surface-card:var(--paper-0);--surface-card-muted:var(--paper-100);--surface-overlay:rgba(47,55,25,.55);
--text-primary:var(--ink-900);--text-secondary:var(--ink-700);--text-muted:var(--ink-500);--text-heading:var(--moss-800);--text-on-moss:var(--paper-50);--text-on-moss-accent:var(--ochre-400);--text-link:var(--moss-700);--text-link-hover:var(--wood-600);
--border-subtle:var(--paper-200);--border-default:var(--paper-300);--border-strong:var(--moss-400);--border-focus:var(--ochre-500);
--action-primary:var(--moss-700);--action-primary-hover:var(--moss-800);--action-primary-press:var(--moss-900);--action-secondary:var(--wood-700);--action-accent:var(--ochre-500);
--status-open:var(--moss-600);--status-few:var(--ochre-600);--status-full:var(--wood-500);--status-pending:var(--ink-400);
}

:root{
--font-serif:"Noto Serif TC","Songti TC","PMingLiU",serif;
--font-sans:"Noto Sans TC","PingFang TC","Microsoft JhengHei",sans-serif;
--font-latin:"Cormorant Garamond","Noto Serif TC",serif;

--fs-display:clamp(2.25rem,1.6rem + 2.8vw,3.75rem); /* @kind other */
--fs-h1:clamp(1.875rem,1.5rem + 1.6vw,2.75rem); /* @kind other */
--fs-h2:clamp(1.5rem,1.3rem + .9vw,2rem); /* @kind other */
--fs-h3:1.375rem; /* @kind font */
--fs-h4:1.125rem; /* @kind font */
--fs-body-lg:1.125rem; /* @kind font */
--fs-body:1rem; /* @kind font */
--fs-small:.875rem; /* @kind font */
--fs-caption:.8125rem; /* @kind font */
--fs-en-sub:1rem; /* @kind font */

--fw-regular:400; /* @kind font */
--fw-medium:500; /* @kind font */
--fw-semibold:600; /* @kind font */
--fw-bold:700; /* @kind font */
--lh-tight:1.3; /* @kind font */
--lh-heading:1.45; /* @kind font */
--lh-body:1.85; /* @kind font */
--lh-ui:1.5; /* @kind font */
/* Chinese headings in the trifold are set with generous tracking */
--ls-display:.18em; /* @kind font */
--ls-heading:.12em; /* @kind font */
--ls-body:.04em; /* @kind font */
--ls-en:.08em; /* @kind font */
--ls-caps:.16em; /* @kind font */

--text-display:var(--fw-semibold) var(--fs-display)/var(--lh-tight) var(--font-serif); /* @kind font */
--text-h1:var(--fw-semibold) var(--fs-h1)/var(--lh-heading) var(--font-serif); /* @kind font */
--text-h2:var(--fw-semibold) var(--fs-h2)/var(--lh-heading) var(--font-serif); /* @kind font */
--text-h3:var(--fw-bold) var(--fs-h3)/var(--lh-heading) var(--font-sans); /* @kind font */
--text-body:var(--fw-regular) var(--fs-body)/var(--lh-body) var(--font-sans); /* @kind font */
}

:root{
--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:24px;--space-6:32px;--space-7:48px;--space-8:64px;--space-9:96px;--space-10:128px;
--container-max:1200px;--container-text:720px;--gutter:clamp(20px,4vw,48px); /* @kind spacing */

--section-y:clamp(64px,8vw,120px); /* @kind spacing */
--header-h:72px;
}

:root{
/* Radii — soft, never pill-heavy. Photos in the trifold are square-cut; organic blobs are illustrations, not UI. */
--radius-xs:2px;--radius-sm:4px;--radius-md:8px;--radius-lg:14px;--radius-xl:24px;--radius-full:999px;
/* Shadows — warm, low, paper-like */
--shadow-xs:0 1px 2px rgba(63,40,25,.06);
--shadow-sm:0 2px 6px rgba(63,40,25,.07),0 1px 2px rgba(63,40,25,.05);
--shadow-md:0 8px 24px rgba(63,40,25,.09),0 2px 6px rgba(63,40,25,.05);
--shadow-lg:0 18px 48px rgba(47,55,25,.14);
/* Offset "mat" — the trifold sets photos on a sage block offset bottom-right */
--shadow-mat:6px 6px 0 var(--sage-300);
--focus-ring:0 0 0 3px var(--ochre-200),0 0 0 1px var(--ochre-600);
--ease-out:cubic-bezier(.22,.61,.36,1); /* @kind other */
--ease-soft:cubic-bezier(.4,.1,.3,1); /* @kind other */
--dur-fast:150ms; /* @kind other */
--dur-base:240ms; /* @kind other */
--dur-slow:420ms; /* @kind other */
--hover-lift:translateY(-2px); /* @kind other */
}

html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg-page);color:var(--text-primary);font:var(--text-body);letter-spacing:var(--ls-body);-webkit-font-smoothing:antialiased}
a{color:var(--text-link);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.25em;transition:color var(--dur-fast) var(--ease-out)}
a:hover{color:var(--text-link-hover)}
h1,h2,h3,h4{color:var(--text-heading);margin:0;text-wrap:balance}
p{margin:0;text-wrap:pretty}
img{max-width:100%;display:block}
:focus-visible{outline:none;box-shadow:var(--focus-ring);border-radius:var(--radius-sm)}
::selection{background:var(--ochre-200);color:var(--ink-900)}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition-duration:1ms!important;animation-duration:1ms!important;scroll-behavior:auto!important}}

.sl-duo img{filter:saturate(.3) sepia(.18) hue-rotate(28deg) brightness(1.03);transition:filter .6s ease}.sl-duo:hover img,.sl-duo:focus-within img{filter:none}@media (hover:none){.sl-duo img{filter:none}}
html[lang=en]{--font-serif:"Cormorant Garamond","Noto Serif TC",serif}
html[lang=en] body *{letter-spacing:.01em!important}
html[lang=en] h1,html[lang=en] h2,html[lang=en] h3{font-weight:600}
html[lang=ja]{--font-serif:"Noto Serif JP","Hiragino Mincho ProN","Yu Mincho",serif;--font-sans:"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;--font-latin:"Cormorant Garamond","Noto Serif JP",serif}
html[lang=ja] h2,html[lang=ja] h3{letter-spacing:.06em!important}
html[lang=ja] p,html[lang=ja] li,html[lang=ja] dd{letter-spacing:.03em!important}