/* ===========================================================================
   Table theme, 11 Oct 2026. The site in the look of the calendar posts: a warm oak
   table, cream paper cards, tickets for tables, polaroids for what has run.
   Loaded after the base styles, so it only overrides. Remove the link to undo.
   =========================================================================== */
:root{--ink:#172633;--body:#3B3832;--muted:#6E665A;--deep:#FBF7EF;--card:#FBF7EF;
  --gold:#A62F44;--rule:#1726331F;--paper:#FBF7EF;--paper2:#F3EBDD;--navy:#172633;--red:#A62F44}
body{background:#B9834F url("assets/site/wood.webp") repeat;background-size:900px;color:var(--ink)}
h1,h2,h3{font-weight:400;letter-spacing:-.025em}
em{color:var(--red)}
.eyebrow{color:var(--red)}
.btn{background:var(--red);color:#FBF1E6;box-shadow:0 6px 14px rgba(60,35,10,.22)}
.btn.ghost{background:var(--paper);color:var(--navy);border:1px solid #17263333}
.btn.ghost:hover{background:#fff}

/* top bar: a strip of paper */
.topbar{background:#FBF7EFF2;border-bottom:1px solid #1726331A;box-shadow:0 4px 18px rgba(60,35,10,.18)}
.logo{color:var(--navy);font-weight:400}
.topbar nav{color:var(--body)}
.ic{border-color:#17263326;color:var(--navy)}
.ic:hover{color:var(--red);border-color:var(--red);background:#A62F440F}

/* hero: the table scene, with a paper card on it */
.hero{background:url("assets/site/table-scene.webp") center/cover;align-items:center;padding:110px 0 70px}
.hero picture,.hero-img{display:none}
.hero::after{display:none}
.hero .rail{background:var(--paper) url("assets/site/grain.svg");max-width:760px;padding:46px 48px 40px;
  transform:rotate(-1.2deg);border-radius:4px;box-shadow:0 2px 3px rgba(60,35,10,.25),0 30px 60px rgba(60,35,10,.35)}
.hero h1{color:var(--navy);font-size:clamp(42px,6vw,80px)}
.hero h1 em{color:var(--red)}
.hero p{color:var(--body)}
.hero > p.hero-note{color:#FBF1E6;text-shadow:0 1px 3px rgba(0,0,0,.5)}

/* the fact strip: a paper tag */
.proof{background:none;border:0;padding:0 0 10px}
.proof .rail{background:var(--paper2);border-radius:4px;padding:22px 30px;transform:rotate(.6deg);
  box-shadow:0 12px 26px rgba(60,35,10,.28)}
.proof b{color:var(--red);font-weight:400}
.proof span{color:var(--body)}

/* every section is a sheet of paper on the table */
section:not(.hero)>.rail{background:var(--paper) url("assets/site/grain.svg");border-radius:4px;
  padding:clamp(26px,4vw,52px);box-shadow:0 2px 3px rgba(60,35,10,.22),0 26px 50px rgba(60,35,10,.3)}
section:not(.hero):nth-of-type(odd)>.rail{transform:rotate(-.5deg)}
section:not(.hero):nth-of-type(even)>.rail{transform:rotate(.4deg)}
section.ways>.rail+.rail{margin-top:-6px;box-shadow:none;transform:none;border-radius:0 0 4px 4px}
.head h2 em,.wayform h3 em{color:var(--red)}

/* tables: tickets */
.tiles{grid-template-columns:1fr!important;gap:14px}
.tile{display:grid;grid-template-columns:116px minmax(0,1fr) 300px;grid-template-areas:"stub body img";
  background:var(--paper);border:0;border-radius:12px;overflow:hidden;
  box-shadow:0 12px 24px rgba(60,35,10,.22);transition:transform .2s}
.tile:nth-child(odd){transform:rotate(-.6deg)}.tile:nth-child(even){transform:rotate(.5deg)}
.tile:hover{transform:rotate(0) translateY(-3px);border:0}
.tile .stub{grid-area:stub;background:var(--tag);color:var(--navy);display:flex;flex-direction:column;
  align-items:center;justify-content:center;border-right:4px dotted var(--paper);text-align:center}
.tile .stub span{font:11px 'Space Mono',monospace;letter-spacing:3px}
.tile .stub b{font:400 56px/1 'Playfair Display',Georgia,serif}
.tile img{grid-area:img;aspect-ratio:auto;height:100%;min-height:210px;border-left:1px dashed #C9AE76}
.tile-body{grid-area:body;padding:22px 26px}
.tile-body .when b{display:none}
.tile-body .when i{color:var(--navy);font-weight:700}
.tile-body .place{color:var(--red)}
.tile-body h3{font-size:30px;color:var(--navy)}
.tile-body p{color:var(--body)}
.tile .fmt{display:none}
.tags{top:12px;right:12px}
.tags span{font-size:13px;padding:6px 12px;color:var(--navy)!important;box-shadow:0 2px 6px rgba(0,0,0,.15)}
.tile-go{background:var(--red);color:#FBF1E6}
.tile-gos .tile-go.alt{background:var(--paper2);color:var(--navy);box-shadow:inset 0 0 0 1px #17263333}
.tile.soon .tile-go{background:var(--paper2);color:var(--muted);box-shadow:none}
@media(max-width:760px){
  .tile{grid-template-columns:92px minmax(0,1fr);grid-template-areas:"stub body"}
  .tile img,.tags{display:none}
  .tile .stub b{font-size:42px}.tile-body{padding:16px 18px}.tile-body h3{font-size:23px}}
.ftabs button{border-color:#17263333;color:var(--navy)}
.ftabs button[aria-pressed="true"]{background:var(--navy);border-color:var(--navy);color:var(--paper)}

/* month calendar, like the grid post */
.cal{background:var(--paper2);border:0;box-shadow:inset 0 0 0 1px #1726331A}
.day{color:#9C907C;background:#EFE6D6}
.day.pad{background:none}
.day.has{background:var(--evt,var(--red));color:var(--navy)}
.day.has:after{background:var(--navy)}
.cal-city select{background:var(--paper);color:var(--navy);border-color:#17263333}

/* what we have run: polaroids */
.runs{gap:22px}
.run{background:#fff;padding:12px 12px 16px;border-radius:2px;box-shadow:0 10px 22px rgba(60,35,10,.25);overflow:visible}
.run:nth-child(odd){transform:rotate(-1.6deg)}.run:nth-child(even){transform:rotate(1.4deg)}
.run img{border-radius:0}
.run-body h3{color:var(--navy);font-size:20px}
.run-body .when{color:var(--red)}
.geo-map,.geo-uk{background:var(--paper2)}
.thames{stroke:#2C6E9B;opacity:.25}
.pin{fill:var(--red)}.pin-ring{stroke:var(--red)}
.pin-label{fill:var(--navy)}.pin-sub{fill:var(--muted)}

/* the explanation */
.gets,.get{border-color:var(--rule)}
.get b{color:var(--navy);font-weight:400;font-size:24px}
.get p{color:var(--body)}
.bar i{background:#E5D7BD;color:var(--navy)}
.bar i.w{background:#223B50;color:#F7F2E8}
.bar i.b{background:var(--red);color:#F7F2E8}
.shape span.tag{color:var(--red)}
.shape h3{color:var(--navy)}

/* forms and formats */
.way{background:var(--paper2);border-color:#1726331A}
.way b{color:var(--navy);font-weight:400}
.way p{color:var(--body)}
.way-clock .e{background:#E5D7BD;color:var(--navy)}
.way-clock .w{background:#223B50;color:#F7F2E8}
.way-clock .b{background:var(--red);color:#F7F2E8}
.hostform input[type=text],.hostform textarea,.rad{background:#fff;border-color:#17263333;color:var(--navy)}
.hostform input::placeholder,.hostform textarea::placeholder{color:#9C907C}
.rad:has(input:checked){background:#F6E3E3;border-color:var(--red)}
.hostform span{color:var(--navy)}

/* faq, close, footer */
.faq summary{color:var(--navy)}
.close h2{color:var(--navy)}
footer{background:var(--navy);color:#F3E6C8;border:0}
footer a:hover{color:#E9B3B9}

/* fixes after the first look */
.tile .stub{color:var(--tag-ink)}
section.ways{width:min(1180px,92vw);margin:62px auto;padding:clamp(26px,4vw,52px) 0;background:var(--paper) url("assets/site/grain.svg");
  border-radius:4px;transform:rotate(.3deg);box-shadow:0 2px 3px rgba(60,35,10,.22),0 26px 50px rgba(60,35,10,.3)}
section.ways>.rail{background:none!important;box-shadow:none!important;transform:none!important;padding:0 clamp(26px,4vw,52px)!important;width:auto;margin:0}
section.ways>.rail+.rail{margin-top:26px}
.way-clock .q{background:#D9A441;color:var(--navy)}
.way-clock .q.dash{background:#D9A4412E;border-color:#B8893B;color:#8C6A2C}

/* 11 Oct, second pass. FFS as the title. */
.hero .wordmark{font:900 clamp(84px,13vw,150px)/.85 'Playfair Display',Georgia,serif;letter-spacing:-.04em;color:var(--navy);margin:0 0 6px}
.hero .eyebrow{color:var(--red);letter-spacing:.22em}
.hero h1{font-size:clamp(34px,4.6vw,58px);margin:14px 0 16px}

/* tickets keep their photo on a phone: a strip across the top */
@media(max-width:760px){
  .tile{grid-template-columns:86px minmax(0,1fr);grid-template-areas:"img img" "stub body"}
  .tile img{display:block;height:150px;min-height:0;border-left:0;border-bottom:1px dashed #C9AE76}
  .tags{display:flex}.tags span{font-size:12px;padding:5px 10px}}

/* formats: one palette, a photo each, no coloured clocks */
.way{--w:var(--red)!important;background:var(--paper);border:1px solid #1726331F;border-top:0;padding:0 0 22px;overflow:hidden;
  box-shadow:0 10px 22px rgba(60,35,10,.16)}
.way[aria-pressed="true"]{background:var(--paper);border-color:var(--red);box-shadow:0 0 0 2px var(--red),0 10px 22px rgba(60,35,10,.16)}
.way-img{width:100%;aspect-ratio:2/1;object-fit:cover;display:block;margin-bottom:18px}
.way>span,.way>b,.way>p{margin-left:22px;margin-right:22px}
.way-n{color:var(--muted)!important}
.way-line{color:var(--red)!important}
.way-recipe{display:inline-block;margin-top:14px;font:12px 'Space Mono',monospace;letter-spacing:1.5px;text-transform:uppercase;
  color:var(--navy);background:var(--paper2);padding:7px 10px;border-radius:3px}
.way-go{color:var(--red)!important;display:block}
.way-clock{display:none}
.legend{display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;font-size:14px;color:var(--body);margin:-6px 0 18px}
.legend i{display:inline-block;width:14px;height:14px;border-radius:3px;margin-right:-8px;vertical-align:-2px}
.legend .lw{background:#223B50}.legend .lb{background:var(--red)}.legend .le{background:#E5D7BD}

/* format cards: same height, footer lines aligned */
.waycards{align-items:stretch}
.way{display:flex;flex-direction:column;align-items:flex-start;height:100%}
.way>.way-recipe{margin-top:auto}
.way>.way-go{margin-top:14px}
.way>p{flex:none}

/* the leading dot, red, as on the decided wordmark */
.hero .wordmark .dot,.logo .dot{color:var(--red)}
section.ways{transform:none}

/* 11 Oct: phone tickets. Straight, and the photo exactly the width of the ticket. */
@media(max-width:760px){
  .tiles > .tile,.tiles > .tile:nth-child(odd),.tiles > .tile:nth-child(even){transform:none}
  .tile{grid-template-columns:86px minmax(0,1fr);width:100%;border-radius:12px;overflow:hidden}
  .tile img{grid-column:1 / -1;grid-row:1;width:100%;max-width:100%;height:auto;aspect-ratio:16/9;
    min-height:0;object-fit:cover;object-position:center;margin:0;border:0;border-bottom:1px dashed #C9AE76;
    border-radius:12px 12px 0 0;justify-self:stretch}
  .tile .stub{grid-row:2;border-radius:0 0 0 12px}
  .tile .tile-body{grid-row:2}
  .tile .stub{justify-content:flex-start;padding-top:26px}
  .tile-gos{flex-direction:column;align-items:flex-start}
}
@media(max-width:760px){
  section:not(.hero)>.rail,section:not(.hero):nth-of-type(odd)>.rail,section:not(.hero):nth-of-type(even)>.rail,.hero .rail,.proof .rail{transform:none}
  .tile{display:grid;padding:0;border:0}
  .tile img{position:relative;left:0}
}