@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:ital,wght@0,500;0,600;0,700;1,500;1,600&display=swap');
:root{--forest:#17365d;--forest-2:#244a73;--cream:#f5f6f8;--paper:#eceff3;--gold:#d99b00;--ink:#202124;--muted:#5f6368;--serif:'Playfair Display',Georgia,serif;--sans:'DM Sans',Arial,sans-serif;--mono:'DM Mono',monospace}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:88px}body{margin:0;background:var(--cream);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased}a{color:inherit}.skip-link{position:absolute;top:-60px;left:20px;z-index:40;padding:12px 16px;background:var(--cream);color:var(--forest)}.skip-link:focus{top:12px}.site-header{height:84px;padding:0 6.3%;display:flex;align-items:center;justify-content:space-between;background:var(--cream);position:relative;z-index:10;border-bottom:1px solid rgba(23,54,93,.16)}.brand{display:flex;gap:12px;align-items:center;text-decoration:none;color:var(--forest)}.brand img{width:45px;height:45px;object-fit:contain}.brand strong,.brand small{display:block}.brand strong{font:600 14px/1.2 var(--mono);letter-spacing:.08em;text-transform:uppercase}.brand small{font:500 12px/1.5 var(--mono);letter-spacing:.12em;text-transform:uppercase;opacity:.68}.site-nav{display:flex;align-items:center;gap:36px}.site-nav a{font-size:14px;font-weight:600;text-decoration:none}.site-nav a:not(.nav-visit){transition:color .2s}.site-nav a:not(.nav-visit):hover{color:#315b8a}.nav-visit{padding:13px 17px;background:var(--forest);color:var(--cream);transition:background .2s}.nav-visit:hover{background:#315b8a}.nav-visit span{padding-left:16px;color:var(--gold)}.menu-toggle{display:none}
.hero{display:flex;align-items:center;height:min(690px,calc(100vh - 84px));min-height:575px;position:relative;overflow:hidden;background:#17365d;color:var(--cream);isolation:isolate}.hero-image,.hero-grain{position:absolute;inset:0;z-index:-2}.hero-image{background-image:linear-gradient(90deg,rgba(23,54,93,.85) 0%,rgba(23,54,93,.68) 38%,rgba(23,54,93,.17) 76%),linear-gradient(0deg,rgba(23,54,93,.42),transparent 28%),url('newsite.dockyardrailway.co.uk/Dockyard Railway _ Railway at the Historic Dockyard Chatham_files/front.jpg');background-size:cover;background-position:center 47%;transform:scale(1.01)}.hero-grain{z-index:-1;opacity:.15;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.32'/%3E%3C/svg%3E")}.hero-content{position:relative;width:100%;max-width:1100px;margin-top:-8px;padding:0 24px 0 6.3%;animation:arrive .75s ease-out both}.eyebrow{display:flex;align-items:center;gap:11px;font:12px var(--mono);text-transform:uppercase;letter-spacing:.1em;color:var(--gold)}.hero .eyebrow-line{display:none}.eyebrow-line{width:26px;height:1px;background:var(--gold)}h1,h2,h3,p{margin-top:0}.hero h1{margin:26px 0 19px;font:500 clamp(54px,6.8vw,88px)/1.02 var(--serif);letter-spacing:-.055em}.hero h1 em,.intro h2 em,.collection h2 em,.history h2 em,.visit-banner h2 em{font-weight:500;color:var(--gold)}.hero-intro{max-width:405px;color:#e0ded4;font-size:16px;line-height:1.85}.hero-actions{display:flex;align-items:center;gap:27px;margin-top:29px}.button{display:inline-flex;align-items:center;gap:22px;padding:15px 18px;font-size:11px;font-weight:700;text-decoration:none;transition:transform .2s,background .2s}.button:hover{transform:translateY(-2px)}.button-cream{background:var(--cream);color:var(--forest)}.button-cream span{color:#315b8a;font-size:15px}.text-link{font-size:11px;font-weight:600;text-decoration:none;color:var(--cream)}.text-link span{color:var(--gold);padding-left:7px}.hero-caption{position:absolute;bottom:25px;left:6.3%;right:6.3%;display:flex;justify-content:space-between;padding-top:12px;border-top:1px solid rgba(241,238,229,.35);font:10px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:#d6d5cc}.hero-stamp{position:absolute;right:10%;bottom:86px;width:112px;height:112px;display:flex;flex-direction:column;align-items:center;justify-content:center;border:1px solid rgba(241,238,229,.65);border-radius:50%;transform:rotate(10deg);color:#eee8d7;text-align:center}.hero-stamp span{font:9px/1.5 var(--mono);letter-spacing:.07em;text-transform:uppercase}.hero-stamp b{font:600 22px/.95 var(--serif);letter-spacing:-.06em;color:var(--gold);padding:5px 0}
.section-wrap{max-width:1180px;margin:0 auto;padding-left:6%;padding-right:6%}.intro{padding-top:105px;padding-bottom:84px}.section-marker{display:flex;align-items:center;gap:12px;font:9px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:#687064}.section-marker>span:first-child{color:#315b8a}.marker-rule{width:35px;height:1px;background:#9eacc0}.intro-grid{display:grid;grid-template-columns:1.05fr .75fr;gap:9%;align-items:start;margin-top:34px}.intro h2,.history h2{font:500 clamp(41px,5vw,61px)/1.12 var(--serif);letter-spacing:-.04em;color:var(--forest);margin:0}.intro h2 em,.history h2 em{color:#315b8a}.intro-copy{padding-top:7px}.intro-copy p{font-size:15px;line-height:1.8;color:#5f6368}.intro-copy .lead{font:500 17px/1.65 var(--serif);color:var(--forest);max-width:380px}.underlined-link{display:inline-block;margin-top:14px;padding-bottom:6px;border-bottom:1px solid #315b8a;font-size:13px;font-weight:700;text-decoration:none;color:var(--forest)}.underlined-link span{margin-left:12px;color:#315b8a}.fact-strip{display:grid;grid-template-columns:repeat(3,1fr);margin-top:71px;border-top:1px solid #d4dbe4;border-bottom:1px solid #d4dbe4}.fact-strip>div{display:flex;align-items:center;gap:17px;padding:22px 20px 22px 0}.fact-strip>div+div{border-left:1px solid #d4dbe4;padding-left:25px}.fact-number{font:500 33px var(--serif);color:var(--forest)}.fact-unit{font:10px var(--mono);text-transform:uppercase;margin-left:4px}.fact-label{font:12px/1.6 var(--mono);color:#5f6368}
.collection{background:var(--forest);color:var(--cream);padding:88px 0 59px}.collection-inner{max-width:1180px}.section-marker-light{color:#bdc1b4}.collection-heading{display:flex;justify-content:space-between;align-items:end;margin:32px 0 39px}.collection h2,.visit-banner h2{font:500 clamp(46px,5.3vw,66px)/1.07 var(--serif);letter-spacing:-.045em;margin:18px 0 0}.collection-heading>p{max-width:300px;margin:0 0 5px;font-size:14px;line-height:1.8;color:#c3c7bb}.collection-grid{display:grid;grid-template-columns:1.13fr .87fr .87fr;gap:16px}.collection-card{display:flex;flex-direction:column;min-width:0;background:#244a73;text-decoration:none;color:var(--cream);transition:transform .25s,background .25s}.collection-card:hover{transform:translateY(-4px);background:#315b8a}.card-feature{grid-row:span 2}.card-image{height:160px;position:relative;background-size:cover;background-position:center;filter:saturate(.72)}.card-feature .card-image{height:265px}.image-index{position:absolute;right:11px;top:11px;padding:7px 9px;background:rgba(23,54,93,.88);font:8px var(--mono);letter-spacing:.1em;color:#e5decc}.image-aveling{background-image:linear-gradient(0deg,rgba(23,54,93,.15),transparent),url('newsite.dockyardrailway.co.uk/Aveling & Porter Tramway Locomotives _ Dockyard Railway_files/AP_2.jpg')}.image-handyside{background-image:linear-gradient(0deg,rgba(23,54,93,.15),transparent),url('newsite.dockyardrailway.co.uk/Handyside Trials _ Dockyard Railway_files/handyside-chatham.jpg')}.image-crane{background-image:linear-gradient(0deg,rgba(23,54,93,.15),transparent),url('newsite.dockyardrailway.co.uk/Steam Cranes _ Dockyard Railway_files/GC2528-1984.jpg')}.card-info{flex:1;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 17px 20px}.card-kicker{font:10px var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--gold)}.card-info h3{font:500 20px/1.25 var(--serif);margin:7px 0}.card-info p{font-size:13px;line-height:1.65;color:#d5dce5;margin:0}.card-feature .card-info h3{font-size:26px}.card-arrow{align-self:flex-end;width:28px;height:28px;border:1px solid rgba(241,238,229,.35);border-radius:50%;display:grid;place-items:center;color:var(--gold);font-size:13px;flex:none;transition:background .2s,color .2s}.collection-card:hover .card-arrow{background:var(--gold);color:var(--forest)}.card-register{background:#e4e9f0;color:var(--forest)}.card-register:hover{background:#f1f4f7}.card-register .card-info p{color:#5f6368}.card-register .card-arrow{border-color:#8da1bb}.register-art{height:160px;position:relative;overflow:hidden;background:linear-gradient(140deg,#cdc4af,#a4a28e)}.register-art span{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotate(-8deg);font:600 34px/.85 var(--serif);color:rgba(23,54,93,.7);text-align:center;letter-spacing:-.08em}.register-art i{position:absolute;width:160%;height:1px;left:-20%;top:52%;background:rgba(23,54,93,.35);transform:rotate(-8deg)}.collection-foot{display:flex;justify-content:space-between;align-items:center;margin-top:29px;padding-top:17px;border-top:1px solid rgba(241,238,229,.2);font:11px var(--mono);letter-spacing:.04em;color:#bac2b6}.collection-foot a{color:var(--cream);text-decoration:none}.collection-foot a span{margin-left:10px;color:var(--gold)}
.history{padding-top:93px;padding-bottom:92px}.history-grid{display:grid;grid-template-columns:1fr .74fr;gap:12%;margin-top:37px}.history-lead{max-width:270px;margin:20px 0 0;font:500 15px/1.7 var(--serif);color:#60685d}.history-body{padding-top:7px}.history-body p{font-size:15px;line-height:1.8;color:#60685d}.history-body .underlined-link{margin-top:6px}.timeline-heading{display:flex;justify-content:space-between;align-items:center;margin-top:58px;margin-bottom:5px;font:11px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:#5f6368}.timeline-hint{font-size:10px;letter-spacing:0;text-transform:none}.timeline-hint b{margin-left:7px;color:#315b8a;font-size:15px}.timeline-scroll{overflow-x:auto;overscroll-behavior-inline:contain;scrollbar-color:#315b8a #dce2e9;scrollbar-width:thin;padding:20px 0 18px;outline-offset:3px}.timeline-scroll:focus-visible{outline:3px solid #315b8a}.timeline{position:relative;display:grid;grid-auto-columns:180px;grid-auto-flow:column;width:max-content;min-width:100%;margin:0;padding-top:0}.timeline-track{position:absolute;top:29px;left:0;right:0;height:13px;background:repeating-linear-gradient(90deg,transparent 0 11px,#9eacc0 11px 15px,transparent 15px 31px);border-top:2px solid #315b8a;border-bottom:2px solid #315b8a;box-shadow:0 1px 0 rgba(23,54,93,.1)}.timeline-event{display:flex;flex-direction:column;align-items:center;text-align:center;min-height:105px}.timeline-year{font:500 14px var(--mono);color:var(--forest);white-space:nowrap}.timeline-signal{position:relative;display:block;width:18px;height:25px;margin-top:8px;z-index:1;flex:none;border-left:2px solid #17365d}.timeline-signal:before{content:"";position:absolute;left:1px;top:1px;width:13px;height:10px;background:#315b8a;clip-path:polygon(0 0,100% 0,72% 50%,100% 100%,0 100%);border-radius:1px}.timeline-signal:after{content:"";position:absolute;left:-4px;bottom:0;width:7px;height:3px;background:#17365d;border-radius:50%}.timeline-note{font:11px/1.6 var(--mono);color:#5f6368;margin:13px 8px 0}
.visit-banner{min-height:420px;position:relative;overflow:hidden;background:var(--forest-2);color:var(--cream);display:grid;grid-template-columns:1fr 1fr}.visit-text{padding:68px 7vw 65px max(8vw,calc((100vw - 1050px)/2));align-self:center;z-index:1}.visit-banner h2{margin:17px 0 15px;font-size:54px}.visit-banner .visit-text>p:not(.eyebrow){max-width:360px;font-size:14px;line-height:1.8;color:#c5c8bd}.visit-banner .button{margin-top:13px}.visit-image{min-height:420px;background-image:linear-gradient(90deg,var(--forest-2),rgba(36,74,115,.13) 30%),url('newsite.dockyardrailway.co.uk/Handyside Trials _ Dockyard Railway_files/handyside.jpg');background-size:cover;background-position:center}.visit-vertical{position:absolute;right:19px;bottom:20px;writing-mode:vertical-rl;font:10px var(--mono);letter-spacing:.12em;color:rgba(241,238,229,.7)}
.site-footer{background:#142b49;color:#e5e4d9;padding:34px 6.3% 17px}.footer-top{display:flex;align-items:center;gap:45px;padding-bottom:25px}.brand-footer{color:var(--cream)}.brand-footer img{width:38px;height:38px;filter:grayscale(1) brightness(0) invert(.88)}.footer-top>p{margin:0;font:italic 13px/1.6 var(--serif);color:#c5d0df}.footer-up{margin-left:auto;font:11px var(--mono);text-decoration:none;color:#d3d2c6}.footer-up span{padding-left:11px;color:var(--gold)}.footer-bottom{display:flex;justify-content:space-between;gap:20px;padding-top:14px;border-top:1px solid rgba(241,238,229,.2);font:10px var(--mono);letter-spacing:.03em;color:#a9afa5}.footer-bottom b{color:var(--gold)}
@keyframes arrive{from{opacity:0;transform:translateY(13px)}to{opacity:1;transform:translateY(0)}}
@media(min-width:1450px){.hero{height:700px}}
@media(max-width:900px){.site-header{padding:0 5%;height:76px}.site-nav{gap:20px}.hero{min-height:550px;height:calc(87vh - 76px)}.hero-content{padding:0 24px 0 7%}.hero-image{background-position:57% center}.hero-stamp{right:6%;width:92px;height:92px}.section-wrap{padding-left:7%;padding-right:7%}.collection-grid{grid-template-columns:1fr 1fr}.card-feature{grid-row:span 1}.card-feature .card-image{height:210px}.card-image{height:170px}.visit-text{padding-left:7vw}.visit-image{background-position:57% center}}
@media(max-width:620px){html{scroll-padding-top:70px}.site-header{height:70px;padding:0 20px}.brand img{width:39px;height:39px}.brand strong{font-size:12px}.brand small{font-size:10px}.menu-toggle{border:0;background:none;padding:8px 0 8px 8px;display:flex;align-items:center;flex-direction:column;gap:4px;color:var(--forest)}.menu-toggle span{height:1px;width:20px;background:var(--forest)}.menu-toggle b{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}.site-nav{display:none;position:absolute;top:69px;left:0;right:0;padding:18px 22px 22px;background:var(--cream);border-bottom:1px solid #d4dbe4;flex-direction:column;align-items:stretch;gap:0}.site-nav.is-open{display:flex}.site-nav a{padding:14px 4px;border-bottom:1px solid #d8d2c5}.site-nav .nav-visit{margin-top:12px;padding:14px}.hero{display:block;height:690px;min-height:0;max-height:calc(100svh - 70px)}.hero-image{background-image:linear-gradient(90deg,rgba(23,54,93,.67),rgba(23,54,93,.19)),linear-gradient(0deg,rgba(23,54,93,.62),transparent 45%),url('newsite.dockyardrailway.co.uk/Dockyard Railway _ Railway at the Historic Dockyard Chatham_files/front.jpg');background-position:58% center}.hero-content{padding:110px 25px 80px;margin:0}.hero h1{font-size:clamp(58px,16vw,82px)}.hero-intro{max-width:330px;font-size:16px}.hero-actions{gap:20px;flex-wrap:wrap}.button{padding:15px;font-size:13px}.text-link{font-size:13px}.hero-caption{left:22px;right:22px;bottom:18px;font-size:9px}.hero-stamp{right:23px;bottom:76px;width:77px;height:77px}.hero-stamp b{font-size:18px}.hero-stamp span{font-size:8px}.section-wrap{padding-left:24px;padding-right:24px}.intro{padding-top:70px;padding-bottom:65px}.intro-grid{grid-template-columns:1fr;gap:20px;margin-top:24px}.intro h2,.history h2{font-size:48px}.intro-copy .lead{font-size:16px}.fact-strip{margin-top:42px;grid-template-columns:1fr}.fact-strip>div{padding:13px 0;gap:20px}.fact-strip>div+div{border-left:0;border-top:1px solid #d4dbe4;padding-left:0}.fact-number{width:90px;font-size:30px}.collection{padding:66px 0 40px}.collection-heading{display:block;margin:25px 0 28px}.collection h2{font-size:53px}.collection-heading>p{margin-top:19px;max-width:345px}.collection-grid{grid-template-columns:1fr;gap:12px}.card-feature .card-image,.card-image,.register-art{height:205px}.card-info{min-height:104px;padding:15px}.card-feature .card-info h3{font-size:23px}.card-info h3{font-size:19px}.collection-foot{align-items:flex-start;gap:15px;font-size:10px;line-height:1.6}.collection-foot a{text-align:right}.history{padding-top:69px;padding-bottom:66px}.history-grid{grid-template-columns:1fr;gap:20px;margin-top:25px}.history-lead{margin-top:14px}.history-body{padding-top:0}.timeline{grid-auto-columns:155px}.timeline-heading{margin-top:42px;font-size:10px}.timeline-hint{font-size:9px}.timeline-scroll{padding-top:18px}.timeline-track{top:25px;height:12px;background:repeating-linear-gradient(90deg,transparent 0 9px,#9eacc0 9px 13px,transparent 13px 27px)}.timeline-year{font-size:12px}.timeline-signal{margin-top:5px;transform:scale(.9);transform-origin:top center}.timeline-note{font-size:10px;line-height:1.55}.visit-banner{display:block}.visit-text{padding:58px 25px 45px}.visit-banner h2{font-size:49px}.visit-image{min-height:260px;background-image:linear-gradient(0deg,rgba(36,74,115,.03),var(--forest-2)),url('newsite.dockyardrailway.co.uk/Handyside Trials _ Dockyard Railway_files/handyside.jpg');background-position:center 45%}.visit-vertical{right:10px;bottom:13px;font-size:9px}.site-footer{padding:28px 22px 15px}.footer-top{gap:18px;align-items:flex-start;flex-wrap:wrap}.brand-footer img{width:34px;height:34px}.footer-top>p{font-size:11px}.footer-up{width:100%;margin:8px 0 0}.footer-bottom{flex-direction:column;gap:7px;font-size:9px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;transition-duration:.01ms!important}}