/* ==========================================================================
   SCRIPTSHIFT TECHNOLOGIES PTY LTD  /  siding.css
   Dark technical specification surface.
   Gelasio carries the display, Karla carries the text.
   No monospace anywhere. No box shadow anywhere. No rounded corner anywhere.
   State is expressed with [data-*] attributes, never with modifier classes.
   ========================================================================== */

:root{
  --ballast:#0D1112;
  --ballast-lift:#131819;
  --ballast-deep:#0A0E0F;
  --ink:#DDE4E3;
  --ink-dim:#9AA6A4;
  --ink-faint:#6F7B7A;
  --rule:#232B2C;
  --rule-strong:#3A4445;
  --lamp:#C7783B;
  --lamp-line:rgba(199,120,59,0.42);
  --flag:#5E8C7F;
  --serif:Gelasio,Georgia,"Times New Roman",serif;
  --sans:Karla,"Helvetica Neue",Arial,sans-serif;
  --gauge-wide:76rem;
  --gauge-read:44rem;
}

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background-color:#0D1112;
  color:var(--ink);
  font-family:var(--sans);
  font-size:1rem;
  line-height:1.7;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4{
  font-family:var(--serif);
  font-weight:600;
  line-height:1.18;
  letter-spacing:-0.012em;
  margin:0;
  color:var(--ink);
}

p,ul,ol,dl,dd,figure{margin:0}
li{margin:0}
strong{font-weight:700;color:var(--ink)}
em{font-style:italic}

a{color:var(--lamp);text-decoration:none;border-bottom:1px solid var(--lamp-line)}
a:hover{border-bottom-color:var(--lamp)}
a:focus-visible,button:focus-visible{outline:2px solid var(--flag);outline-offset:3px}

table{border-collapse:collapse;border-spacing:0}

/* ---------------------------------------------------------------- shell -- */

.signal-skip{
  position:absolute;left:-9999px;top:0;z-index:40;
  background:var(--lamp);color:#0D1112;
  padding:0.6rem 1rem;font-weight:700;font-size:0.82rem;
  letter-spacing:0.08em;text-transform:uppercase;border-bottom:0;
}
.signal-skip:focus{left:0}

.platform{
  width:100%;
  max-width:var(--gauge-wide);
  margin:0 auto;
  padding-left:1.6rem;
  padding-right:1.6rem;
}

/* --------------------------------------------------------------- header -- */

.signal-box{
  position:sticky;top:0;z-index:30;
  background:var(--ballast-deep);
  border-bottom:1px solid var(--rule);
}
.signal-box-row{
  display:flex;align-items:center;justify-content:space-between;
  gap:1.5rem;
  min-height:4.2rem;
}
.signal-arm{
  display:inline-flex;align-items:center;gap:0.7rem;
  border-bottom:0;color:var(--ink);
}
.signal-arm:hover{border-bottom:0}
.signal-lamp{
  position:relative;display:inline-block;
  width:1.05rem;height:1.7rem;flex:none;
}
.signal-lamp::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:2px;
  background:var(--rule-strong);
}
.signal-lamp::after{
  content:"";position:absolute;left:0;top:0.25rem;
  width:1.05rem;height:0.3rem;background:var(--lamp);
}
.signal-name{
  font-family:var(--serif);font-size:1.22rem;font-weight:600;
  letter-spacing:-0.01em;color:var(--ink);
}
.signal-nav{display:block}
.signal-list{
  list-style:none;margin:0;padding:0;
  display:flex;align-items:center;gap:1.9rem;
}
.signal-link{
  color:var(--ink-dim);border-bottom:0;
  font-size:0.78rem;font-weight:600;
  letter-spacing:0.13em;text-transform:uppercase;
}
.signal-link:hover{color:var(--ink);border-bottom:0}
.signal-link[aria-current="page"]{color:var(--lamp)}
.signal-toggle{
  display:none;
  width:2.6rem;height:2.6rem;
  align-items:center;justify-content:center;
  flex-direction:column;gap:0.32rem;
  background:transparent;border:1px solid var(--rule-strong);
  padding:0;cursor:pointer;
}
.signal-bar{display:block;width:1.15rem;height:1px;background:var(--ink)}

/* ----------------------------------------------------------------- hero -- */

.headshunt{
  border-bottom:1px solid var(--rule);
  padding-top:5.5rem;padding-bottom:4.6rem;
}
.headcode{
  font-size:0.74rem;font-weight:700;letter-spacing:0.2em;
  text-transform:uppercase;color:var(--flag);
  margin-bottom:1.4rem;
}
.headshunt-title{
  font-size:clamp(2.4rem,6.2vw,4.15rem);
  line-height:1.06;
  max-width:20ch;
  margin-bottom:1.8rem;
}
.running-line{
  font-size:1.16rem;line-height:1.62;color:var(--ink-dim);
  max-width:60ch;
}
.headshunt-acts{display:flex;flex-wrap:wrap;gap:0.9rem;margin-top:2.4rem}

.shunt-act{
  display:inline-flex;align-items:center;
  padding:0.82rem 1.5rem;
  font-size:0.79rem;font-weight:700;letter-spacing:0.13em;
  text-transform:uppercase;border-bottom:0;
}
.shunt-act:hover{border-bottom:0}
.shunt-act[data-kind="solid"]{background:var(--lamp);color:#0D1112;border:1px solid var(--lamp)}
.shunt-act[data-kind="solid"]:hover{background:#D98B4C;border-color:#D98B4C}
.shunt-act[data-kind="ghost"]{background:transparent;color:var(--ink);border:1px solid var(--rule-strong)}
.shunt-act[data-kind="ghost"]:hover{border-color:var(--flag);color:var(--flag)}

/* -------------------------------------------------------------- sidings -- */

.siding{border-bottom:1px solid var(--rule);padding-top:4.2rem;padding-bottom:4.2rem}
.siding:last-of-type{border-bottom:0}

.siding-lead{max-width:62ch;margin-bottom:2.6rem}
.siding-title{font-size:clamp(1.65rem,3.3vw,2.3rem);margin-bottom:1rem}
.siding-no{
  color:var(--lamp);font-family:var(--sans);font-weight:700;
  font-size:0.72em;letter-spacing:0.04em;margin-right:0.85rem;
}
.siding-no::before{content:"\00A7"}
.siding-line{font-size:1.04rem;color:var(--ink-dim);max-width:62ch}

.siding-body{max-width:var(--gauge-read);font-size:1rem}
.siding-body>*+*{margin-top:1.15rem}
.siding-body h3{
  font-size:1.16rem;margin-top:2.5rem;color:var(--ink);
}
.siding-body h3:first-child{margin-top:0}
.siding-body p{color:var(--ink-dim)}
.siding-body ul,.siding-body ol{padding-left:1.35rem;color:var(--ink-dim)}
.siding-body li+li{margin-top:0.6rem}
.siding-body ul{list-style:square}
.siding-body ul li::marker{color:var(--lamp)}
.siding-body ol li::marker{color:var(--lamp);font-weight:700}

/* ---------------------------------------------------------- key / value -- */

.gauge{border-top:1px solid var(--rule)}
.sleeper{
  display:grid;grid-template-columns:14rem minmax(0,1fr);
  gap:1.2rem;
  padding:1.05rem 0;
  border-bottom:1px solid var(--rule);
}
.sleeper-key{
  font-size:0.73rem;font-weight:700;letter-spacing:0.15em;
  text-transform:uppercase;color:var(--ink-faint);
  padding-top:0.22rem;
}
.sleeper-value{color:var(--ink);font-size:0.98rem}

.gauge[data-lay="strip"]{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(12rem,1fr));
  border-top:0;border-left:1px solid var(--rule);
}
.gauge[data-lay="strip"] .sleeper{
  display:block;
  border-bottom:0;border-right:1px solid var(--rule);
  border-top:1px solid var(--rule);
  padding:1.4rem 1.5rem;
}
.gauge[data-lay="strip"] .sleeper-key{padding-top:0;margin-bottom:0.55rem}
.gauge[data-lay="strip"] .sleeper-value{
  font-family:var(--serif);font-size:1.3rem;line-height:1.25;color:var(--ink);
}

/* --------------------------------------------------------------- tables -- */

.timetable-scroll{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  border:1px solid var(--rule);
  max-width:100%;
}
.timetable{
  width:100%;
  min-width:40rem;
  font-size:0.9rem;
  text-align:left;
}
.timetable caption{
  text-align:left;
  padding:0.95rem 1.1rem;
  font-size:0.71rem;font-weight:700;letter-spacing:0.16em;
  text-transform:uppercase;color:var(--ink-faint);
  background:var(--ballast-deep);
  border-bottom:1px solid var(--rule);
}
.timetable th,.timetable td{
  padding:0.85rem 1.1rem;
  border-bottom:1px solid var(--rule);
  vertical-align:top;
}
.timetable thead th{
  font-size:0.71rem;font-weight:700;letter-spacing:0.13em;
  text-transform:uppercase;color:var(--flag);
  background:var(--ballast-lift);
  white-space:nowrap;
}
.timetable tbody th{font-weight:600;color:var(--ink)}
.timetable td{color:var(--ink-dim)}
.timetable td:first-child{color:var(--ink);font-weight:600}
.timetable tbody tr:last-child th,
.timetable tbody tr:last-child td{border-bottom:0}

/* ------------------------------------------------------------- callouts -- */

.junction{
  border-left:2px solid var(--lamp);
  background:var(--ballast-lift);
  padding:1.25rem 1.5rem;
}
.junction>*+*{margin-top:0.85rem}
.junction p{color:var(--ink);font-size:0.97rem}

.gradient-note{
  border:1px solid var(--rule-strong);
  border-left:2px solid var(--flag);
  padding:1.25rem 1.5rem;
}
.gradient-note>*+*{margin-top:0.85rem}
.gradient-note p{color:var(--ink-dim);font-size:0.95rem}
.gradient-note-label{
  display:block;
  font-size:0.7rem;font-weight:700;letter-spacing:0.18em;
  text-transform:uppercase;color:var(--flag);
  margin-bottom:0.7rem;
}

/* --------------------------------------------------- document furniture -- */

.working-timetable{
  display:grid;
  grid-template-columns:16rem minmax(0,1fr);
  gap:4rem;
  padding-top:3.4rem;
  padding-bottom:5rem;
  align-items:start;
}
.points{
  position:sticky;top:5.6rem;
  align-self:start;
  max-height:calc(100vh - 8rem);
  overflow-y:auto;
  border-top:1px solid var(--rule);
  padding-top:1.2rem;
}
.points-head{
  font-size:0.71rem;font-weight:700;letter-spacing:0.18em;
  text-transform:uppercase;color:var(--ink-faint);
  margin-bottom:1rem;
}
.points-list{
  list-style:decimal;
  margin:0;padding-left:1.5rem;
  font-size:0.86rem;
  color:var(--ink-faint);
}
.points-list li{margin-bottom:0.55rem}
.points-list li::marker{color:var(--ink-faint);font-size:0.78rem}
.points-link{
  color:var(--ink-dim);border-bottom:0;line-height:1.4;
  display:inline-block;
}
.points-link:hover{color:var(--lamp);border-bottom:0}

.block-section{min-width:0}

.waybill{border-bottom:1px solid var(--rule);padding-bottom:2.4rem;margin-bottom:1rem}
.waybill h1{font-size:clamp(2.1rem,4.6vw,3.1rem);margin-bottom:1.3rem}
.waybill .running-line{font-size:1.06rem}
.waybill-dates{
  display:flex;flex-wrap:wrap;gap:0.6rem 1.6rem;
  margin-top:1.7rem;
}
.waybill-dates span{
  font-size:0.71rem;font-weight:700;letter-spacing:0.14em;
  text-transform:uppercase;color:var(--ink-faint);
  border:1px solid var(--rule);padding:0.4rem 0.75rem;
}

.block-section .siding{padding-top:2.9rem;padding-bottom:2.9rem}
.block-section .siding:last-of-type{border-bottom:1px solid var(--rule)}
.siding-head{
  font-size:clamp(1.32rem,2.5vw,1.7rem);
  margin-bottom:1.5rem;
  display:flex;gap:0.2rem;align-items:baseline;
}
.block-section .siding-body{max-width:none}
.block-section .siding-body table{margin-top:0.4rem}

/* -------------------------------------------------------------- reveals -- */

[data-motion="on"] .approach{
  opacity:0;
  transform:translateY(12px);
  transition:opacity 0.55s ease,transform 0.55s ease;
}
[data-motion="on"] .approach[data-entered="yes"]{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){
  [data-motion="on"] .approach{opacity:1;transform:none;transition:none}
}

/* --------------------------------------------------------------- footer -- */

.yard{
  background:var(--ballast-deep);
  border-top:1px solid var(--rule);
  padding-top:3.6rem;padding-bottom:2.6rem;
}
.yard-grid{
  display:grid;
  grid-template-columns:minmax(0,1.6fr) minmax(0,1fr) minmax(0,1fr);
  gap:2.6rem;
  padding-bottom:2.6rem;
  border-bottom:1px solid var(--rule);
}
.yard-brand{min-width:0}
.yard-mark{display:inline-flex;align-items:center;gap:0.7rem;margin-bottom:1.1rem}
.yard-blurb{color:var(--ink-faint);font-size:0.92rem;max-width:36ch}
.yard-title{
  font-size:0.71rem;font-weight:700;letter-spacing:0.18em;
  text-transform:uppercase;color:var(--ink-faint);
  margin-bottom:1rem;
}
.yard-col ul{list-style:none;margin:0;padding:0}
.yard-col li{margin-bottom:0.6rem}
.yard-col a{color:var(--ink-dim);border-bottom:0;font-size:0.93rem}
.yard-col a:hover{color:var(--lamp);border-bottom:0}
.yard-legal{padding-top:2rem}
.yard-legal p{color:var(--ink-faint);font-size:0.84rem;margin-bottom:0.5rem}
.yard-legal a{color:var(--ink-dim)}

/* ---------------------------------------------------------- breakpoints -- */

@media (max-width: 64rem){
  .working-timetable{grid-template-columns:minmax(0,1fr);gap:2.4rem}
  .points{
    position:static;max-height:none;overflow:visible;
    border:1px solid var(--rule);padding:1.4rem 1.5rem;
  }
  .points-list{columns:2;column-gap:2rem}
}

@media (max-width: 52rem){
  .platform{padding-left:1.15rem;padding-right:1.15rem}
  [data-nav="ready"] .signal-nav{
    display:none;
    position:absolute;left:0;right:0;top:100%;
    background:var(--ballast-deep);
    border-bottom:1px solid var(--rule);
    padding:1rem 1.15rem 1.6rem;
  }
  [data-nav="ready"] .signal-nav[data-shown="yes"]{display:block}
  [data-nav="ready"] .signal-toggle{display:inline-flex}
  .signal-box-row{position:relative}
  .signal-list{flex-direction:column;align-items:flex-start;gap:1.05rem}
  .signal-link{font-size:0.85rem}
  .headshunt{padding-top:3.6rem;padding-bottom:3.2rem}
  .siding{padding-top:3rem;padding-bottom:3rem}
  .sleeper{grid-template-columns:minmax(0,1fr);gap:0.35rem}
  .sleeper-key{padding-top:0}
  .yard-grid{grid-template-columns:minmax(0,1fr);gap:2rem}
  .points-list{columns:1}
  .siding-head{display:block}
}

@media (max-width: 34rem){
  .headshunt-acts{flex-direction:column;align-items:stretch}
  .shunt-act{justify-content:center}
}