/* bukitchagar.sg — shared styles (v2)
   Colours borrowed from transit signage: four line colours on warm paper. */
*{box-sizing:border-box}
:root{
  --paper:#FFFCF5; --white:#fff; --ink:#1A1A22; --muted:#5C5A62; --line:#E6E0D3; --tint:#FFF4DC;
  --red:#E4402B; --amber:#F39A1E; --yellow:#FFC93C; --green:#1E9E63; --blue:#2368D6; --violet:#7A4CC2;
  --board:#14213D; --board2:#1C2C4F;
  --link:#2368D6;
  --head:'Archivo','Arial Narrow',Arial,sans-serif;
  --body:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:17px/1.65 var(--body)}
a{color:var(--link);text-underline-offset:2px}
a:hover{text-decoration-thickness:2px}
img,svg{max-width:100%}
h1,h2,h3{font-family:var(--head);font-weight:800;line-height:1.15;letter-spacing:-.01em}
h1{font-size:clamp(32px,5vw,48px);font-stretch:85%;margin:0 0 12px}
h2{font-size:clamp(24px,3.2vw,30px);font-stretch:90%;margin:46px 0 12px}
h2::before{content:"";display:block;width:44px;height:6px;border-radius:3px;margin-bottom:12px;
  background:linear-gradient(90deg,var(--red) 0 25%,var(--amber) 25% 50%,var(--green) 50% 75%,var(--blue) 75%)}
h3{font-size:20px;margin:26px 0 6px}
p,ul,ol{margin:0 0 16px}
ul,ol{padding-left:22px}
li{margin-bottom:6px}
.small{font-size:14px;color:var(--muted)}
.wrap{max-width:1080px;margin:0 auto;padding:0 20px}

/* ---- masthead ---- */
.top{background:var(--white)}
.top .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px;padding-top:14px;padding-bottom:12px}
.name{display:flex;align-items:center;gap:10px;font-family:var(--head);font-weight:800;font-size:21px;
  color:var(--ink);text-decoration:none;margin-right:auto;letter-spacing:-.01em}
.name img{width:30px;height:30px}
.top nav{display:flex;flex-wrap:wrap;gap:4px 6px}
.top nav a{font-size:15px;font-weight:600;color:var(--ink);text-decoration:none;padding:6px 10px;border-radius:6px}
.top nav a:hover{background:var(--tint)}
.top nav a[aria-current=page]{background:var(--ink);color:#fff}
.stripe{height:6px;background:linear-gradient(90deg,var(--red) 0 25%,var(--amber) 25% 50%,var(--green) 50% 75%,var(--blue) 75%)}

/* ---- slim next-train strip on inner pages ---- */
.strip{background:var(--board);color:#DCE3F2;font-size:14px}
.strip .wrap{display:flex;flex-wrap:wrap;gap:4px 14px;align-items:center;padding-top:8px;padding-bottom:8px}
.strip b{color:var(--yellow);font-variant-numeric:tabular-nums}
.strip a{color:#fff}

/* ---- page intro ---- */
.intro{padding:34px 0 8px}
.standfirst{font-size:clamp(17px,2vw,19.5px);color:#35343B;max-width:62ch;margin-bottom:12px}
.byline{font-size:14.5px;color:var(--muted)}
.crumb{font-size:14px;color:var(--muted);margin-bottom:10px}
.crumb a{color:var(--muted)}

/* ---- departures board countdown ---- */
.board{background:var(--board);color:#fff;border-radius:16px;padding:18px 18px 20px;margin:22px 0 8px;
  box-shadow:0 1px 0 rgba(0,0,0,.04),0 14px 30px -18px rgba(20,33,61,.6)}
.board-head{display:flex;flex-wrap:wrap;gap:6px 16px;align-items:center;font-size:13px;letter-spacing:.06em;
  text-transform:uppercase;color:#AFC0E0;padding-bottom:14px;border-bottom:1px dashed rgba(255,255,255,.18);margin-bottom:16px}
.board-head .dest{font-family:var(--head);font-weight:800;font-size:clamp(18px,2.6vw,22px);letter-spacing:0;
  text-transform:none;color:#fff;margin-right:auto}
.board-head .dest i{font-style:normal;color:var(--yellow);padding:0 6px}
.status{display:inline-flex;align-items:center;gap:7px;background:var(--yellow);color:#2A1E00;font-weight:800;
  border-radius:999px;padding:4px 11px;letter-spacing:.04em}
.status::before{content:"";width:8px;height:8px;border-radius:50%;background:#2A1E00;animation:blink 1.6s infinite}
@keyframes blink{50%{opacity:.25}}

.units{display:grid;grid-template-columns:1.35fr 1fr 1fr 1fr;gap:12px}
.unit{text-align:center}
.tiles{display:flex;justify-content:center;gap:5px}
.tile{position:relative;width:clamp(34px,7vw,62px);height:clamp(50px,10vw,84px);border-radius:9px;
  display:flex;align-items:center;justify-content:center;font-family:var(--head);font-weight:800;
  font-size:clamp(30px,6.4vw,56px);color:#fff;font-variant-numeric:tabular-nums;overflow:hidden;
  perspective:300px;box-shadow:inset 0 -3px 0 rgba(0,0,0,.18)}
.tile::after{content:"";position:absolute;left:0;right:0;top:50%;height:2px;background:rgba(0,0,0,.22)}
.tile span{display:block;line-height:1}
.tile.flip span{animation:flip .38s ease-out}
@keyframes flip{0%{transform:rotateX(-90deg);opacity:.2}100%{transform:none;opacity:1}}
.u-d .tile{background:var(--red)} .u-h .tile{background:var(--amber)}
.u-m .tile{background:var(--green)} .u-s .tile{background:var(--blue)}
.unit small{display:block;margin-top:8px;font-size:12.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.u-d small{color:#FF8B7A} .u-h small{color:#FFC16B} .u-m small{color:#6FE0A8} .u-s small{color:#8DB6FF}
.board-foot{margin:16px 0 0;font-size:14px;color:#C5D0E6}
.board-foot strong{color:#fff}

/* milestone line under the board */
.route{list-style:none;padding:0;margin:18px 0 0;display:grid;grid-template-columns:repeat(4,1fr);gap:0;position:relative}
.route::before{content:"";position:absolute;left:12.5%;right:12.5%;top:9px;height:4px;border-radius:2px;
  background:linear-gradient(90deg,var(--green) 0 20%,rgba(255,255,255,.22) 20%)}
.route li{position:relative;text-align:center;font-size:13px;color:#C5D0E6;margin:0;padding:0 4px}
.route li::before{content:"";display:block;width:22px;height:22px;margin:0 auto 8px;border-radius:50%;
  background:var(--board);border:4px solid rgba(255,255,255,.35);position:relative}
.route li.done::before{border-color:var(--green);background:var(--green)}
.route li.soon::before{border-color:var(--amber)}
.route li.goal::before{border-color:var(--red);background:var(--red)}
.route b{display:block;color:#fff;font-size:13.5px}

@media (prefers-reduced-motion:reduce){.tile.flip span,.status::before{animation:none}}

/* ---- layout with facts box ---- */
.layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:44px;padding:10px 0 10px}
article{max-width:690px}
aside .box{background:var(--white);border:2px solid var(--ink);border-radius:12px;overflow:hidden;font-size:15px;
  position:sticky;top:16px}
aside .box h3{margin:0;padding:10px 16px;background:var(--ink);color:#fff;font-size:16px}
aside dl{margin:0;padding:6px 16px 14px}
aside dt{font-weight:700;margin-top:10px;font-size:13px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
aside dd{margin:2px 0 0}

/* ---- status pills ---- */
.pill{display:inline-block;font-size:12px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;
  padding:3px 9px;border-radius:999px;white-space:nowrap;vertical-align:2px}
.pill.ok{background:#D9F3E6;color:#0F6B41}
.pill.wait{background:#FFEBC7;color:#8A4B00}
.pill.no{background:#FDE0DB;color:#A32615}
.known{list-style:none;padding:0;margin:14px 0 20px;border-top:1px solid var(--line)}
.known li{display:grid;grid-template-columns:130px 1fr;gap:12px;padding:12px 0;border-bottom:1px solid var(--line);margin:0}
.known li p{margin:0}

/* ---- figure / map ---- */
figure{margin:24px 0}
figure svg{display:block;width:100%;height:auto;background:var(--white);border:1px solid var(--line);border-radius:12px}
figcaption{font-size:14px;color:var(--muted);margin-top:8px}

/* ---- tables ---- */
.tbl{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:15.5px;margin:8px 0 18px}
th,td{text-align:left;vertical-align:top;padding:10px 12px 10px 0;border-bottom:1px solid var(--line)}
thead th{font-size:12.5px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;border-bottom:2px solid var(--ink)}

/* ---- notes ---- */
.note{border-left:6px solid var(--amber);background:var(--tint);padding:14px 16px;margin:22px 0;border-radius:0 10px 10px 0}

/* ---- next-step links ---- */
.next{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin:22px 0}
.next a{display:block;padding:14px 16px;border-radius:10px;color:#fff;text-decoration:none;font-weight:700;line-height:1.35}
.next a small{display:block;font-weight:400;opacity:.9;margin-top:3px;font-size:14px}
.next a:nth-child(4n+1){background:var(--red)} .next a:nth-child(4n+2){background:var(--blue)}
.next a:nth-child(4n+3){background:var(--green)} .next a:nth-child(4n+4){background:var(--violet)}
.next a:hover{filter:brightness(1.08)}

/* ---- faq ---- */
details{border-bottom:1px solid var(--line)}
details:first-of-type{border-top:1px solid var(--line)}
summary{cursor:pointer;padding:14px 30px 14px 0;font-weight:700;position:relative;list-style:none}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";position:absolute;right:4px;top:10px;font-size:24px;font-weight:400;color:var(--blue)}
details[open] summary::after{content:"\2212"}
details .ans{padding:0 0 12px}
summary .pill{margin-left:8px}
details .ans p:last-child{margin-bottom:0}

/* ---- changelog ---- */
.log{list-style:none;padding:0;font-size:15px}
.log li{display:grid;grid-template-columns:100px 1fr;gap:10px}
.log time{color:var(--muted);font-variant-numeric:tabular-nums}

/* ---- footer ---- */
footer{background:var(--ink);color:#C9C8D0;margin-top:50px;font-size:14.5px}
footer .stripe{height:6px}
footer .wrap{padding-top:30px;padding-bottom:34px}
.fcols{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:22px;margin-bottom:20px}
footer h4{font-family:var(--head);color:#fff;margin:0 0 8px;font-size:15px}
footer ul{list-style:none;padding:0;margin:0}
footer li{margin-bottom:5px}
footer a{color:#fff}
footer .fine{border-top:1px solid rgba(255,255,255,.14);padding-top:14px;font-size:13.5px;color:#A6A5AE;margin:0}

@media (max-width:880px){
  .layout{grid-template-columns:1fr;gap:0}
  aside{order:-1;margin:6px 0 24px}
  aside .box{position:static}
}
@media (max-width:560px){
  body{font-size:16.5px}
  .units{grid-template-columns:1fr 1fr;gap:16px 10px}
  .tile{width:44px;height:62px;font-size:40px}
  .route{grid-template-columns:1fr 1fr;row-gap:16px}
  .route::before{display:none}
  .known li{grid-template-columns:1fr;gap:4px}
  .log li{grid-template-columns:1fr;gap:0}
}

/* ===== motion & colour layer ===== */
/* scroll progress bar in line colours */
.progress{position:fixed;left:0;top:0;height:4px;width:100%;z-index:99;transform-origin:0 50%;transform:scaleX(0);
  background:linear-gradient(90deg,var(--red),var(--amber),var(--yellow),var(--green),var(--blue),var(--violet));pointer-events:none}
/* a light that runs along the header stripe, like a train passing */
.stripe{position:relative;overflow:hidden}
.stripe::after{content:"";position:absolute;top:0;left:-120px;width:120px;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.85),transparent);animation:pass 7s linear infinite}
@keyframes pass{to{left:100%}}
/* headings: colour bar grows in, each heading picks the next line colour */
h2::before{transition:width .7s cubic-bezier(.2,.8,.2,1)}
h2.reveal::before{width:0}
h2.reveal.in::before{width:44px}
/* reveal on scroll */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.8,.2,1)}
.reveal.in{opacity:1;transform:none}
/* countdown: tiles drop in on load, seconds glow */
.board .tile{animation:drop .7s cubic-bezier(.2,1.4,.4,1) both}
.u-h .tile{animation-delay:.08s} .u-m .tile{animation-delay:.16s} .u-s .tile{animation-delay:.24s}
@keyframes drop{from{transform:translateY(-26px) scale(.8);opacity:0}}
.u-s .tiles{filter:drop-shadow(0 0 10px rgba(255,255,255,.18))}
.board{position:relative;overflow:hidden}
.board::before{content:"";position:absolute;inset:-40% -10% auto auto;width:260px;height:260px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,201,60,.16),transparent 70%);animation:float 9s ease-in-out infinite alternate;pointer-events:none}
@keyframes float{to{transform:translate(-60px,40px)}}
/* little train travelling along the milestone line */
.route .train{position:absolute;top:2px;width:26px;height:18px;border-radius:5px 9px 9px 5px;background:var(--yellow);
  box-shadow:0 0 0 3px rgba(0,0,0,.25);left:12.5%;transform:translateX(-50%);animation:ride 2.4s cubic-bezier(.4,0,.2,1) .5s forwards;z-index:2}
.route .train::before{content:"";position:absolute;left:5px;right:8px;top:4px;height:5px;border-radius:2px;background:rgba(0,0,0,.45)}
.route .train::after{content:"";position:absolute;right:-5px;top:6px;width:6px;height:6px;border-radius:50%;background:#fff;animation:blink 1s infinite}
@keyframes ride{to{left:var(--to,30%)}}
/* coloured link buttons lift and point */
.next a{position:relative;padding-right:40px;transition:transform .2s ease,box-shadow .2s ease,filter .2s}
.next a::after{content:"\2192";position:absolute;right:14px;top:12px;font-size:20px;transition:transform .2s}
.next a:hover{transform:translateY(-4px) rotate(-.6deg);box-shadow:0 14px 22px -12px rgba(0,0,0,.55)}
.next a:hover::after{transform:translateX(5px)}
/* status rows and table rows light up on hover */
.known li{transition:background .2s,padding .2s;border-radius:8px}
.known li:hover{background:var(--tint);padding-left:10px;padding-right:10px}
tbody tr{transition:background .15s}
tbody tr:hover{background:var(--tint)}
/* FAQ: coloured edge when open, answer slides in */
details{transition:background .2s}
details[open]{background:var(--white);box-shadow:inset 4px 0 0 var(--amber);padding-left:14px}
details[open] .ans{animation:open .35s ease}
@keyframes open{from{opacity:0;transform:translateY(-6px)}}
summary:hover{color:var(--link)}
/* pills pop a little */
.pill{transition:transform .15s}
.pill:hover{transform:scale(1.06)}
/* map/diagram lines draw themselves */
.draw{stroke-dasharray:var(--len,700);stroke-dashoffset:var(--len,700)}
figure.in .draw{animation:drawline 2.2s cubic-bezier(.4,0,.2,1) .2s forwards}
@keyframes drawline{to{stroke-dashoffset:0}}
.ping{transform-box:fill-box;transform-origin:center;animation:ping 2.2s ease-out infinite}
@keyframes ping{0%{transform:scale(1);opacity:.7}100%{transform:scale(2.6);opacity:0}}
/* contact block */
.contact{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;background:var(--tint);border-radius:12px;padding:14px 16px;margin:26px 0}
.contact strong{font-family:var(--head)}
.contact a.mail{font-weight:700;font-size:17px}
footer .mail{font-weight:700;font-size:16px}

@media (prefers-reduced-motion:reduce){
  .stripe::after,.board::before,.board .tile,.route .train,.ping,details[open] .ans{animation:none}
  .route .train{left:var(--to,30%)}
  .reveal{opacity:1;transform:none;transition:none}
  h2.reveal::before{width:44px}
  .draw{stroke-dashoffset:0}
  .next a:hover{transform:none}
}
h2[style*="--h2c"]::before{background:var(--h2c)}