.site-header .language-switch { display: inline-flex; align-items: center; gap: 4px; width: fit-content; border: 1px solid #788481; padding: 3px; background: #f6f3eb; }
.site-header .language-switch a { padding: 7px 9px; line-height: 1.1; color: #262b2d; white-space: nowrap; font-size: 12px; font-weight: 700; }
.site-header .language-switch a[aria-current='true'] { color: #fff; background: #087f8c; text-decoration: underline; text-underline-offset: 3px; }
.site-header .language-switch a:hover { background: #e3f1f0; color: #066773; }
.site-header .language-switch a:after { display: none; }
.site-header .language-switch a:focus-visible { outline: 3px solid #066773; outline-offset: 3px; }
.site-header .header-language { display: none; }
.site-header .header-inner { position: relative; }
.asset-language-note { font-size: 11px; font-weight: 400; color: inherit; line-height: 1.5; }
.poster-language-note { display: block; padding: 8px 4px; background: #f6f3eb; color: #596469; }
.asset-language-note[hidden], [data-language-only][hidden] { display: none; }
html[lang='en-HK'] h1, html[lang='en-HK'] h2, html[lang='en-HK'] h3 { overflow-wrap: anywhere; }
html[lang='en-HK'] .site-header .header-inner nav { grid-template-columns: repeat(4, minmax(0,1fr)); max-width: 670px; }
html[lang='en-HK'] .site-header .header-inner nav a { white-space: normal; line-height: 1.5; }
html[lang='en-HK'] .site-header .language-switch a { white-space: nowrap; line-height: 1.1; }
html[lang='en-HK'] .home-hero h1 { font-size: clamp(42px,4.4vw,66px); line-height: 1.1; max-width: calc(40vw - 90px); }
html[lang='en-HK'] .home-hero .paint-text { white-space: normal; }
html[lang='en-HK'] .hero-actions { flex-wrap: wrap; max-width: calc(40vw - 90px); }
html[lang='en-HK'] .hero-actions .button { max-width: 100%; min-width: 0; white-space: normal; }
html[lang='en-HK'] .service-row h3 { font-size: clamp(25px,3vw,38px); }
@media (max-width: 1020px) {
 .site-header .header-language { display: inline-flex; position: absolute; right: 30px; bottom: 12px; }
 .site-header .header-inner nav { max-height: calc(100dvh - 166px); overflow-y: auto; }
 html[lang='en-HK'] .site-header .header-inner nav { grid-template-columns: 1fr 1fr; max-width: none; }
}
@media (max-width: 700px) {
 .site-header .header-language { right: 18px; bottom: 8px; }
 .site-header .header-language a { padding: 5px 7px; font-size: 11px; }
 .site-header .header-inner nav { max-height: calc(100dvh - 136px); }
 html[lang='en-HK'] .home-hero h1 { font-size: clamp(38px,10.8vw,52px); max-width: 100%; }
 html[lang='en-HK'] .hero-actions { max-width: 100%; }
 html[lang='en-HK'] .hero-actions .button { font-size: 11px; white-space: normal; }
 html[lang='en-HK'] .service-row h3 { font-size: 22px; }
 html[lang='en-HK'] .feature-facts { flex-wrap: wrap; }
 html[lang='en-HK'] .home-art-submit .button { font-size: 12px; }
}

@media (max-width: 360px) {
 .site-header .header-language { right: 14px; gap: 3px; }
 .site-header .header-language a { font-size: 10px; padding: 4px 5px; }
}

.site-header .header-inner nav a[data-i18n-route='/street/']:not([aria-current='page']):not(:hover) {
 background: #f2d34f;
 color: #262b2d;
 font-weight: 800;
 padding: 8px 10px;
}


/* Five clear content groups; Home and language belong to the utility row. */
.site-header .header-inner #site-nav,
html[lang='en-HK'] .site-header .header-inner #site-nav {
  flex: 1;
  min-width: 0;
  max-width: none;
  grid-template-columns: 1.35fr 1.15fr .7fr 1.3fr .7fr;
  gap: 16px 18px;
  align-items: start;
  justify-content: stretch;
}
.site-header #site-nav .nav-utility {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  border-bottom: 1px solid #d9ded9;
  padding-bottom: 10px;
}
.site-header #site-nav .nav-group {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 7px;
  align-items: flex-start;
}
.site-header #site-nav .nav-group-title {
  display: block;
  width: 100%;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.5;
  color: #066773;
  border-bottom: 2px solid #d9ded9;
  padding-bottom: 8px;
  margin-bottom: 3px;
  overflow-wrap: anywhere;
}
.site-header .header-inner #site-nav .nav-group a {
  white-space: normal;
  line-height: 1.6;
  padding: 5px 0;
  max-width: 100%;
  overflow-wrap: anywhere;
}
.site-header .header-inner #site-nav .nav-group a[href='/street/'] { padding: 5px 7px; }
.footer .footer-directory-services h3:not(:first-child),
.footer .footer-directory-knowledge h3:not(:first-child) { margin-top: 25px; }
@media (max-width: 1020px) {
  .site-header .header-inner #site-nav,
  html[lang='en-HK'] .site-header .header-inner #site-nav {
    flex: none;
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .site-header #site-nav .nav-group {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-column: 1 / -1;
    gap: 9px 20px;
  }
  .site-header #site-nav .nav-group-title {
    grid-column: 1 / -1;
    font-size: 12px;
  }
}

.drawing-colour-category p { margin: 0 0 18px; }

.music-player { position: fixed; left: max(22px, env(safe-area-inset-left)); bottom: calc(22px + env(safe-area-inset-bottom)); z-index: 65; color: #262b2d; font-family: inherit; max-width: calc(100vw - 32px); }
.music-controls { display: inline-flex; align-items: stretch; background: #f6f3eb; border: 1px solid #a4b9b7; border-radius: 28px; box-shadow: 0 4px 16px #173b371b; }
.music-player button { font: inherit; cursor: pointer; }
.music-play, .music-settings { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; background: transparent; color: #066773; min-height: 44px; }
.music-play { padding: 11px 15px; border-radius: 28px 0 0 28px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.music-settings { width: 42px; border-left: 1px solid #d2dddd; border-radius: 0 28px 28px 0; }
.music-play[aria-pressed='true'] { color: #fff; background: #087f8c; }
.music-play:hover, .music-settings:hover { background: #e3f1f0; color: #066773; }
.music-play[aria-pressed='true']:hover { background: #066773; color: #fff; }
.music-player button:active { transform: translateY(1px); }
.music-player :is(button,input):focus-visible { outline: 3px solid #066773; outline-offset: 3px; }
.music-panel { position: absolute; bottom: 56px; left: 0; width: 280px; max-width: calc(100vw - 32px); max-height: min(420px, calc(100dvh - 210px)); overflow-y: auto; padding: 18px; background: #f6f3eb; border: 1px solid #c4d2ce; border-radius: 14px; box-shadow: 0 8px 28px #173b3720; }
.music-panel[hidden], .music-status[hidden] { display: none; }
.music-panel-heading { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 8px; }
.music-panel-heading h2 { margin: 0; font-size: 19px; line-height: 1.4; color: #262b2d; }
.music-panel-heading button { width: 36px; height: 36px; border: 1px solid #a9beba; border-radius: 50%; font-size: 23px; background: #fff; color: #066773; flex-shrink: 0; }
.music-track { font-size: 12px; color: #066773; font-weight: 700; margin: 8px 0; }
.music-help { font-size: 11px; line-height: 1.65; color: #596469; margin: 9px 0; }
.music-panel label { display: flex; justify-content: space-between; font-size: 12px; font-weight: 700; color: #262b2d; margin-top: 16px; }
.music-panel input[type='range'] { width: 100%; min-height: 38px; margin: 7px 0; accent-color: #087f8c; cursor: pointer; }
.music-stop { padding: 8px 12px; background: #fff; border: 1px solid #a4b9b7; color: #066773; border-radius: 7px; font-size: 12px; min-height: 40px; }
.music-status { max-width: 280px; padding: 6px 10px; margin-top: 6px; border: 1px solid #d2dddd; background: #f6f3eb; border-radius: 7px; color: #596469; font-size: 11px; line-height: 1.45; }
@media (max-width: 1020px) { .music-player { left: max(16px, env(safe-area-inset-left)); bottom: calc(100px + env(safe-area-inset-bottom)); } }
@media (max-width: 360px) { .music-play { padding: 9px 12px; font-size: 11px; } .music-settings { width: 38px; } .music-panel { width: 270px; } }
@media (max-height: 500px) { .music-panel { max-height: calc(100dvh - 175px); bottom: 52px; } }

/* Compact, visual learning pages: warm ivory, teal and small yellow accents. */
.learning-page{background:#f6f3eb;color:#262b2d;padding-bottom:55px}
.learning-hero{padding-top:64px;padding-bottom:42px}
.learning-hero h1{font-size:clamp(46px,6.4vw,88px);line-height:1.14;letter-spacing:-.045em;max-width:940px;margin:22px 0}
.learning-page .paint-text{color:#087f8c}
.learning-intro{font-size:18px;line-height:1.7;max-width:760px;margin:18px 0;color:#455057}
.learning-format{display:flex;flex-wrap:wrap;gap:9px;margin-top:22px}
.learning-format span,.learning-link-label{background:#f2d34f;color:#262b2d;padding:6px 12px;font-size:13px;font-weight:800;letter-spacing:.02em}
.learning-jumps{display:flex;flex-wrap:wrap;gap:12px;border-top:1px solid #d9ded9;border-bottom:1px solid #d9ded9;padding-top:18px;padding-bottom:18px}
.learning-jumps a{color:#066773;font-weight:800;font-size:15px;padding:6px 12px;border:1px solid #b8cecb;background:#fff;text-decoration:none}
.learning-jumps a:hover{background:#e3f1f0;text-decoration:underline;text-underline-offset:4px}
.learning-page .section{padding-top:65px;padding-bottom:28px}
.learning-page .section-heading{margin-bottom:28px}
.learning-page h2{font-size:clamp(30px,3.6vw,48px);line-height:1.28}
.learning-chart{margin:0;background:#fff;border:1px solid #d9ded9;box-shadow:5px 5px 0 #e3f1f0}
.chart-toolbar{display:flex;justify-content:space-between;gap:18px;padding:16px 22px;border-bottom:1px solid #d9ded9;align-items:center;flex-wrap:wrap}
.chart-toolbar strong{font-size:17px;color:#066773}
.chart-toolbar>span,.table-hint{font-size:13px;color:#455057}
.chart-scroll{overflow-x:auto;overscroll-behavior-x:contain;background:#fff;padding:14px;scrollbar-color:#087f8c #e3f1f0}
.chart-scroll img{display:block;width:100%;min-width:780px;height:auto;margin:0}
.learning-chart figcaption{padding:12px 22px;font-size:13px}
.learning-keypoints{padding:0 0 0 22px;margin:22px 0;color:#455057;font-size:16px;line-height:1.8}
.history-story-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;align-items:start}
.history-story{background:#fff;border:1px solid #d9ded9;min-width:0}
.history-story figure{margin:0;background:#eeeae0}
.history-story .history-artwork{display:block;width:100%;height:240px;object-fit:contain;background:#edeae2}
.history-story figcaption{padding:12px 17px;font-size:12px;line-height:1.7;color:#455057;border-bottom:1px solid #d9ded9}
.history-story-copy{padding:20px}
.history-date{color:#066773;font-size:13px;font-weight:800;line-height:1.6;margin:0 0 12px}
.history-date>span{display:inline-block;background:#f2d34f;color:#262b2d;padding:3px 6px;margin-right:10px}
.history-story h3{font-size:23px;line-height:1.4;margin:12px 0 16px}
.history-story ul,.inspiration-copy ul{font-size:15px;line-height:1.7;padding-left:18px;margin:0 0 18px}
.history-credit{border-top:1px solid #d9ded9;padding-top:12px;display:flex;flex-direction:column;gap:7px;font-size:11px;line-height:1.7;color:#455057}
.history-credit a{color:#066773;text-underline-offset:3px}
.learning-table-scroll{overflow-x:auto;overscroll-behavior-x:contain;border:1px solid #d9ded9;background:#fff;scrollbar-color:#087f8c #e3f1f0}
.learning-table{border-collapse:collapse;width:100%;min-width:640px;table-layout:fixed;color:#262b2d;font-size:16px;line-height:1.65}
.learning-table caption{text-align:left;padding:16px 20px;color:#066773;font-weight:800;background:#fff}
.learning-table th,.learning-table td{padding:18px 20px;vertical-align:top;border-top:1px solid #d9ded9;text-align:left;overflow-wrap:anywhere}
.learning-table thead th{background:#e3f1f0;font-size:14px;letter-spacing:.02em}
.learning-table tbody th{width:25%;color:#066773;font-weight:800}
.learning-table tbody tr:nth-child(even){background:#fbfaf6}
.table-hint{margin:8px 0 22px}
.learning-callout{padding:17px 22px;background:#e3f1f0;border-left:5px solid #087f8c;font-size:15px;line-height:1.8;color:#262b2d;margin-top:22px}
.learning-hero-visual{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:42px}
.learning-hero-visual h1{font-size:clamp(42px,5.2vw,74px)}
.learning-hero-visual figure{margin:0;background:#fff;border:1px solid #d9ded9}
.learning-hero-visual figure img,.cap-illustration img,.lettering-illustration img{display:block;width:100%;height:auto;object-fit:contain}
.learning-hero-visual figcaption,.cap-illustration figcaption,.lettering-illustration figcaption{padding:13px 18px;font-size:13px;line-height:1.7;color:#455057}
.cap-illustration,.lettering-illustration{margin:0 0 24px;background:#fff;border:1px solid #d9ded9}
.learning-mini-flow{display:flex;list-style:none;counter-reset:mini;gap:15px;padding:0;margin:0 0 28px}
.learning-mini-flow li{counter-increment:mini;background:#fff;border:1px solid #d9ded9;flex:1;padding:21px}
.learning-mini-flow li::before{content:"0" counter(mini);display:block;font-family:"Barlow Condensed",sans-serif;font-size:25px;font-weight:800;color:#066773;margin-bottom:8px}
.learning-mini-flow strong{display:block;font-size:18px;margin-bottom:8px}
.learning-mini-flow li>span{display:block;font-size:14px;line-height:1.7;color:#455057}
.learning-endlinks{display:flex;flex-wrap:wrap;gap:15px;margin-top:26px;margin-bottom:35px}
.learning-endlinks .button{font-size:16px;max-width:100%;white-space:normal}
.learning-sources{margin-top:45px}
.learning-sources details{background:#fff;border:1px solid #d9ded9}
.learning-sources summary{display:flex;justify-content:space-between;gap:20px;padding:21px 25px;cursor:pointer;font-size:17px;font-weight:800}
.learning-reference-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:25px;padding:10px 25px 25px}
.learning-reference-group h3{font-size:17px;line-height:1.5;margin:8px 0}
.learning-reference-group ul{padding-left:18px;font-size:12px;line-height:1.7}
.learning-reference-group li{margin-bottom:7px;overflow-wrap:anywhere}
.learning-reference-group a{color:#066773;text-underline-offset:3px}
.learning-disclaimer{margin-top:24px;font-size:13px;line-height:1.8}
.learning-teaser{background:#f6f3eb;color:#262b2d;display:grid;grid-template-columns:1fr 1.4fr;gap:50px;align-items:start;border-top:1px solid #d9ded9}
.learning-teaser h2{font-size:clamp(30px,3.4vw,47px);line-height:1.3}
.learning-teaser-links{display:flex;flex-direction:column;gap:13px}
.learning-teaser-links>a{display:block;text-decoration:none;padding:24px;border:1px solid #d9ded9;background:#fff;position:relative;color:#262b2d}
.learning-teaser-links>a>strong{display:block;font-size:23px;margin:16px 30px 8px 0;line-height:1.4}
.learning-teaser-links>a>p{font-size:14px;color:#455057;line-height:1.7;margin:0 30px 0 0}
.learning-teaser-links>a>span:last-child{position:absolute;right:20px;top:48%;font-size:26px;color:#066773}
.learning-teaser-links>a:hover{border-color:#087f8c;background:#e3f1f0}
.learning-crosslinks{padding-top:24px;padding-bottom:32px;display:flex;flex-wrap:wrap;gap:18px;border-top:1px solid #d9ded9;background:#f6f3eb}
.learning-crosslinks>.eyebrow{flex-basis:100%;margin:0}
.learning-crosslinks>a{font-size:15px;color:#066773}
.inspiration-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:23px;margin-top:25px;align-items:start}
.inspiration-card{border:1px solid #d9ded9;background:#fff;min-width:0}
.inspiration-name{padding:24px 21px;background:#e3f1f0;min-height:145px;display:flex;flex-direction:column;justify-content:space-between}
.inspiration-card:nth-child(3n+2) .inspiration-name{background:#f2d34f}
.inspiration-card:nth-child(3n) .inspiration-name{background:#ecebe2}
.inspiration-name>span{font-size:12px;font-weight:800;line-height:1.5}
.inspiration-name h3{font-family:"Barlow Condensed",sans-serif;font-size:38px;line-height:1.05;margin:18px 0 0;color:#262b2d;overflow-wrap:anywhere}
.inspiration-copy{padding:21px}
.inspiration-watch{font-size:13px;line-height:1.7;padding:12px 0;border-top:1px solid #d9ded9}
.inspiration-watch strong,.inspiration-watch>span{display:block}
.inspiration-watch strong{color:#066773;margin-bottom:5px}
.inspiration-copy>.text-link{font-size:13px;color:#066773}
.learning-page :is(a,summary,[tabindex="0"]):focus-visible,.learning-teaser a:focus-visible{outline:3px solid #087f8c;outline-offset:4px}
@media(max-width:1100px){.history-story-grid,.inspiration-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.learning-hero-visual{gap:25px}.learning-teaser{gap:28px}.site-header nav.open{max-height:calc(100dvh - 190px);overflow-y:auto;overscroll-behavior:contain}}
@media(max-width:650px){.learning-hero{padding-top:38px;padding-bottom:29px}.learning-hero h1{font-size:43px;line-height:1.23;letter-spacing:-.045em}.learning-intro{font-size:16px}.learning-page .section{padding-top:44px;padding-bottom:16px}.learning-jumps{gap:9px}.learning-jumps a{font-size:13px;padding:7px 10px}.history-story-grid,.inspiration-grid{grid-template-columns:1fr;gap:22px}.history-story .history-artwork{height:275px}.history-story h3{font-size:23px}.history-story-copy{padding:20px}.learning-hero-visual,.learning-teaser{grid-template-columns:1fr;gap:25px}.learning-hero-visual h1{font-size:43px}.learning-hero-visual>figure{width:100%}.learning-mini-flow{flex-direction:column;gap:10px}.learning-mini-flow li{padding:18px 21px}.learning-mini-flow li::before{display:inline-block;margin-right:14px}.learning-mini-flow strong{display:inline-block}.learning-mini-flow li>span{margin-top:8px}.chart-toolbar{padding:13px 16px;gap:7px}.chart-toolbar strong{font-size:16px}.chart-scroll{padding:8px}.chart-scroll img{min-width:760px}.learning-chart figcaption{padding:12px 16px}.learning-table{min-width:610px;font-size:15px}.learning-table th,.learning-table td{padding:15px 16px}.learning-reference-grid{grid-template-columns:1fr;padding:8px 20px 22px}.learning-endlinks{flex-direction:column;align-items:flex-start}.learning-endlinks .button{font-size:15px}.learning-teaser-links>a{padding:20px}.learning-teaser-links>a>strong{font-size:22px}.inspiration-name{min-height:120px}.inspiration-name h3{font-size:41px}.learning-disclaimer{padding-bottom:25px}}
html[lang^="en"] .learning-hero h1{font-size:clamp(38px,5vw,69px);line-height:1.13;letter-spacing:-.025em}
html[lang^="en"] .learning-page h2{font-size:clamp(28px,3.2vw,43px)}
@media(max-width:650px){html[lang^="en"] .learning-hero h1{font-size:39px}html[lang^="en"] .learning-page h2{font-size:31px}}

.people-picture{margin:0;background:#edeae2}
.people-picture img{display:block;width:100%;height:245px;object-fit:contain}
.people-picture figcaption{padding:13px 18px;font-size:12px;line-height:1.7;color:#455057}
.people-picture figcaption small,.people-picture figcaption a{display:block;margin-top:6px}
.people-picture figcaption a{color:#066773}
.people-work{border-top:1px solid #d9ded9;padding-top:13px;font-size:13px;line-height:1.7}
.people-work strong,.people-work span{display:block}
.people-work a{color:#066773}
@media(max-width:650px){.people-picture img{height:285px}}

.archive-scene{background:#fff;border:1px solid #d9ded9;margin:0 0 24px;display:grid;grid-template-columns:1.1fr 1fr;align-items:center}
.archive-scene img{width:100%;height:auto;display:block}
.archive-scene figcaption{padding:25px;font-size:15px;line-height:1.8}
.archive-scene figcaption small,.archive-scene figcaption a{display:block;margin-top:11px;font-size:12px}
.archive-scene a{color:#066773}
@media(max-width:650px){.archive-scene{grid-template-columns:1fr}.archive-scene figcaption{padding:20px}}

.drawing-page .learning-hero h1 { max-width: 900px; }
.drawing-visual-note { padding-bottom: 0; }
.drawing-topic-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 30px; align-items: start; }
.drawing-demonstration { margin: 0; background: #f6f3eb; border: 1px solid #d9ded9; }
.drawing-demonstration img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: contain; }
.drawing-demonstration figcaption { padding: 14px 18px; color: #596469; font-size: 12px; line-height: 1.7; }
.drawing-page .learning-table { min-width: 490px; }
.drawing-page .learning-table th:first-child { width: 22%; }
.drawing-page .learning-table td { line-height: 1.7; }
.drawing-page .learning-table-scroll { border: 1px solid #d9ded9; }
.drawing-material-note { margin-top: 15px; }
.colour-mini-examples { display: grid; grid-template-columns: 1.1fr .9fr; gap: 22px; margin-top: 30px; }
.colour-mini-examples > div { border: 1px solid #d9ded9; background: #fff; padding: 22px; }
.colour-mini-examples h3 { font-size: 19px; margin: 0 0 12px; }
.colour-mini-examples p { font-size: 13px; color: #596469; line-height: 1.8; margin: 10px 0; }
.colour-pairs { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 18px; }
.colour-pair { display: grid; grid-template-columns: 28px 28px; gap: 4px; }
.colour-chip { display: block; width: 28px; height: 35px; border: 1px solid #d9ded9; }
.colour-pair strong { grid-column: 1 / -1; font-size: 13px; margin-top: 3px; }
.value-chips { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.value-chips span { display: block; height: 42px; border: 1px solid #d9ded9; }
.value-chips strong { display: block; font-size: 13px; margin-top: 7px; }
@media (max-width: 1000px) {
  .drawing-topic-grid { grid-template-columns: 1fr; gap: 22px; }
  .drawing-demonstration { max-width: 650px; width: 100%; }
}
@media (max-width: 650px) {
  .colour-mini-examples { grid-template-columns: 1fr; }
  .drawing-topic-grid { gap: 18px; }
  .drawing-demonstration figcaption { padding: 12px 14px; }
}

.drawing-topic-grid > *, .colour-mini-examples > * { min-width: 0; }
.drawing-page .learning-table-scroll { max-width: 100%; }

/* Casual image-saving deterrents, not encryption or absolute download prevention. */
img {
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}