:root{--forest:#143b37;--deep:#0d302d;--gold:#dfba76;--ink:#1e2d2b;--muted:#52635f;--bg:#fcfbf8;--soft:#f1f4ef;--line:#dbe2dc}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:90px}body{margin:0;background:var(--bg);color:var(--ink);font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;line-height:1.65}a{color:inherit}a:hover{color:#98672b}.shell{width:min(1140px,calc(100% - 48px));margin:0 auto}.skip{position:absolute;transform:translateY(-130%);z-index:99;background:#fff;padding:12px}.skip:focus{transform:none}.site-header{background:#fff;position:sticky;top:0;z-index:10;border-bottom:1px solid #e8ebe6}.header-inner{height:82px;display:flex;align-items:center;justify-content:space-between;gap:20px}.brand{display:flex;gap:13px;align-items:center;text-decoration:none;color:var(--forest)}.brand-mark{border:1.5px solid var(--gold);border-radius:50%;height:48px;width:48px;display:grid;place-items:center;font-size:29px;color:var(--forest)}.brand strong{display:block;line-height:1.1;font-size:16px}.brand small{letter-spacing:2px;font-size:9px;font-weight:700;color:#7b877c}nav{display:flex;align-items:center;gap:27px}nav a{text-decoration:none;color:#344440;font-weight:600;font-size:13px}.menu-toggle{display:none;background:none;border:none;font-size:26px;color:var(--forest);cursor:pointer}.hero{background:radial-gradient(circle at 85% 5%,#32635a 0%,transparent 43%),linear-gradient(130deg,#113a34,#082926);color:white;position:relative;overflow:hidden}.hero::after{content:'✝';position:absolute;right:6%;bottom:-190px;font-size:600px;color:#ffffff09;line-height:1;pointer-events:none}.hero-content{padding:116px 0 126px;position:relative;z-index:1}.hero h1{font-family:Georgia,serif;font-size:clamp(48px,6vw,82px);line-height:1.07;font-weight:400;letter-spacing:-2px;margin:24px 0}.hero h1 em{color:var(--gold);font-weight:400}.hero p{max-width:620px;color:#d6e6df;font-size:19px}.eyebrow{letter-spacing:2.7px;font-size:11px;color:#a47b43;font-weight:800}.eyebrow.light{color:var(--gold)}.actions,.contact-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}.btn{padding:13px 23px;display:inline-block;border-radius:4px;text-decoration:none;font-size:13px;font-weight:800;transition:transform .2s,background .2s}.btn:hover{transform:translateY(-2px)}.btn.primary{background:var(--gold);color:var(--deep)}.btn.ghost,.btn.outline-light{border:1px solid #8ca8a0;color:#fff}.btn.secondary{background:#fff;border:1px solid var(--line);color:var(--forest)}.section{padding:92px 0}.section.soft{background:var(--soft)}.section.dark{background:var(--forest);color:#fff}.columns{display:grid;grid-template-columns:1fr 1fr;gap:75px}.section h2{font:400 clamp(35px,4vw,49px)/1.17 Georgia,serif;letter-spacing:-1px;margin:14px 0 26px;max-width:600px}.prose p,.section-lead{color:var(--muted);font-size:16px}.prose p:first-child{margin-top:0}.text-link{color:#8a622f;text-decoration:none;font-weight:800;font-size:13px}.mission-layout{display:grid;grid-template-columns:1.45fr 1fr;gap:40px}.mission-quote{border-left:3px solid var(--gold);padding:0 28px}.mission-quote p{font:400 27px/1.45 Georgia,serif;margin:0 0 18px}.mission-quote small{font-size:12px;color:#69766d}.conference{background:#fff;padding:31px;border:1px solid var(--line)}.conference h3{font:400 30px Georgia,serif;margin:12px 0}.conference p{color:var(--muted)}.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:30px}.card{background:white;border:1px solid var(--line);padding:29px;min-height:250px}.card-icon{font-size:32px;color:#b58a51}.card h3{font:400 25px Georgia,serif;margin:16px 0 8px}.card p{color:var(--muted);font-size:14px}.history p{color:#d2e0da}.timeline{border-left:1px solid #50736b;padding-left:30px}.timeline div{position:relative;padding-bottom:20px}.timeline div:before{content:'';position:absolute;left:-36px;top:10px;background:var(--gold);height:11px;width:11px;border-radius:50%}.timeline span{color:var(--gold);font-size:21px;font-weight:800}.timeline p{margin-top:5px}.identity-grid{display:grid;grid-template-columns:repeat(2,1fr);border-top:1px solid var(--line);border-left:1px solid var(--line)}.identity-item{padding:24px;border-bottom:1px solid var(--line);border-right:1px solid var(--line)}.identity-item span{display:block;text-transform:uppercase;letter-spacing:1.2px;font-size:10px;color:#738078;font-weight:800;margin-bottom:9px}.identity-item strong{font-size:16px}.note{margin-top:22px;background:var(--soft);padding:19px 22px;border-left:3px solid var(--gold);font-size:13px;color:#40544b}.note a{font-weight:800;color:#856129}.contact-panel{background:#fff;padding:37px;box-shadow:0 12px 40px #143b3710}.contact-detail{padding:13px 0;border-bottom:1px solid var(--line)}.contact-detail:last-child{border:none}.contact-detail small{display:block;color:#8b8070;font-size:10px;letter-spacing:1.8px;font-weight:800}.contact-detail strong,.contact-detail a{font-weight:600;text-decoration:none;color:var(--forest)}.footer{background:#0a2825;color:#eff5f1;padding-top:40px}.footer-content{display:flex;justify-content:space-between;gap:25px}.footer-content p,.footer-content small{color:#a9beb5;font-size:13px}.footer-content div:last-child{display:flex;flex-direction:column;gap:10px}.footer-content a{color:#f0d7aa;text-decoration:none;font-size:13px}.footer-bottom{border-top:1px solid #ffffff22;padding:18px 0;margin-top:35px;color:#9ab1a6;font-size:12px}@media(max-width:800px){.menu-toggle{display:block}nav{display:none;position:absolute;top:81px;left:0;right:0;background:white;flex-direction:column;gap:0;align-items:stretch;box-shadow:0 10px 20px #0001}nav.open{display:flex}nav a{padding:14px 24px;border-top:1px solid var(--line)}.columns,.mission-layout{grid-template-columns:1fr;gap:25px}.cards{grid-template-columns:1fr}.section{padding:65px 0}.hero-content{padding:84px 0 94px}.identity-grid{grid-template-columns:1fr}.footer-content{display:block}.footer-content div:last-child{margin-top:22px}.mission-quote p{font-size:23px}}@media(max-width:480px){.shell{width:min(100% - 32px,1140px)}.brand strong{font-size:13px}.brand-mark{width:40px;height:40px;font-size:24px}.brand small{font-size:8px;letter-spacing:1px}.hero p{font-size:16px}}

/* Church brand identity */
.brand-logo{width:72px;height:60px;object-fit:contain;flex-shrink:0}.brand strong{font-size:16px;line-height:1.2;max-width:290px}@media(max-width:480px){.brand-logo{width:54px;height:48px}.brand strong{font-size:13px}}

/* Dedicated church history page */
.history-banner{background:linear-gradient(125deg,#143b37,#0a2825);color:white;padding:90px 0 74px}.history-banner h1{font:400 clamp(44px,6vw,74px)/1.1 Georgia,serif;margin:14px 0 20px}.history-banner p{font-size:18px;max-width:650px;color:#d4e3da;margin-bottom:28px}.history-layout{display:grid;grid-template-columns:240px minmax(0,1fr);gap:64px;align-items:start}.history-aside{position:sticky;top:110px;border-left:3px solid var(--gold);padding:12px 0 12px 20px;display:flex;flex-direction:column;gap:9px}.history-aside strong{margin-bottom:8px}.history-aside a{font-size:13px;text-decoration:none;color:#47645b}.history-aside a:hover{color:#97602c}.history-article{max-width:760px}.history-article h2{font-size:42px}.history-article>p{font-size:16px;color:var(--muted)}.history-article section{padding:34px 0 30px;border-bottom:1px solid var(--line);scroll-margin-top:105px}.history-article section h3{font:400 31px/1.3 Georgia,serif;margin:9px 0 20px}.history-article section p{color:#46564e;line-height:1.85}.era{font-size:12px;letter-spacing:2px;color:#a27439;font-weight:800}.history-source{margin:40px 0 0;background:var(--soft);padding:25px;border-left:3px solid var(--gold)}.history-source p{margin-bottom:0;color:var(--muted);font-size:14px}.history-source a{color:#72512d;font-weight:700}nav a[aria-current="page"]{color:#a27439}@media(max-width:800px){.history-layout{grid-template-columns:1fr;gap:20px}.history-aside{position:static;border-left:0;border-bottom:1px solid var(--line);padding:0 0 24px;display:block}.history-aside a{display:inline-block;margin:4px 12px 4px 0}.history-banner{padding:65px 0}.history-article h2{font-size:35px}}
/* Church vision and mission */
.church-mission p{font-size:16px;line-height:1.85;margin-top:12px}.mission-quote p{font-size:clamp(19px,2.2vw,25px);line-height:1.65;margin-top:12px}.church-mission{align-self:start}

/* Certificate link */
.certificate-action { margin-top: 1.75rem; }

/* Social media links */
.social-footer{display:flex;align-items:center;gap:16px;padding-top:22px}.social-footer strong{font-size:13px}.social-footer a{display:inline-flex;border:1px solid #ffffff55;border-radius:6px;padding:8px 14px;color:#f0d7aa;text-decoration:none;font-weight:700;font-size:13px}.social-footer a:hover,.social-footer a:focus-visible{background:#ffffff19;color:#fff}.contact-detail a:hover{text-decoration:underline}

/* Church music archive */
.music-banner{background:radial-gradient(circle at 85% 12%,#386858 0%,transparent 45%),linear-gradient(135deg,#133e37,#092823);padding:92px 0 82px;color:#fff}.music-banner h1{font:400 clamp(48px,6vw,76px)/1.08 Georgia,serif;margin:17px 0 21px}.music-banner p{max-width:700px;color:#d6e6df;font-size:18px;margin:0 0 32px}.music-intro{max-width:850px}.song-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px;margin-top:35px}.song-card{background:#fff;border:1px solid var(--line);border-radius:9px;overflow:hidden;box-shadow:0 9px 24px #143b370b}.song-frame{aspect-ratio:16/9;background:#102d29}.song-frame iframe{width:100%;height:100%;border:0}.song-info{padding:25px}.song-number{font-size:11px;letter-spacing:1.6px;font-weight:800;color:#8d652f}.song-info h3{font:400 27px/1.23 Georgia,serif;margin:10px 0}.song-info p{font-size:14px;color:var(--muted);min-height:68px}.song-actions{display:flex;align-items:center;flex-wrap:wrap;gap:12px;margin-top:20px}.stream-link{font-size:13px;font-weight:750;color:#76542b}.music-promo .btn{margin-top:14px}@media(max-width:820px){.song-grid{grid-template-columns:1fr}.song-info p{min-height:0}.music-banner{padding:70px 0 60px}}

/* Reliable click-to-play music previews: poster is visible before YouTube loads. */
.song-frame{position:relative;overflow:hidden;isolation:isolate}
.video-play{display:block;position:absolute;inset:0;width:100%;height:100%;border:0;padding:0;background:linear-gradient(135deg,#153e37,#071f20);cursor:pointer;color:#fff}
.video-play img{display:block;width:100%;height:100%;object-fit:cover;opacity:.88}
.video-play:focus-visible{outline:4px solid var(--gold);outline-offset:-4px}
.play-symbol{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:grid;place-items:center;padding-left:4px;width:74px;height:53px;border-radius:14px;background:#dc2626;color:white;font-size:26px;box-shadow:0 4px 20px #0006;transition:transform .2s}
.video-play:hover .play-symbol{transform:translate(-50%,-50%) scale(1.08)}
.song-frame iframe{display:block;position:absolute;inset:0;width:100%;height:100%;border:0}
.video-fallback{position:absolute;right:12px;bottom:12px;z-index:2;border-radius:5px;padding:5px 9px;color:#fff;background:#102b2bda;font-size:12px;font-weight:700;text-decoration:none}
.video-fallback:hover{color:var(--gold);background:#071b1bea}
.song-frame.playing .video-fallback{bottom:0;right:0;border-radius:5px 0 0 0;font-size:11px}
@media(max-width:480px){.play-symbol{width:60px;height:44px;font-size:21px}}

/* TMC Ipoh's verified Spotify releases */
.spotify-layout{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:30px;align-items:start;margin-top:30px}.spotify-panel{background:white;border:1px solid var(--line);padding:18px;border-radius:12px}.spotify-panel iframe{display:block;max-width:100%}.spotify-panel .btn{margin-top:16px}.spotify-tracks{list-style:none;counter-reset:track;margin:0;padding:0;background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden}.spotify-tracks li{counter-increment:track;display:grid;grid-template-columns:35px 1fr;gap:1px 12px;padding:16px 20px;border-bottom:1px solid var(--line)}.spotify-tracks li:last-child{border-bottom:0}.spotify-tracks li::before{content:counter(track,decimal-leading-zero);grid-row:span 2;color:#987044;font-size:12px;font-weight:800;padding-top:3px}.spotify-tracks strong{font-size:16px}.spotify-tracks span{color:var(--muted);font-size:13px}@media(max-width:850px){.spotify-layout{grid-template-columns:1fr}}

/* TMCI YouTube music page — independent responsive design */
.yt-hero{background:radial-gradient(circle at 80% 22%,#306459 0,transparent 40%),linear-gradient(125deg,#103b34 0%,#092522 100%);color:#fff;position:relative;overflow:hidden}.yt-hero .shell{position:relative}.yt-hero-inner{padding:104px 0 112px;position:relative;z-index:1;max-width:780px}.yt-hero h1{font:400 clamp(49px,6vw,86px)/1.07 Georgia,serif;letter-spacing:-2px;margin:20px 0 24px}.yt-hero h1 em{color:var(--gold);font-weight:400}.yt-hero p{max-width:590px;font-size:18px;line-height:1.7;color:#d9e8de}.yt-hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}.yt-hero-decoration{position:absolute;right:3%;top:-70px;opacity:.07;font-family:Georgia,serif;font-size:480px;line-height:1;pointer-events:none}.yt-section{background:#fcfbf8}.yt-section-heading{display:flex;justify-content:space-between;align-items:end;gap:22px;margin-bottom:33px}.yt-section-heading h2{margin:9px 0 14px}.yt-section-heading .section-lead{max-width:685px}.yt-count{flex-shrink:0;text-align:center;border-left:1px solid var(--line);padding-left:38px;color:var(--forest)}.yt-count strong{display:block;font:400 56px Georgia,serif;line-height:1}.yt-count span{font-size:11px;letter-spacing:1px;text-transform:uppercase;color:var(--muted)}.yt-release-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:25px}.yt-release{min-width:0;background:#fff;border:1px solid var(--line);border-radius:13px;overflow:hidden;box-shadow:0 10px 30px #143b370c;transition:transform .2s,box-shadow .2s}.yt-release:hover{transform:translateY(-3px);box-shadow:0 15px 36px #143b3717}.yt-media{background:#102d29;aspect-ratio:16/9;position:relative}.yt-poster{position:relative;display:block;width:100%;height:100%;border:0;padding:0;cursor:pointer;background:#102d29;overflow:hidden}.yt-poster img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .3s}.yt-poster:hover img{transform:scale(1.035)}.yt-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);height:67px;width:67px;border-radius:50%;display:grid;place-items:center;background:#fff;color:#18483e;box-shadow:0 5px 26px #0007;padding-left:4px;font-size:23px}.yt-poster:hover .yt-play{background:var(--gold)}.yt-poster-caption{position:absolute;bottom:16px;left:20px;font-size:10px;letter-spacing:2px;background:#092b28db;color:#fff;padding:7px 12px;border-radius:3px}.yt-media iframe{width:100%;height:100%;border:0;display:block}.yt-info{padding:25px 27px 28px}.yt-index{font-size:10px;letter-spacing:1.8px;font-weight:800;color:#986d38}.yt-info h3{font:400 clamp(24px,2.7vw,30px)/1.2 Georgia,serif;margin:10px 0 12px;overflow-wrap:anywhere}.yt-info p{color:var(--muted);font-size:14px;margin:0;min-height:70px}.yt-actions{margin-top:19px;display:flex;align-items:center;gap:15px;flex-wrap:wrap}.yt-description{color:#866032;font-weight:700;font-size:12px;text-underline-offset:4px}.yt-footnote{margin-top:28px;padding:23px 28px;background:#f1f4ef;border-left:3px solid var(--gold);font-size:13px}.yt-footnote p{color:var(--muted);margin:6px 0 0}.yt-cta{display:flex;justify-content:space-between;align-items:center;gap:24px}.yt-cta p{color:var(--muted);max-width:500px}.yt-cta-links{display:flex;gap:12px;flex-wrap:wrap}@media(max-width:820px){.yt-hero-inner{padding:75px 0 84px}.yt-release-grid{grid-template-columns:1fr}.yt-section-heading{align-items:start}.yt-cta{display:block}.yt-cta-links{margin-top:20px}}@media(max-width:520px){.yt-count{display:none}.yt-hero h1{letter-spacing:-1px}.yt-hero-decoration{display:none}.yt-info{padding:20px}.yt-info p{min-height:0}}

/* Official music streaming artist profile actions */
.yt-actions { flex-wrap: wrap; }
.stream-platform { display:inline-flex; align-items:center; justify-content:center; gap:.45rem; border:1px solid rgba(20,59,55,.17); border-radius:999px; background:#fff; color:#173932; padding:.67rem .85rem; font-weight:700; font-size:.9rem; line-height:1.2; text-decoration:none; transition:transform .15s ease, box-shadow .15s ease; }
.stream-platform:hover, .stream-platform:focus-visible { transform:translateY(-2px); box-shadow:0 5px 15px rgba(10,30,25,.13); }
.stream-platform img { width:21px; height:21px; display:block; flex-shrink:0; }
.spotify-platform { border-color:#b4dbbd; }
.apple-platform { border-color:#f2bed0; }
@media(max-width:460px) { .yt-actions .stream-platform { flex:1 1 43%; } }

.social-footer a{display:inline-flex;align-items:center;gap:.45rem}.social-icon{width:19px;height:19px;object-fit:contain;display:inline-block;vertical-align:middle}


/* Mobile-first usability improvements — October 2026 */
html { -webkit-text-size-adjust: 100%; }
body { overflow-x: clip; }
img, svg, video, iframe { max-width: 100%; }
button, a { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid #b78235; outline-offset: 3px; }
.brand { min-width:0; }
.brand span { min-width:0; }
.header-inner { min-width:0; }
.site-header nav a { min-height:44px; }
.social-footer { flex-wrap:wrap; row-gap:12px; }
.social-footer a { min-height:44px; align-items:center; }
.contact-detail, .identity-item, .track-copy { overflow-wrap:anywhere; }
.track-row { min-width:0; }
.track-main { min-width:0; }
.track-art { object-fit:cover; }
.history-article, .prose { min-width:0; }
@media (max-width: 980px) {
  .header-inner { height:74px; }
  .menu-toggle { display:flex; align-items:center; justify-content:center; width:46px; height:46px; flex-shrink:0; }
  #site-nav { display:none; position:absolute; top:74px; left:0; right:0; z-index:20; flex-direction:column; gap:0; align-items:stretch; max-height:calc(100dvh - 74px); overflow-y:auto; background:#fff; box-shadow:0 12px 18px #0002; }
  #site-nav.open { display:flex; }
  #site-nav a { padding:13px 24px; border-top:1px solid var(--line); font-size:15px; min-height:48px; }
}
@media (max-width: 680px) {
  .shell { width:calc(100% - 32px); }
  .section { padding:52px 0; }
  .hero-content { padding:64px 0 75px; }
  .hero h1 { font-size:clamp(38px,10vw,55px); letter-spacing:-1px; }
  .hero p, .yt-hero p, .history-banner p { font-size:16px; }
  .yt-hero-inner { padding:64px 0 70px; }
  .yt-hero h1, .history-banner h1 { font-size:clamp(37px,10vw,55px); letter-spacing:-1px; }
  .yt-hero-actions, .actions, .contact-actions, .yt-cta-links { gap:10px; }
  .yt-hero-actions .btn { text-align:center; }
  .section h2 { font-size:clamp(31px,8vw,40px); }
  .history-article section h3 { font-size:26px; }
  .history-article h2 { font-size:34px; }
  .history-banner { padding:54px 0; }
  .mission-quote { padding:0 0 0 18px; }
  .conference, .card, .contact-panel { padding:22px; }
  .yt-section-heading { display:block; }
  .yt-count { display:none; }
  .yt-info { padding:19px; }
  .yt-info h3 { font-size:25px; }
  .yt-release-grid { gap:18px; }
  .yt-actions .btn { min-height:44px; text-align:center; }
  .track-row { padding:16px !important; align-items:stretch !important; }
  .track-main { width:100%; gap:13px; }
  .track-art { width:88px !important; height:88px !important; min-width:88px; flex:0 0 88px; }
  .track-row strong { font-size:16px; line-height:1.3; }
  .track-row p { font-size:13px; }
  .track-links { width:100%; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
  .track-links a { min-width:0; white-space:normal; min-height:44px; padding:9px 6px; font-size:12px; text-align:center; }
  .track-links a img { width:18px; height:18px; }
  .social-footer { gap:8px; }
  .social-footer strong { width:100%; }
  .social-footer a { padding:9px 12px; }
  .footer-content { gap:16px; }
}
@media (max-width: 360px) {
  .brand-logo { width:45px; height:42px; }
  .brand strong { font-size:12px; }
  .track-art { width:72px !important; height:72px !important; min-width:72px; flex-basis:72px; }
  .stream-platform { gap:5px; }
  .yt-hero-actions .btn { width:100%; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after { transition-duration:0.01ms !important; animation-duration:0.01ms !important; }
}