:root{
    --bg: #0c0b09;
    --bg-raised: #16140f;
    --card: #131210;
    --line: rgba(232,222,197,0.14);
    --line-strong: rgba(232,222,197,0.26);
    --cream: #ece4cf;
    --cream-dim: #8f8776;
    --gold: #c8a24b;
    --gold-soft: rgba(200,162,75,0.16);
    --now: #96a887;
}

*{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
    margin:0;
    background:
            radial-gradient(1100px 600px at 50% -10%, rgba(200,162,75,0.06), transparent 60%),
            var(--bg);
    color:var(--cream);
    font-family:'JetBrains Mono', monospace;
    -webkit-font-smoothing:antialiased;
    padding: 96px 20px 100px;
}

.wrap{ max-width:760px; margin:0 auto; }

.serif{ font-family:'Fraunces', serif; }

.eyebrow{
    font-size:11px;
    letter-spacing:0.28em;
    text-transform:uppercase;
    color:var(--gold);
    display:flex;
    align-items:center;
    gap:10px;
}
.eyebrow::before{
    content:"";
    width:22px; height:1px;
    background:var(--gold);
    display:inline-block;
}

/* ---------- SCROLL RAIL ---------- */

.scroll-rail{
    --progress: 0%;
    position:fixed;
    top:0; left:0; right:0;
    height:32px;
    background: var(--bg);
    border-bottom:1px solid var(--line-strong);
    z-index:1000;
    overflow:hidden;
}

.scroll-track{
    position:absolute;
    left:0; right:0;
    bottom:9px;
    height:2px;
    background:
            linear-gradient(90deg, var(--gold) 0 var(--progress), transparent 0 var(--progress))
}

.scroll-train{
    position:absolute;
    top:6px;
    left:0;
    width:190px;
    height:20px;
    background-color: var(--gold);
    -webkit-mask-image: url('train.png');
    mask-image: url('train.png');
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    filter: drop-shadow(0 0 5px rgba(200,162,75,0.35));
    will-change: transform;
}

/* ---------- BOARDING PASS CARD ---------- */

.pass{
    position:relative;
    background: linear-gradient(180deg, var(--bg-raised), var(--card) 40%);
    border:1px solid var(--line-strong);
    border-radius:14px;
    padding: 40px 40px 40px 40px;
    overflow:hidden;
}
.pass::before{
    content:"";
    position:absolute; inset:0;
    pointer-events:none;
    background-image:
            repeating-linear-gradient(115deg, rgba(232,222,197,0.025) 0px, rgba(232,222,197,0.025) 1px, transparent 1px, transparent 68px);
}

.pass-top{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:20px;
    flex-wrap:wrap;
}

.pass-name{
    font-family:'Fraunces', serif;
    font-optical-sizing:auto;
    font-weight:500;
    font-size:clamp(38px, 7vw, 58px);
    letter-spacing:0.01em;
    margin: 10px 0 4px;
    line-height:1.02;
}

.pass-role{
    color:var(--cream-dim);
    font-size:13px;
    letter-spacing:0.03em;
}

.ticket-id{
    text-align:right;
    font-size:11px;
    color:var(--cream-dim);
    letter-spacing:0.12em;
    line-height:1.9;
}
.ticket-id b{ color:var(--gold); font-weight:600; }

.route{
    margin-top:34px;
    display:grid;
    grid-template-columns: 1fr auto 1fr;
    align-items:center;
    gap:14px;
}
.route-point{ }
.route-point.dest{ text-align:right; }
.route-label{
    font-size:10px;
    letter-spacing:0.22em;
    color:var(--cream-dim);
    margin-bottom:6px;
}
.route-city{
    font-family:'Fraunces', serif;
    font-size:22px;
    font-weight:500;
}
.route-sub{
    font-size:11px;
    color:var(--cream-dim);
    margin-top:4px;
}

.fields{
    margin-top:34px;
    display:flex;
    border-top:1px dashed var(--line);
    padding-top:18px;
    gap:18px 14px;
}
.fields > div {
    flex: 1;
}
.field-label{
    font-size:9.5px;
    letter-spacing:0.16em;
    color:var(--cream-dim);
    margin-bottom:6px;
}
.field-value{
    font-size:12.5px;
    color:var(--cream);
    word-break:break-word;
}
.field-value a{ color:var(--cream); text-decoration:none; border-bottom:1px solid var(--line-strong); }
.field-value a:hover{ color:var(--gold); border-color:var(--gold); }

/* ---------- SECTION HEADINGS ---------- */

section{ margin-top:76px; }
.sec-head{ margin-bottom:36px; }
.sec-title{
    font-family:'Fraunces', serif;
    font-size:28px;
    font-weight:500;
    margin: 8px 0 0;
}

/* ---------- JOURNEY / ROUTE MAP ---------- */

.line{
    position:relative;
    padding-left:34px;
}
.line::before{
    content:"";
    position:absolute;
    left:6px; top:6px; bottom:6px;
    width:1px;
    background: linear-gradient(var(--line-strong), var(--line-strong));
}

.stop{
    position:relative;
    padding-bottom:44px;
}
.stop:last-child{ padding-bottom:0; }

.stop-dot{
    position:absolute;
    left:-34px; top:4px;
    width:13px; height:13px;
    border-radius:50%;
    background:var(--bg);
    border:2px solid var(--gold-soft);
}
.stop.now .stop-dot{
    border-color:var(--now);
    box-shadow:0 0 0 4px rgba(150,168,135,0.15);
}
.stop:not(.now) .stop-dot{ border-color: var(--gold); }

.stop-main{
    display:flex;
    gap:16px;
    align-items:flex-start;
}
.stop-content{
    flex:1 1 auto;
    min-width:0;
}

.stop-logo{
    position:relative;
    flex:0 0 auto;
    width:56px;
    height:56px;
    border-radius:8px;
    /*background:var(--bg-raised);*/
    overflow:hidden;
    display:flex;
    align-items:center;
    justify-content:center;
}
.stop-logo img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}
.stop-logo-fallback{
    display:none;
    font-size:9px;
    letter-spacing:0.14em;
    color:var(--cream-dim);
}
.stop-logo.img-missing .stop-logo-fallback{ display:block; }

.stop-head{
    display:flex;
    justify-content:space-between;
    align-items:baseline;
    gap:16px;
    flex-wrap:wrap;
}
.stop-station{
    font-family:'Fraunces', serif;
    font-size:22px;
    font-weight:500;
}
.stop-when{
    font-size:11px;
    color:var(--cream-dim);
    letter-spacing:0.06em;
    white-space:nowrap;
}
.stop-role{
    margin-top:6px;
    font-size:12.5px;
    color:var(--gold);
    letter-spacing:0.02em;
}
.stop-place{
    margin-top:3px;
    font-size:11px;
    color:var(--cream-dim);
}
.stop-tags{
    margin-top:12px;
    display:flex;
    flex-wrap:wrap;
    gap:8px;
}
.tag{
    font-size:10px;
    letter-spacing:0.04em;
    color:var(--cream-dim);
    border:1px solid var(--line);
    padding:4px 9px;
    border-radius:20px;
}
.now-badge{
    display:inline-block;
    margin-left:10px;
    font-size:9px;
    letter-spacing:0.16em;
    color:var(--now);
    border:1px solid rgba(150,168,135,0.4);
    padding:2px 7px;
    border-radius:20px;
    vertical-align:middle;
}

/* ---------- MANIFEST / SKILLS ---------- */

.manifest-doc, .telegram-doc{
    border:1px solid var(--line-strong);
    background: rgba(232,222,197,0.015);
}

.manifest-doc-top, .doc-bar{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
    padding:12px 18px;
    border-bottom:1px solid var(--line-strong);
}
.doc-code{
    border:1px solid var(--line-strong);
    padding:3px 9px;
    font-size:10.5px;
    letter-spacing:0.1em;
    color:var(--gold);
    flex:0 0 auto;
}
.doc-title{
    flex:1 1 auto;
    text-align:center;
    font-size:12.5px;
    letter-spacing:0.22em;
    font-weight:600;
    color:var(--cream);
}
.doc-page{
    flex:0 0 auto;
    font-size:10px;
    letter-spacing:0.1em;
    color:var(--cream-dim);
}

.manifest-info{
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    border-bottom:1px solid var(--line-strong);
}
.manifest-info div{
    padding:10px 18px;
    font-size:11px;
    letter-spacing:0.02em;
    border-bottom:1px solid var(--line);
}
.manifest-info div:nth-child(odd){ border-right:1px solid var(--line); }
.manifest-info div:nth-last-child(-n+2){ border-bottom:none; }
.manifest-info span{
    color:var(--cream-dim);
    letter-spacing:0.1em;
    font-size:9.5px;
    margin-right:7px;
}

.manifest-bar{
    text-align:center;
    font-size:10.5px;
    letter-spacing:0.24em;
    color:var(--gold);
    padding:9px;
    border-bottom:1px solid var(--line-strong);
    background: var(--gold-soft);
}

.mt-head{
    display:grid;
    grid-template-columns: 150px 1fr;
    border-bottom:1px solid var(--line-strong);
}
.mt-head div{
    padding:9px 18px;
    font-size:9.5px;
    letter-spacing:0.16em;
    color:var(--cream-dim);
}
.mt-head div:first-child{ border-right:1px solid var(--line-strong); }

.mt-row{
    display:grid;
    grid-template-columns: 150px 1fr;
}
.mt-row + .mt-row{ border-top:1px solid var(--line); }
.mt-cat{
    padding:13px 18px;
    border-right:1px solid var(--line-strong);
    font-size:10.5px;
    letter-spacing:0.1em;
    color:var(--gold);
}
.mt-val{
    padding:13px 18px;
    font-size:12.5px;
    color:var(--cream);
    line-height:1.8;
}

/* ---------- TELEGRAPH / CONTACT ---------- */

.telegram-body{
    padding:24px 28px 28px;
}

.telegram-field{
    margin-bottom:22px;
}
.telegram-field:last-of-type{ margin-bottom:0; }
.telegram-field label{
    display:block;
    font-size:9.5px;
    letter-spacing:0.18em;
    color:var(--cream-dim);
    margin-bottom:9px;
}
.telegram-field input,
.telegram-field textarea{
    width:100%;
    background:transparent;
    border:none;
    border-bottom:1px dashed var(--line-strong);
    color:var(--cream);
    font-family:'JetBrains Mono', monospace;
    font-size:13px;
    padding:6px 2px 10px;
    resize:vertical;
    outline:none;
    transition:border-color .15s ease;
}
.telegram-field textarea{ min-height:96px; line-height:1.7; }
.telegram-field input::placeholder,
.telegram-field textarea::placeholder{ color:rgba(143,135,118,0.6); }
.telegram-field input:focus,
.telegram-field textarea:focus{ border-bottom-color:var(--gold); }

.telegram-foot{
    margin-top:26px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:16px;
    flex-wrap:wrap;
}
.telegram-hint{
    font-size:10px;
    letter-spacing:0.08em;
    color:var(--cream-dim);
    max-width:280px;
    line-height:1.6;
}
.telegram-send{
    position:relative;
    flex:0 0 auto;
    background:transparent;
    border:1.5px solid var(--gold);
    color:var(--gold);
    font-family:'JetBrains Mono', monospace;
    font-size:11px;
    letter-spacing:0.18em;
    text-transform:uppercase;
    padding:12px 26px;
    border-radius:3px;
    cursor:pointer;
    transition: background .15s ease, color .15s ease;
}
.telegram-send:hover{ background:var(--gold); color:var(--bg); }
.telegram-send:focus-visible{ outline:1px solid var(--gold); outline-offset:3px; }

/* ---------- FOOTER TICKET STUB ---------- */

footer{
    margin-top:90px;
    border-top:1px dashed var(--line-strong);
    padding-top:30px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap:wrap;
    gap:16px;
}
.footer-links{
    display:flex;
    gap:22px;
    flex-wrap:wrap;
}
.footer-links a{
    color:var(--cream-dim);
    text-decoration:none;
    font-size:11px;
    letter-spacing:0.08em;
    border-bottom:1px solid transparent;
    transition:color .15s ease, border-color .15s ease;
}
.footer-links a:hover{ color:var(--gold); border-color:var(--gold); }
.footer-note{
    font-size:10px;
    color:var(--cream-dim);
    letter-spacing:0.1em;
}

a:focus-visible, .field-value a:focus-visible{
    outline:1px solid var(--gold);
    outline-offset:3px;
}

@media (max-width: 620px){
    body{ padding:70px 14px 80px; }
    .scroll-rail{ height:26px; }
    .scroll-track{ bottom:7px; }
    .scroll-train{ width:150px; height:16px; top:5px; }
    .pass{ padding:30px 22px 30px 22px; }
    .fields{ flex-wrap:wrap; }
    .fields > div{ flex:1 1 45%; }
    .route{ grid-template-columns:1fr auto 1fr; }
    .route-city{ font-size:17px; }
    .manifest-info{ grid-template-columns:1fr; }
    .manifest-info div:nth-child(odd){ border-right:none; }
    .manifest-info div:not(:last-child){ border-bottom:1px solid var(--line); }
    .doc-title{ font-size:11px; letter-spacing:0.14em; }
    .mt-head, .mt-row{ grid-template-columns:110px 1fr; }
    .telegram-body{ padding:20px 18px 22px; }
    .telegram-send{ width:100%; }
    .mt-head div, .mt-cat, .mt-val{ padding:10px 12px; }
    .stop-logo{ width:44px; height:44px; }
    .stop-main{ gap:12px; }
    .ticket-id{display:none}
}

@media (prefers-reduced-motion: reduce){
    html{ scroll-behavior:auto; }
}