/* Ash to Armor — split-screen poster + timetable-driven utility site.
   Vertical rail navigation, schedule board, numbered programme spreads.
   Near-black + concrete grey + ember. Square corners, thick rules. */

:root{
--ink:#0b0b0d; --ink2:#0f0f12; --slab:#15151a; --steel:#23232a; --steel2:#33333c;
--conc:#9a9aa4; --conc2:#c2c2cb; --txt:#dedee4; --white:#fff;
--ember:#ff5b1a; --ember-d:#e04708;
--rail:136px;
--fb:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
--fd:"Arial Narrow","Helvetica Neue Condensed","Haettenschweiler",Impact,"Arial",sans-serif;
--fm:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ink);color:var(--txt);font-family:var(--fb);
font-size:17px;line-height:1.68;-webkit-font-smoothing:antialiased;overflow-x:clip}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
p{margin:0 0 1.05em}
strong{color:#fff}
h1,h2,h3,h4{margin:0 0 .5em;color:#fff;font-family:var(--fd);font-weight:700;
text-transform:uppercase;line-height:.92;letter-spacing:.005em}
h1{font-size:clamp(2.6rem,6vw,4.6rem)}
h2{font-size:clamp(1.9rem,3.6vw,3rem)}
h3{font-size:1.3rem;line-height:1.05}
h4{font-size:.95rem;letter-spacing:.09em}
ul,ol{margin:0 0 1.05em;padding-left:1.15em}
li{margin:0 0 .45em}
table{border-collapse:collapse}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;z-index:99;background:var(--ember);color:#120a05;
padding:10px 16px;font-weight:800}
:focus-visible{outline:3px solid var(--ember);outline-offset:2px}
.note{color:var(--conc);font-size:.9rem}
.tag,.eyebrow,.kick{font-family:var(--fd);text-transform:uppercase;letter-spacing:.2em;
font-size:.78rem;font-weight:700;color:var(--ember)}

/* ------------------------------------------------ vertical rail nav */
.rail{background:#08080a;border-bottom:2px solid var(--steel);position:sticky;top:0;z-index:50}
.rail-top{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 18px}
.wordmark{display:flex;align-items:center;gap:10px;text-decoration:none;color:#fff;
font-family:var(--fd);font-weight:700;text-transform:uppercase;letter-spacing:.06em;
font-size:1.3rem;line-height:.9}
.wordmark span{display:block}
.wordmark em{font-style:normal;color:var(--ember)}
.navt{position:absolute;opacity:0;width:1px;height:1px}
.burger{display:inline-flex;align-items:center;gap:9px;cursor:pointer;color:#fff;
font-family:var(--fd);text-transform:uppercase;letter-spacing:.16em;font-size:.82rem;
font-weight:700;border:2px solid var(--steel2);padding:8px 12px}
.burger i{display:block;width:18px;height:2px;background:var(--ember);
box-shadow:0 5px 0 var(--ember),0 -5px 0 var(--ember)}
.navt:focus-visible + .rail-top .burger{outline:3px solid var(--ember);outline-offset:2px}
.rail-nav{display:none;border-top:2px solid var(--steel)}
.navt:checked ~ .rail-nav{display:block}
.rail-nav ul{list-style:none;margin:0;padding:0}
.rail-nav a{display:block;text-decoration:none;padding:13px 18px;color:var(--conc2);
border-bottom:1px solid var(--steel);font-family:var(--fd);text-transform:uppercase;
letter-spacing:.14em;font-weight:700;font-size:.95rem}
.rail-nav a .n{color:var(--conc);margin-right:12px;font-family:var(--fm);font-size:.72rem;
letter-spacing:0}
.rail-nav a:hover,.rail-nav a.cur{color:#fff;background:var(--slab)}
.rail-nav a.cur .n{color:var(--ember)}
.rail-cta{display:block;text-align:center;background:var(--ember);color:#140a04;
text-decoration:none;font-family:var(--fd);font-weight:700;text-transform:uppercase;
letter-spacing:.14em;padding:14px;font-size:.95rem}
.rail-cta:hover{background:#fff}
.doc{min-height:60vh}

@media (min-width:1000px){
  .rail{position:fixed;inset:0 auto 0 0;width:var(--rail);border-bottom:0;
  border-right:2px solid var(--steel);display:flex;flex-direction:column;overflow-y:auto}
  .rail-top{display:block;padding:22px 14px 16px;border-bottom:2px solid var(--steel)}
  .wordmark{display:block;font-size:1.42rem;letter-spacing:.02em}
  .wordmark svg{margin:0 0 10px}
  .burger{display:none}
  .rail-nav{display:block;border-top:0;flex:1 1 auto}
  .rail-nav a{padding:14px;font-size:.86rem;letter-spacing:.13em;line-height:1.15}
  .rail-nav a .n{display:block;margin:0 0 5px}
  .rail-cta{writing-mode:vertical-rl;transform:rotate(180deg);margin:0;padding:22px 14px;
  align-self:stretch;letter-spacing:.22em}
  .doc{margin-left:var(--rail)}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important}
  .rail-cta{transform:none;writing-mode:horizontal-tb}
}

/* ------------------------------------------------ split poster */
.poster{display:grid;grid-template-columns:1fr;border-bottom:3px solid var(--ember)}
.poster-l{background:#08080a;padding:44px 26px 40px;display:flex;flex-direction:column;
justify-content:space-between;gap:26px}
.poster-say{font-family:var(--fd);font-weight:700;text-transform:uppercase;color:#fff;
line-height:.82;letter-spacing:-.01em;font-size:clamp(3.1rem,12.5vw,5.2rem);margin:22px 0 0}
.poster-say span{display:block}
.poster-say .em{color:var(--ember)}
.poster-lede{max-width:31rem;margin-top:22px;color:var(--conc2);font-size:1.02rem}
.poster-link{display:inline-block;color:#fff;font-family:var(--fd);text-transform:uppercase;
letter-spacing:.14em;font-weight:700;font-size:1.05rem;text-decoration:underline;
text-decoration-color:var(--ember);text-underline-offset:7px;text-decoration-thickness:3px}
.poster-link:hover{color:var(--ember)}
.poster-r{position:relative;background:#08080a;height:58vh;min-height:320px;overflow:hidden}
.poster-r img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.18) brightness(.86)}
.poster-r::after{content:"";position:absolute;inset:0;pointer-events:none;
background:linear-gradient(200deg,rgba(255,91,26,.55),rgba(11,11,13,.9));mix-blend-mode:overlay}
@media (min-width:860px){
  .poster{grid-template-columns:minmax(0,1fr) minmax(0,1fr);min-height:100vh}
  .poster-l{padding:58px 48px 48px}
  .poster-say{font-size:clamp(3.4rem,6.6vw,6.4rem)}
  .poster-r{height:auto;min-height:100%}
}

/* ------------------------------------------------ generic structure */
.field{max-width:1220px;margin:0 auto;padding:0 26px}
.measure{max-width:760px;margin:0 auto;padding:0 26px}
.strand{padding:62px 0;border-top:2px solid var(--steel)}
.strand:first-child{border-top:0}
.strand--slab{background:var(--slab)}
.strand--tight{padding-top:0;border-top:0}
.prose h2{margin-top:1.5em}
.prose h2:first-child{margin-top:0}
.head-rule{display:flex;align-items:baseline;gap:18px;border-bottom:3px solid var(--ember);
padding-bottom:12px;margin:0 0 30px}
.head-rule h2{margin:0;flex:1 1 auto}
.head-rule .c{font-family:var(--fm);font-size:.78rem;color:var(--conc);letter-spacing:.1em}

/* masthead for interior pages */
.masthead{border-bottom:3px solid var(--ember);padding:44px 0 34px;background:#08080a}
.masthead .field{display:grid;gap:14px}
.mh-label{font-family:var(--fd);text-transform:uppercase;letter-spacing:.24em;
font-size:.8rem;font-weight:700;color:var(--ember);margin:0}
.masthead h1{margin:0;font-size:clamp(2.4rem,6.4vw,5rem);line-height:.86}
.mh-lede{max-width:44rem;margin:8px 0 0;color:var(--conc2)}
@media (min-width:900px){
  .masthead{padding:64px 0 44px}
  .masthead .field{grid-template-columns:150px minmax(0,1fr);align-items:start;gap:0 34px}
  .mh-label{grid-column:1;padding-top:.6rem}
  .masthead h1{grid-column:2}
  .mh-lede{grid-column:2}
}

/* breadcrumb path */
.path{font-family:var(--fm);font-size:.76rem;color:var(--conc);letter-spacing:.06em;
padding:14px 26px;margin:0;max-width:1220px}
.path a{color:var(--conc)}
.path span{color:var(--steel2);padding:0 8px}

/* ------------------------------------------------ schedule board */
.scrollbox{overflow-x:auto;border:2px solid var(--steel);background:#08080a}
table.board{width:100%;min-width:920px;font-variant-numeric:tabular-nums}
table.board th,table.board td{border-right:1px solid var(--steel);border-bottom:1px solid var(--steel);
padding:10px 12px;text-align:left;vertical-align:top}
table.board thead th{background:var(--slab);color:#fff;font-family:var(--fd);text-transform:uppercase;
letter-spacing:.16em;font-size:.8rem;position:sticky;top:0;border-bottom:2px solid var(--ember)}
table.board tbody th{font-family:var(--fm);font-size:.9rem;color:var(--ember);white-space:nowrap;
background:#08080a;font-weight:700}
table.board td{font-size:.82rem;color:var(--conc);width:12.5%}
table.board .cls{display:block;color:#fff;font-family:var(--fd);text-transform:uppercase;
letter-spacing:.06em;font-size:.95rem;font-weight:700;line-height:1.05}
table.board .who{display:block;margin-top:3px}
.board-note{margin:12px 0 0;font-family:var(--fm);font-size:.76rem;color:var(--conc)}
.scroll-note{margin:12px 0 0;font-family:var(--fm);font-size:.76rem;color:var(--conc)}

/* ------------------------------------------------ tables (weekly / pricing) */
table.wk{width:100%;min-width:620px;font-size:.95rem}
table.wk th,table.wk td{border-bottom:1px solid var(--steel);padding:13px 14px;
text-align:left;vertical-align:top}
table.wk thead th{background:var(--slab);color:#fff;font-family:var(--fd);text-transform:uppercase;
letter-spacing:.14em;font-size:.78rem;border-bottom:2px solid var(--ember)}
table.wk tbody th{color:#fff;font-family:var(--fd);text-transform:uppercase;letter-spacing:.06em;
font-size:1rem;white-space:nowrap;width:1%}
table.wk td{color:var(--conc2)}
table.compare{width:100%;min-width:820px;font-size:.95rem}
table.compare th,table.compare td{border:1px solid var(--steel);padding:16px 16px;
text-align:left;vertical-align:top;color:var(--conc2)}
table.compare thead th{background:var(--slab);color:#fff;border-bottom:2px solid var(--ember);
font-family:var(--fd);text-transform:uppercase;letter-spacing:.1em;font-size:1.15rem}
table.compare thead th .who{display:block;font-family:var(--fb);text-transform:none;
letter-spacing:0;font-size:.82rem;font-weight:400;color:var(--conc);margin-top:6px;line-height:1.4}
table.compare tbody th{color:#fff;font-family:var(--fd);text-transform:uppercase;
letter-spacing:.12em;font-size:.85rem;width:150px;background:#08080a}
table.compare .amt{font-family:var(--fd);font-size:2.2rem;color:var(--ember);
line-height:1;display:block;font-variant-numeric:tabular-nums}
table.compare .per{display:block;font-size:.78rem;color:var(--conc);margin-top:6px}
table.compare ul{margin:0;padding-left:1.05em}
table.compare li{font-size:.88rem;margin-bottom:.5em}

/* ------------------------------------------------ ledger / stats */
.ledger{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:2px solid var(--steel);
border-left:2px solid var(--steel)}
.ledger div{border-right:2px solid var(--steel);border-bottom:2px solid var(--steel);padding:22px 20px}
.ledger .n{display:block;font-family:var(--fd);font-weight:700;color:var(--ember);
font-size:clamp(2.2rem,5vw,3.4rem);line-height:.9;margin:0;font-variant-numeric:tabular-nums}
.ledger .l{display:block;margin:9px 0 0;font-size:.86rem;color:var(--conc);line-height:1.4}
@media (min-width:800px){.ledger{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* ------------------------------------------------ programme index (rows, not cards) */
.rows{border-top:2px solid var(--steel)}
.rows a{display:grid;grid-template-columns:64px minmax(0,1fr);gap:0 18px;align-items:start;
text-decoration:none;padding:24px 0;border-bottom:2px solid var(--steel)}
.rows a:hover{background:var(--slab)}
.rows .n{font-family:var(--fd);font-weight:700;font-size:2rem;color:var(--conc);line-height:.9;
font-variant-numeric:tabular-nums}
.rows a:hover .n{color:var(--ember)}
.rows h3{margin:0 0 6px;color:#fff;font-size:1.6rem}
.rows p{margin:0 0 6px;color:var(--conc2);font-size:.98rem;max-width:56rem}
.rows .for{color:var(--ember);font-family:var(--fd);text-transform:uppercase;
letter-spacing:.12em;font-size:.78rem;margin:0}
@media (min-width:800px){.rows a{grid-template-columns:96px minmax(0,1fr)}
  .rows .n{font-size:3rem}}

/* ------------------------------------------------ numbered spread */
.spread{border-bottom:3px solid var(--ember);background:#08080a;padding:34px 0 30px}
.spread-in{display:grid;gap:0 30px;align-items:end}
.spread-no{font-family:var(--fd);font-weight:700;line-height:.72;margin:0;
font-size:clamp(6rem,22vw,13rem);color:var(--steel2);font-variant-numeric:tabular-nums}
@supports(-webkit-text-stroke:2px #fff){
  .spread-no{color:transparent;-webkit-text-stroke:2px var(--steel2)}
}
.spread h1{margin:6px 0 0;font-size:clamp(2.6rem,7vw,5.4rem);line-height:.86}
.spread .who{margin:14px 0 0;color:var(--ember);font-family:var(--fd);text-transform:uppercase;
letter-spacing:.16em;font-size:.82rem}
.spread .lede{margin:14px 0 0;color:var(--conc2);max-width:44rem}
@media (min-width:900px){
  .spread-in{grid-template-columns:minmax(0,270px) minmax(0,1fr)}
}
.pair{display:grid;gap:34px}
.pair .notes{border-top:2px solid var(--ember);padding-top:16px}
.pair .notes h3{font-size:1.1rem;letter-spacing:.1em;margin-bottom:.8em}
.pair .notes p,.pair .notes li{font-size:.94rem;color:var(--conc2)}
@media (min-width:960px){
  .pair{grid-template-columns:minmax(0,1.75fr) minmax(0,1fr);gap:44px}
}

/* ------------------------------------------------ checklist */
ol.checks{list-style:none;margin:0;padding:0;border-top:1px solid var(--steel)}
ol.checks li{display:grid;grid-template-columns:52px minmax(0,1fr);gap:0 12px;margin:0;
padding:14px 0;border-bottom:1px solid var(--steel);color:var(--conc2);font-size:.97rem}
ol.checks li::before{content:counter(ck,decimal-leading-zero);counter-increment:ck;
font-family:var(--fm);font-size:.78rem;color:var(--ember);padding-top:.25em}
ol.checks{counter-reset:ck}

/* ------------------------------------------------ plates & roster */
.plate{margin:0;position:relative;overflow:hidden;border:2px solid var(--steel)}
.plate img{width:100%;filter:grayscale(1) contrast(1.15) brightness(.88)}
.plate::after{content:"";position:absolute;inset:0;pointer-events:none;
background:linear-gradient(200deg,rgba(255,91,26,.4),rgba(11,11,13,.85));mix-blend-mode:overlay}
.plate figcaption{position:relative;z-index:2;background:#08080a;padding:12px 14px;
font-family:var(--fm);font-size:.76rem;color:var(--conc);letter-spacing:.05em}
.duet{display:grid;gap:26px;align-items:start}
.duet .txt p{color:var(--conc2)}
@media (min-width:900px){
  .duet{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:44px}
  .duet.flip .txt{order:2}
}
.roster{border-top:2px solid var(--steel)}
.roster > div{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;padding:26px 0;
border-bottom:2px solid var(--steel)}
.roster figure{margin:0;max-width:260px}
.roster figure img{filter:grayscale(1) contrast(1.12) brightness(.9)}
.roster h3{margin:0 0 4px}
.roster .role{color:var(--ember);font-family:var(--fd);text-transform:uppercase;
letter-spacing:.14em;font-size:.78rem;margin:0 0 12px}
.roster p{color:var(--conc2);font-size:.96rem}
@media (min-width:820px){
  .roster > div{grid-template-columns:260px minmax(0,1fr);gap:0 34px}
}

/* ------------------------------------------------ story list */
.storylist{border-top:2px solid var(--steel)}
.storylist a{display:grid;gap:16px;text-decoration:none;padding:26px 0;
border-bottom:2px solid var(--steel)}
.storylist a:hover{background:var(--slab)}
.storylist figure{margin:0}
.storylist figure img{filter:grayscale(1) contrast(1.15) brightness(.86)}
.storylist h3{margin:0 0 8px;font-size:1.7rem}
.storylist p{margin:0 0 8px;color:var(--conc2)}
.storylist .meta{font-family:var(--fm);font-size:.76rem;color:var(--ember);letter-spacing:.06em}
@media (min-width:820px){
  .storylist a{grid-template-columns:300px minmax(0,1fr);gap:0 30px;align-items:start}
}

/* ------------------------------------------------ notices, forms */
.notice{border:2px solid var(--steel2);border-left:5px solid var(--ember);padding:18px 20px;
margin:26px 0;background:#08080a;font-size:.95rem;color:var(--conc2)}
.notice strong{display:block;font-family:var(--fd);text-transform:uppercase;letter-spacing:.14em;
color:#fff;font-size:.85rem;margin-bottom:8px}
.demo-flag{border:2px dashed var(--steel2);padding:16px 18px;margin:0 0 26px;
font-size:.92rem;color:var(--conc2);background:#08080a}
.demo-flag strong{color:var(--ember)}
form label{display:block;margin:0 0 18px;font-family:var(--fd);text-transform:uppercase;
letter-spacing:.12em;font-size:.82rem;color:#fff;font-weight:700}
form input,form select,form textarea{display:block;width:100%;margin-top:8px;background:var(--ink2);
color:#fff;border:2px solid var(--steel2);padding:12px 13px;font-family:var(--fb);font-size:1rem;
letter-spacing:0;text-transform:none;font-weight:400;border-radius:0}
form textarea{resize:vertical}
form button{background:var(--ember);color:#140a04;border:2px solid var(--ember);
font-family:var(--fd);text-transform:uppercase;letter-spacing:.14em;font-weight:700;
padding:15px 28px;font-size:1rem;cursor:pointer}
form button:hover{background:#fff;border-color:#fff}
.fgrid{display:grid;gap:38px}
@media (min-width:900px){.fgrid{grid-template-columns:minmax(0,1.35fr) minmax(0,.85fr);gap:54px}}
.aside{border-top:2px solid var(--ember);padding-top:20px}
.aside h3{font-size:1.15rem;letter-spacing:.12em}
.aside h4{margin:22px 0 6px;color:var(--ember);letter-spacing:.14em;font-size:.82rem}
.aside p{font-size:.94rem;color:var(--conc2)}

/* ------------------------------------------------ endnote (replaces CTA band) */
.endnote{border-top:3px solid var(--ember);background:#08080a;padding:52px 0}
.endnote h2{font-size:clamp(1.9rem,4.6vw,3.4rem);max-width:22ch}
.endnote p{max-width:46rem;color:var(--conc2)}
.endnote .links{display:flex;flex-wrap:wrap;gap:14px 30px;margin:22px 0 0;padding:0;list-style:none}
.endnote .links li{margin:0}
.endnote .links a{font-family:var(--fd);text-transform:uppercase;letter-spacing:.14em;
font-weight:700;font-size:1rem;color:#fff;text-decoration:underline;
text-decoration-color:var(--ember);text-underline-offset:6px;text-decoration-thickness:3px}
.endnote .links a:hover{color:var(--ember)}

/* ------------------------------------------------ footer block */
.sitefoot{background:#08080a;border-top:2px solid var(--steel);padding:46px 0 34px}
.foot-grid{display:grid;gap:32px}
@media (min-width:900px){.foot-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:54px}}
.foot-grid h2{font-size:1.4rem;letter-spacing:.12em;border-bottom:2px solid var(--ember);
padding-bottom:10px;margin-bottom:18px}
table.hours{width:100%;font-variant-numeric:tabular-nums;font-size:.95rem}
table.hours th,table.hours td{border-bottom:1px solid var(--steel);padding:10px 0;text-align:left}
table.hours th{color:#fff;font-family:var(--fd);text-transform:uppercase;letter-spacing:.12em;
font-size:.85rem;font-weight:700}
table.hours td{color:var(--conc2);text-align:right;font-family:var(--fm);font-size:.86rem}
.foot-addr{color:var(--conc2);font-size:.96rem}
.foot-addr a{color:#fff}
.foot-legal{margin-top:34px;border-top:2px solid var(--steel);padding-top:18px;
display:flex;flex-wrap:wrap;gap:8px 24px;font-family:var(--fm);font-size:.75rem;color:var(--conc)}
.foot-legal a{color:var(--conc)}
.foot-legal p{margin:0}
