:root{
  --paper:#EFE6D3; --ink:#1B1A17;
  --green:#2E4A3A; --orange:#E8512E; --blue:#1F3A4D; --ochre:#C99A3B;
  --display:'Barlow Condensed',Impact,sans-serif;
  --body:'Courier Prime',ui-monospace,monospace;
  --script:'Kaushan Script',cursive;
  --gut:16px; --max:1180px;
  --card-img:230px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);font-size:15px;line-height:1.65}
img{display:block;max-width:100%}
a{color:inherit}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gut)}

/* 1. masthead */
.mast{border-bottom:2px solid var(--ink)}
.mast .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:14px;padding-bottom:12px;flex-wrap:wrap}
.wordmark{font-family:var(--display);font-weight:800;font-size:22px;letter-spacing:3px;text-transform:uppercase;text-decoration:none}
.nav{display:flex;gap:20px;font-size:12px;letter-spacing:2px;text-transform:uppercase}
.nav a{text-decoration:none;padding:2px 0;border-bottom:2px solid transparent}
.nav a:hover,.nav a[aria-current]{border-bottom-color:var(--green)}

/* 2. cover box */
.cover{margin:28px 0;background:var(--green);border-radius:20px;padding:8px}
.cover-in{border:2px solid var(--paper);border-radius:14px;padding:22px;color:var(--paper);
  display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:30px;align-items:center}
.badge{font-size:11px;letter-spacing:2.5px;text-transform:uppercase;opacity:.9}
.cover h1{font-family:var(--display);font-weight:800;font-size:clamp(40px,8vw,76px);line-height:.92;
  letter-spacing:2px;text-transform:uppercase;margin:8px 0 14px}
.cover h1 em{font-family:var(--script);font-style:normal;text-transform:none;letter-spacing:0;font-size:.6em}
.stops{list-style:none;margin:0;padding:0;font-size:13px;columns:2;column-gap:22px}
.stops li{padding:3px 0;break-inside:avoid}
.stops li::before{content:"\2022";margin-right:8px;opacity:.7}
.mapbox{background:var(--paper);border-radius:10px;padding:12px}
.mapbox svg{width:100%;height:auto}
.legend{display:flex;gap:8px;align-items:center;margin:40px 0 0;flex-wrap:wrap;border-top:2px solid var(--ink);padding-top:14px}
.legend b{font-family:var(--display);font-weight:800;font-size:12px;letter-spacing:2px;text-transform:uppercase;margin-right:6px}
.legend span{font-size:10px;letter-spacing:1.5px;text-transform:uppercase;padding:6px 15px;border-radius:5px;color:var(--paper)}
.filmlabel{font-family:var(--display);font-weight:800;font-size:22px;letter-spacing:2px;text-transform:uppercase;margin:0 0 10px}
.filmnote{font-size:12px;margin:8px 0 0;opacity:.75}
.lg-g{background:var(--green)} .lg-o{background:var(--orange)} .lg-b{background:var(--blue)} .lg-c{background:var(--ochre);color:var(--ink)}

/* 2 cinematic banner */
.banner{position:relative;margin-bottom:30px}
.banner>img{width:100%;height:clamp(360px,64vh,660px);object-fit:cover;object-position:50% 58%}
.banner-txt{position:absolute;inset:auto 0 0 0;padding:80px 0 30px;
  background:linear-gradient(to top,rgba(239,230,211,.95) 0%,rgba(239,230,211,.8) 44%,rgba(239,230,211,0) 100%)}
.banner .badge{font-size:11px;letter-spacing:2.5px;text-transform:uppercase;opacity:.85}
.banner h1{font-family:var(--display);font-weight:800;font-size:clamp(46px,9vw,104px);line-height:.88;
  letter-spacing:2px;text-transform:uppercase;margin:6px 0 10px;color:var(--green)}
.banner h1 em{font-family:var(--script);font-style:normal;text-transform:none;letter-spacing:0;font-size:.52em;color:var(--ink)}
.banner-sub{margin:0;font-size:15px;max-width:46ch}
.mapstrip{display:grid;grid-template-columns:320px minmax(0,1fr);gap:30px;align-items:center;margin:0 0 32px}
.mapstrip .mapbox{background:transparent;border:2px solid var(--ink);border-radius:12px;padding:14px}

/* 3. title + standfirst */
.standfirst{font-size:19px;line-height:1.55;max-width:62ch;margin:0}

/* 4. practical strip (ochre) */
.practical{background:var(--ochre);border-radius:14px;padding:6px;margin:0 0 34px}
.practical-in{border:2px solid var(--ink);border-radius:9px;padding:16px 18px;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px 26px}
.fact dt{font-family:var(--display);font-weight:800;font-size:13px;letter-spacing:2px;text-transform:uppercase}
.fact dd{margin:2px 0 0;font-size:13px;line-height:1.5}

/* 5. essay */
.essay{max-width:64ch;margin:0 auto 40px}
.essay h2{font-family:var(--display);font-weight:800;font-size:30px;letter-spacing:1.5px;text-transform:uppercase;margin:34px 0 10px}
.essay p{margin:0 0 17px}
.essay p:first-of-type::first-letter{font-family:var(--display);font-weight:800;font-size:58px;float:left;line-height:.8;margin:4px 8px 0 0;color:var(--green)}
.rule{border:0;border-top:2px solid var(--ink);margin:40px 0}

/* 6. day heading */
.day{display:flex;align-items:baseline;gap:14px;border-top:2px solid var(--ink);padding-top:12px;margin:38px 0 6px;flex-wrap:wrap}
.day h3{font-family:var(--display);font-weight:800;font-size:26px;letter-spacing:3px;text-transform:uppercase;margin:0}
.day .lead{font-size:13px;color:var(--blue);font-weight:700;flex:1;min-width:240px}

/* 7. day row: four equal columns, equal height cards */
.row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin:14px 0 0}
.card{border-radius:18px;padding:7px;text-decoration:none;display:flex}
.card-in{flex:1;min-width:0;border:2px solid var(--paper);border-radius:12px;padding:10px;
  display:flex;flex-direction:column;gap:9px;color:var(--paper)}
.card img{width:100%;height:var(--card-img);object-fit:cover;border-radius:7px}
.card .t{font-family:var(--display);font-weight:800;font-size:21px;letter-spacing:1.5px;text-transform:uppercase;
  line-height:23px;height:23px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card .n{font-size:12.5px;line-height:19px;height:76px;overflow:hidden}
.card .g{font-size:10px;letter-spacing:1.5px;text-transform:uppercase;opacity:.85;height:14px;
  white-space:nowrap;overflow:hidden;margin-top:auto}
.c-green{background:var(--green)} .c-orange{background:var(--orange)}
.c-blue{background:var(--blue)} .c-ochre{background:var(--ochre)}
.c-ochre .card-in{border-color:var(--ink);color:var(--ink)}
.eat .e{border-top:1px solid rgba(239,230,211,.45);padding-top:7px;margin-top:7px}
.eat .e:first-of-type{border-top:0;padding-top:0;margin-top:0}
.eat .en{font-family:var(--display);font-weight:800;font-size:17px;letter-spacing:1px;text-transform:uppercase;line-height:19px}
.eat .ed{font-size:12px;line-height:18px}

/* 8-9 blocks */
.two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;margin:40px 0}
.block{border:2px solid var(--ink);border-radius:14px;padding:18px 20px}
.block h3{font-family:var(--display);font-weight:800;font-size:22px;letter-spacing:2px;text-transform:uppercase;margin:0 0 8px}
.block ul{margin:0;padding-left:18px}
.block li{margin:0 0 7px}

/* film */
.film{margin:40px 0}
.film-frame{position:relative;padding-top:56.25%;border-radius:14px;overflow:hidden;border:2px solid var(--ink)}
.film-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* 10. email */
.cta{background:var(--green);border-radius:18px;padding:8px;margin:44px 0}
.cta-in{border:2px dashed var(--paper);border-radius:12px;padding:24px;color:var(--paper);
  display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:24px;align-items:center}
.cta h3{font-family:var(--display);font-weight:800;font-size:28px;letter-spacing:2px;text-transform:uppercase;margin:0 0 6px}
.cta form{display:flex;gap:8px}
.cta input{flex:1;min-width:0;padding:12px;border:2px solid var(--paper);background:var(--paper);
  font-family:var(--body);font-size:14px;border-radius:7px;color:var(--ink)}
.cta button{padding:12px 18px;background:var(--orange);color:var(--paper);border:2px solid var(--paper);
  border-radius:7px;font-family:var(--display);font-weight:800;font-size:16px;letter-spacing:2px;
  text-transform:uppercase;cursor:pointer}

/* 11. footer */
footer{border-top:2px solid var(--ink);margin-top:50px}
footer .wrap{padding-top:22px;padding-bottom:40px;display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;font-size:12px;line-height:1.7}
footer h4{font-family:var(--display);font-weight:800;font-size:13px;letter-spacing:2px;text-transform:uppercase;margin:0 0 6px}
footer a{display:block;text-decoration:none;border-bottom:1px solid transparent;width:fit-content}
footer a:hover{border-bottom-color:var(--ink)}
.disc{font-size:11px;opacity:.75}

@media (max-width:980px){
  .cover-in{grid-template-columns:1fr}
  .row{grid-template-columns:repeat(2,minmax(0,1fr))}
  .practical-in{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cta-in{grid-template-columns:1fr}
}
@media (max-width:620px){
  :root{--card-img:190px}
  .row{grid-template-columns:1fr}
  .two{grid-template-columns:1fr}
  .practical-in{grid-template-columns:1fr}
  .stops{columns:1}
  footer .wrap{grid-template-columns:1fr}
}

/* ---- distress: uneven ink, aged paper, thumbed edges ---- */
/* large-scale ageing, blotchy not uniform */
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:9998;
  background-image:url("/img/distress-blotch.png");background-size:860px 860px;opacity:.62}
/* dirt, fibres and fine paper tooth */
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:9999;
  mix-blend-mode:multiply;opacity:.4;
  background-image:url("/img/distress-dark.png"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='0.18'/%3E%3C/svg%3E");
  background-size:700px 700px,220px 220px}
/* ink that did not fully transfer: paper shows through every solid colour */
.cover,.card,.practical,.cta,.banner{position:relative}
.cover::after,.card::after,.practical::after,.cta::after,.banner::after{
  content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background-image:url("/img/distress-light.png");background-size:820px 820px;opacity:.5}
/* thumbed edges, dirt collecting at the borders */
.cover,.practical,.cta{box-shadow:inset 0 0 40px rgba(27,26,23,.22)}
.card{box-shadow:inset 0 0 26px rgba(27,26,23,.26)}
.block{box-shadow:inset 0 0 30px rgba(27,26,23,.08)}
.mapbox{box-shadow:inset 0 0 22px rgba(27,26,23,.10)}
@media print{body::before,body::after{display:none}}
@media (max-width:980px){.mapstrip{grid-template-columns:1fr}}

/* softer block print: lift the solid ink, keep the grain */
.feed .card img{filter:grayscale(1) contrast(.95) brightness(1.08)}
.cover::after,.card::after,.practical::after,.cta::after,.banner::after{opacity:.32}

.btn{display:inline-block;padding:12px 18px;background:var(--orange);color:var(--paper);border:2px solid var(--paper);
  border-radius:7px;font-family:var(--display);font-weight:800;font-size:16px;letter-spacing:2px;text-transform:uppercase;text-decoration:none}
.btn.dark{border-color:var(--ink)}
.page-h{font-family:var(--display);font-weight:800;font-size:clamp(44px,9vw,92px);line-height:.9;letter-spacing:2px;
  text-transform:uppercase;margin:34px 0 12px;color:var(--green)}
.page-h em{font-family:var(--script);font-style:normal;text-transform:none;letter-spacing:0;font-size:.55em;color:var(--ink)}
.kicker{font-size:11px;letter-spacing:2.5px;text-transform:uppercase;opacity:.8;margin-top:30px}
.prose{max-width:64ch}
.prose p{margin:0 0 17px}
.prose h2{font-family:var(--display);font-weight:800;font-size:28px;letter-spacing:1.5px;text-transform:uppercase;margin:34px 0 10px}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:20px 0 10px}
.soon{border:2px dashed var(--ink);border-radius:18px;padding:18px;display:flex;flex-direction:column;gap:6px;min-height:180px}
.soon .t{font-family:var(--display);font-weight:800;font-size:21px;letter-spacing:1.5px;text-transform:uppercase}
.soon .g{font-size:10px;letter-spacing:1.5px;text-transform:uppercase;opacity:.75;margin-top:auto}
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:20px 0}
.stat{background:var(--green);color:var(--paper);border-radius:14px;padding:6px}
.stat>div{border:2px solid var(--paper);border-radius:9px;padding:16px}
.stat b{display:block;font-family:var(--display);font-weight:800;font-size:40px;letter-spacing:1px;line-height:1}
.stat span{font-size:12px}
.hero-home .banner-txt h1{font-size:clamp(40px,8vw,92px)}

.feed{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:14px 0 0}
.feed .card .ph{background:var(--paper);border-radius:7px;overflow:hidden}
.feed .card img{filter:grayscale(1) contrast(1.15);mix-blend-mode:multiply}
.feed .yt img{aspect-ratio:16/9;height:auto}
.feed .ig img{aspect-ratio:4/5;height:auto}
.feed .card .n{height:auto;min-height:38px;max-height:57px}
.feed-h{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;border-top:2px solid var(--ink);padding-top:12px;margin:44px 0 0}
.feed-h h2{font-family:var(--display);font-weight:800;font-size:26px;letter-spacing:3px;text-transform:uppercase;margin:0}
.feed-h a{font-size:11px;letter-spacing:2px;text-transform:uppercase}
.feed .skel{border:2px dashed var(--ink);border-radius:18px;min-height:220px;opacity:.5}
@media (max-width:980px){.feed{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.feed{grid-template-columns:1fr}}


/* film hero: latest YouTube thumbnail as the banner, two-ink print, plays in place */
.filmhero{position:relative;margin-bottom:30px;background:var(--green)}
.fh-media{position:relative;aspect-ratio:16/9;max-width:1600px;margin:0 auto;width:100%;overflow:hidden;background:var(--paper);isolation:isolate}
.fh-media img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.05) brightness(1.08);mix-blend-mode:multiply}
.fh-tint{position:absolute;inset:0;background:var(--green);mix-blend-mode:lighten;pointer-events:none}
.fh-media iframe{position:absolute;inset:0;width:100%;height:100%;border:0;z-index:3}
.fh-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:92px;height:92px;border-radius:50%;
  background:var(--orange);border:3px solid var(--paper);cursor:pointer;z-index:2;box-shadow:0 6px 0 rgba(27,26,23,.35)}
.fh-play span{display:block;width:0;height:0;margin-left:34px;border-left:30px solid var(--paper);border-top:18px solid transparent;border-bottom:18px solid transparent}
.fh-play:hover{transform:translate(-50%,-50%) scale(1.05)}
.fh-play:focus-visible{outline:3px solid var(--ink);outline-offset:4px}
.fh-txt{background:var(--paper);border-bottom:2px solid var(--ink)}
.fh-txt .wrap{padding-top:22px;padding-bottom:26px}
.fh-txt .badge{font-size:11px;letter-spacing:2.5px;text-transform:uppercase;opacity:.85}
.fh-txt h1{font-family:var(--display);font-weight:800;font-size:clamp(34px,6vw,72px);line-height:.95;letter-spacing:1.5px;
  text-transform:uppercase;margin:6px 0 10px;color:var(--green);text-wrap:balance;max-width:22ch}
.fh-txt .banner-sub{max-width:60ch}
.filmhero.playing .fh-play,.filmhero.playing .fh-tint{display:none}
.filmhero.playing img{visibility:hidden}
/* homepage sections each carry their own ink */
.cta-blue{background:var(--blue)}
.home-ig .card{background:var(--orange)}
.home-yt .card{background:var(--blue)}
.home-bench .soon{background:var(--ochre);border-color:var(--ink);border-style:solid}
@media (max-width:620px){.fh-play{width:68px;height:68px}.fh-play span{margin-left:25px;border-left-width:22px;border-top-width:13px;border-bottom-width:13px}}

@media (max-width:980px){.grid3,.stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){
  .grid3,.stats{grid-template-columns:1fr}
  .mast .wrap{flex-direction:column;align-items:flex-start;gap:8px}
  .nav{gap:14px;flex-wrap:wrap;font-size:11px;letter-spacing:1.5px}
  .wordmark{font-size:19px;letter-spacing:2px}
  .mapstrip{grid-template-columns:1fr}
  .essay p:first-of-type::first-letter{font-size:46px}
}