/* TSL 2.0, the one stylesheet. Written from the rulebook (design/TSL type rules 2.0 (proposed)/RULES.md).
   Loaded only while 2.0 is on. One file for the whole site; each build step adds its section.
   Numbers are the rulebook's: the ladder 13 / 17 / 22 / 29 / 37 / 50 / 72, the spaces 0 / 10 / 20 / 40,
   the site edge 40 (20 on a phone), everything stops at 1590 and centers. */

/* ---- Tokens ---- */
:root {
	--tsl2-edge: 40px;
	--tsl2-max: 1590px;
	--tsl2-red: #FD4239;
	--tsl2-blue: #59CBE8;
	--tsl2-green: #00C58E;
	--tsl2-grey: #666;
	--tsl2-line: #999;   /* every line on the site: the rules between things, the frames and boxes (10/14, his pick: lighter than black, still one pixel) */
}
@media (max-width: 600px) {
	:root { --tsl2-edge: 20px; }
}

/* ---- Base ---- */
/* The arrows (10/18): the Adobe Fonts kit serves no arrow glyphs, so every arrow used to come from the device's own fallback
   font and looked different on every machine. TSL Arrows is a five-glyph font (← ↑ → ↓ ↗) drawn to Neue Frutiger World's own
   measurements: the hyphen's stroke and height. It is listed first in the font stack but limited to the arrow characters,
   so only arrows come from it. Drawn by design/TSL type rules 2.0 (proposed)/arrows/build-arrows.py. */
@font-face { font-family: 'TSL Arrows'; src: url('fonts/tsl-arrows.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: block; unicode-range: U+2190-2193, U+2197; }

body.tsl-v2 {
	margin: 0;
	background: #fff;
	color: #000;
	font-family: 'TSL Arrows', 'neue-frutiger-world', sans-serif;   /* TSL Arrows carries only the arrow characters (see its @font-face); everything else falls through to Frutiger */
	font-weight: 400;
	font-size: 17px;
	line-height: 1.24;
	font-kerning: normal;
	-webkit-font-smoothing: antialiased;
}
body.tsl-v2 *, body.tsl-v2 *::before, body.tsl-v2 *::after { box-sizing: border-box; }
body.tsl-v2::before { content: none !important; display: none !important; }   /* the old stylesheet's phone spacer, while it still loads */
body.tsl-v2 a { color: inherit; text-decoration: none; }
body.tsl-v2 strong, body.tsl-v2 b { font-weight: 400; }   /* one weight for everything, whatever the text says */
body.tsl-v2 img { max-width: 100%; height: auto; }
body.tsl-v2 button, body.tsl-v2 input { font-family: inherit; font-size: inherit; line-height: inherit; border-radius: 0; }
.tsl2-big { letter-spacing: -0.02em; word-spacing: -0.045em; }
.tsl2-small { font-size: 13px; line-height: 1.24; }
.tsl2-grey { color: var(--tsl2-grey); }
.tsl2-skip { position: absolute; left: -9999px; top: 0; }
.tsl2-skip:focus { left: var(--tsl2-edge); top: 10px; background: #fff; padding: 10px; z-index: 100; }
.tsl2-frame { width: min(var(--tsl2-max), calc(100% - 2 * var(--tsl2-edge))); margin: 0 auto; }
/* Links (10/13): every link the same, black like the text with no underline at rest, underlined on hover (1px, 3 below the letters). */
.tsl2-u, .tsl2-text a, .tsl2-content p a { text-decoration: none; }
.tsl2-u:hover, .tsl2-text a:hover, .tsl2-content p a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }

/* ---- Site header: 10 above and below the tallest item (the 44 menu button), then the 1px line.
        It stays at the top of the screen while the page scrolls, as the live site's does. ---- */
/* The announcement: one line above the header in the Events red, white, edge to edge; it scrolls away, the header stays. */
.tsl2-notice { background: #FD4239; color: #fff; }
.tsl2-notice-in { width: min(var(--tsl2-max), calc(100% - 2 * var(--tsl2-edge))); margin: 0 auto; padding: 10px 0; font-size: 17px; line-height: 1.3; text-align: center; }
.tsl2-notice a { color: #fff; text-decoration: none; }
.tsl2-notice a:hover { opacity: 0.7; }
.tsl2-header { position: sticky; top: 0; z-index: 40; background: #fff; }
html { scroll-padding-top: 85px; }   /* a jump to an anchor lands 20 below the header */
.tsl2-header-in { display: flex; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--tsl2-line); }
.tsl2-logo { display: block; flex: none; width: 43px; height: 43px; }
.tsl2-logo img { display: block; width: 43px; height: 43px; }
.tsl2-wordmark { font-size: 37px; line-height: 1; margin-left: 10px; white-space: nowrap; }
.tsl2-nav { margin-left: auto; display: flex; gap: 40px; font-size: 22px; line-height: 1.1; align-self: stretch; }
.tsl2-nav-item { position: relative; display: flex; align-items: center; }
.tsl2-nav-item.is-here > a { color: var(--tsl2-grey); }
.tsl2-nav-item > a:hover, .tsl2-nav-item.has-list:hover > a, .tsl2-nav-item.is-open > a { color: var(--tsl2-grey); }   /* hover dims; underline on hover is the footer's only */
.tsl2-nav-item.has-list::after { content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 12px; }   /* keeps the hover alive across the gap to the list */
/* The list drops out of its word like a tab: a white box, 1px black on three sides, none on top, covering the header's line */
.tsl2-dd { display: none; position: absolute; left: -21px; top: calc(100% + 10px); background: #fff; border: 1px solid var(--tsl2-line); border-top: 0; padding: 20px; z-index: 30; white-space: nowrap; }
.tsl2-nav-item.has-list:hover .tsl2-dd, .tsl2-nav-item.is-open .tsl2-dd { display: block; }
.tsl2-dd a { display: block; font-size: 17px; line-height: 1.24; }
.tsl2-dd a + a { margin-top: 10px; }
.tsl2-dd a:hover { color: var(--tsl2-grey); }
/* The menu button: tap area 44, drawn 36 x 22 (three 2px lines), its right edge on the site edge */
.tsl2-burger { flex: none; width: 44px; height: 44px; margin-left: 36px; margin-right: -4px; position: relative; background: none; border: 0; padding: 0; cursor: pointer; }   /* the drawn lines start 40 after the menu's last word and end on the site edge */
.tsl2-burger-ic { position: absolute; right: 4px; top: 12px; width: 36px; height: 22px; display: flex; flex-direction: column; justify-content: space-between; }   /* top 12: the lines centered on the wordmark's capitals (37px: their center sits 0.53em below the box's top) */
.tsl2-burger-ic i { display: block; height: 2px; background: #000; }
.tsl2-burger:hover .tsl2-burger-ic i, .tsl2-x:hover i { background: var(--tsl2-grey); }   /* the button and its X dim on hover like the menu words */
@media (max-width: 600px) {
	.tsl2-logo, .tsl2-logo img { width: 38px; height: 38px; }
	.tsl2-wordmark { font-size: 24px; }
	.tsl2-nav { display: none; }
	.tsl2-burger { margin-left: auto; }
	.tsl2-burger-ic { top: 11.5px; }   /* centered on the 24px wordmark's capitals */
}

/* ---- The open menu: a full white page; the header row stays, the button is an X; five groups ---- */
.tsl2-menu { position: fixed; inset: 0; background: #fff; z-index: 50; overflow: auto; }
.tsl2-menu[hidden] { display: none; }
html.tsl2-menu-open, html.tsl2-menu-open body { overflow: hidden; }
.tsl2-x { flex: none; width: 44px; height: 44px; margin-left: auto; margin-right: -4px; position: relative; background: none; border: 0; padding: 0; cursor: pointer; }
.tsl2-x i { position: absolute; left: 4px; right: 4px; top: 21px; height: 2px; background: #000; }
.tsl2-x i:first-child { transform: rotate(45deg); }
.tsl2-x i:last-child { transform: rotate(-45deg); }
.tsl2-groups { display: grid; grid-template-columns: repeat(5, max-content); justify-content: space-between; column-gap: 40px; row-gap: 40px; padding: 40px 0; }
.tsl2-group-head { font-size: 22px; line-height: 1.1; margin-bottom: 20px; }
.tsl2-group a { display: block; font-size: 17px; line-height: 1.24; white-space: nowrap; }
.tsl2-group a + a { margin-top: 10px; }
.tsl2-group a:hover { color: var(--tsl2-grey); }
.tsl2-menu-contact { font-size: 13px; line-height: 1.24; color: var(--tsl2-grey); padding-bottom: 40px; }
@media (max-width: 1100px) { .tsl2-groups { grid-template-columns: repeat(3, max-content); } }
@media (max-width: 760px) { .tsl2-groups { grid-template-columns: repeat(2, max-content); } }
@media (max-width: 600px) { .tsl2-groups { grid-template-columns: 1fr; } }

/* ---- The page: 40 from the header's line; a top-level page's title at XL 72 on a laptop (1240 wide and up), L 50 below that, 38 on a phone; 40 above and below ---- */
body.tsl-v2 main#content.tsl2-main { display: block; padding: 40px 0; margin: 0; max-width: none; }
.tsl2-title { font-weight: 400; font-size: 50px; line-height: .96; margin: 0; text-wrap: balance; }
@media (min-width: 1240px) { .tsl2-title { font-size: 72px; } }
.tsl2-content { margin-top: 40px; }
.tsl2-content-old { margin-top: 0; } /* a page not yet rebuilt: its old content, with its own heading, straight under the header */
.tsl2-text p { margin: 0; }
.tsl2-text p + p { margin-top: 20px; }
@media (max-width: 600px) {
	.tsl2-title { font-size: 38px; }
}

/* ---- Footer: the black block inside the site edge, its contents 40 in (20 on a phone) ---- */
.tsl2-footer { background: #000; color: #fff; margin-top: var(--tsl2-edge); margin-bottom: var(--tsl2-edge); }   /* the block sits inside the site edge on all four sides: the page ends with its 40, then the edge (40, phone 20) to the block (10/11) */
.tsl2-footer a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.tsl2-footer-in { padding: 40px; }
.tsl2-footer .tsl2-grey { color: #999; }
.tsl2-footer-head { font-size: 37px; line-height: 1; }
.tsl2-nl-row { display: grid; grid-template-columns: 1fr 1fr; column-gap: 40px; align-items: center; }
.tsl2-nl { display: flex; gap: 10px; position: relative; }
.tsl2-nl input[type="email"] { flex: 1; min-width: 0; padding: 10px; border: 1px solid #fff; background: #fff; color: #000; }
.tsl2-nl input[type="email"]::placeholder { color: #666; }
.tsl2-nl button { background: none; color: #fff; border: 1px solid #fff; padding: 10px 20px; cursor: pointer; white-space: nowrap; }
.tsl2-nl button:hover { background: #fff; color: #000; }   /* the outlined button fills on hover */
.tsl2-nl-hp { position: absolute; left: -5000px; }
.tsl2-nl-msg { grid-column: 2; font-size: 13px; line-height: 1.24; color: #999; margin-top: 10px; }
.tsl2-nl-msg:empty { display: none; }
.tsl2-nl-msg.is-ok { color: #fff; }
.tsl2-footer-cols { margin-top: 40px; border-top: 1px solid #fff; padding-top: 40px; display: grid; grid-template-columns: repeat(5, 1fr); column-gap: 40px; row-gap: 40px; }
.tsl2-footer-lines { margin-top: 10px; }
.tsl2-footer-lines > * { display: block; }
.tsl2-footer-last { margin-top: 40px; display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
@media (max-width: 600px) {
	.tsl2-footer-in { padding: 20px; }
	.tsl2-footer-head { font-size: 24px; line-height: 1.1; }
	.tsl2-nl-row { grid-template-columns: 1fr; row-gap: 40px; }
	.tsl2-nl { flex-direction: column; }
	.tsl2-nl-msg { grid-column: 1; margin-top: -20px; }
	.tsl2-footer-cols { border-top: 0; padding-top: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 20px; }
	.tsl2-footer-col:first-child { grid-column: 1 / -1; order: 1; }   /* Visit across the block, last: the address closes the footer on a phone, as the live one does (10/13) */
}

/* ---- Informational pages: a stack of bands, a 1px line between them 40 above and 40 below (step 5) ---- */
.tsl2-band { margin-top: 40px; padding-top: 40px; border-top: 1px solid var(--tsl2-line); }
.tsl2-band.is-first { border-top: 0; padding-top: 0; }
.tsl2-band.is-first.is-lined { border-top: 1px solid var(--tsl2-line); padding-top: 40px; }   /* a page that opens on tiles: a line 40 under the title, 40 to the tiles */
.tsl2-band.no-line { border-top: 0; padding-top: 0; }
.tsl2-band > .tsl2-h2 + * { margin-top: 20px; }
.tsl2-h2 { font-weight: 400; font-size: 29px; line-height: 1.05; margin: 0; text-wrap: balance; }   /* band headings a step down the ladder, at Subhead 29 (10/13, on the preview for his look) */
.tsl2-cells { display: grid; column-gap: 40px; row-gap: 40px; align-items: start; }
.tsl2-cells-1 { grid-template-columns: 1fr; }
.tsl2-cells-2 { grid-template-columns: 1fr 1fr; }
.tsl2-cells-3 { grid-template-columns: repeat(3, 1fr); }
.tsl2-cells-2.is-3-4 { grid-template-columns: 3fr 4fr; }   /* the film page's split (Press) */
.tsl2-after-flow { margin-top: 40px; }
.tsl2-lines a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.tsl2-cells.is-stretch { align-items: stretch; }
.tsl2-cell > * + * { margin-top: 20px; }
.tsl2-cell > :first-child { margin-top: 0; }   /* the text starts level with the picture's top */
.tsl2-cell > .tsl2-text + .tsl2-h2, .tsl2-cell > .tsl2-links + .tsl2-h2, .tsl2-cell > .tsl2-figure + .tsl2-h2 { margin-top: 40px; }   /* a heading in a read: 40 above */
.tsl2-cell > .tsl2-figure + .tsl2-h2 { margin-top: 20px; }   /* a tile's heading 20 below its picture */
.tsl2-cell > .tsl2-label + * { margin-top: 0; }
.tsl2-cell > .tsl2-lines + .tsl2-label { margin-top: 20px; }
.tsl2-figure { margin: 0; }
.tsl2-pic { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }   /* a page picture fills the 4:3 frame at the column's width, cut from the middle, so every page lines up whatever is uploaded (10/20) */
.tsl2-pic.is-whole { aspect-ratio: auto; object-fit: fill; }   /* "show whole" in the CM: a cover or a poster keeps its own shape */
.tsl2-pic.has-border { box-shadow: 0 0 0 1px var(--tsl2-line); }   /* the CM's Border tick: the site's 1px grey line around the picture (10/20) */
.tsl2-pic.is-sized { object-fit: contain; background: #fff; box-sizing: border-box; padding: calc((1 - var(--pic-size, 1)) * 37.5%) calc((1 - var(--pic-size, 1)) * 50%); }   /* the CM's Size slider: the picture fills that share of the 4:3 frame, centered, white around it (10/21) */
.tsl2-ph { aspect-ratio: 4 / 3; background: #ececec; color: var(--tsl2-grey); display: flex; align-items: center; justify-content: center; text-align: center; padding: 20px; }
.tsl2-cap { margin-top: 20px; }
.tsl2-label { color: #000; }
.tsl2-links a { display: block; }
.tsl2-links a + a { margin-top: 20px; }
.tsl2-list { list-style: none; margin: 0; padding: 0; }
.tsl2-list li { margin: 0; }
.tsl2-text ul { list-style: none; margin: 20px 0 0; padding: 0; }
.tsl2-text ul li { margin: 0; }
.tsl2-text .tsl2-subhead-small { font-size: 13px; line-height: 1.24; }
.tsl2-flow { columns: 2; column-gap: 40px; }
.tsl2-flow .tsl2-text > * { break-inside: avoid; }   /* paragraphs stay whole; the text itself flows across the columns */
.tsl2-flow .tsl2-text p + .tsl2-subhead { margin-top: 40px; break-after: avoid; }
/* an outlined action: a row in the thing's color, 3/8 inside, the arrow after the words, underline on hover */
.tsl2-action { display: inline-block; border: 1px solid var(--c, #000); padding: 3px 8px; }
.tsl2-action:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
/* lined rows: 1px black on top of each row, 10 above and below, the grey closing line; the last cell grey and right */
.tsl2-rows { border-bottom: 1px solid var(--tsl2-line); }
.tsl2-rows .tsl2-row { display: grid; border-top: 1px solid var(--tsl2-line); padding: 10px 0; column-gap: 20px; align-items: start; }
.tsl2-row-1 { grid-template-columns: 1fr; }
.tsl2-row-2 { grid-template-columns: 1fr 1fr; }
.tsl2-row-3 { grid-template-columns: 1fr 2fr 1fr; }
.tsl2-row-3 > span:last-child { text-align: right; color: var(--tsl2-grey); }
.tsl2-row-2 > span:last-child { color: #000; }
/* the press list (10/14): lined rows like the showtimes', 10 inside; the article leads as an arrow link at Base 17, the publication and its date under it at Small 13 in grey, as a note sits under a title */
.tsl2-row.tsl2-row-press { display: block; padding: 10px 0; }
.tsl2-press-title { display: block; font-size: 17px; line-height: 1.24; text-wrap: balance; max-width: 1000px; }
.tsl2-press-pub { display: block; font-size: 13px; line-height: 1.24; color: var(--tsl2-grey); }
.tsl2-press-date { display: block; font-size: 13px; line-height: 1.24; color: var(--tsl2-grey); }
.tsl2-press-title a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }   /* no arrow (10/16): the rows say these are links; the headline underlines on hover like every link */
/* the giving card: a 1px black box, 40 inside; the amounts as an even row; the chosen one and the submit solid black */
.tsl2-giving { border: 1px solid var(--tsl2-line); padding: 40px; }
.tsl2-giving-title { font-size: 22px; line-height: 1.1; }
.tsl2-giving-title + .tsl2-giving-line { margin-top: 10px; }
.tsl2-giving-line { margin: 0; }
.tsl2-giving > * + .tsl2-giving-line { margin-top: 10px; }
.tsl2-tabs { display: flex; flex-wrap: wrap; gap: 10px 20px; margin-top: 20px; }
.tsl2-tab { background: none; border: 0; padding: 0 0 3px; cursor: pointer; border-bottom: 2px solid transparent; }
.tsl2-tab.is-on { border-bottom-color: #000; }
.tsl2-amounts { display: grid; grid-template-columns: repeat(var(--n, 6), 1fr); gap: 10px; margin-top: 20px; }
.tsl2-amount, .tsl2-act { border: 1px solid var(--tsl2-line); background: #fff; color: #000; padding: 10px; text-align: center; line-height: 1.24; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.tsl2-amount.is-on, .tsl2-act.is-solid { background: #000; color: #fff; }
.tsl2-acts { display: grid; grid-template-columns: 1fr; gap: 10px; margin-top: 10px; }
.tsl2-act:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.tsl2-act[disabled] { opacity: .5; cursor: default; }
.tsl2-giving-status { margin: 10px 0 0; }
.tsl2-giving-status:empty { display: none; }
.tsl2-giving-fine { margin: 20px 0 0; }
/* the tiers and the Met levels: text tiles, the action rows on one line across */
.tsl2-tiers { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 40px; row-gap: 40px; align-items: stretch; }
.tsl2-levels { grid-template-columns: 1fr 1fr; }
.tsl2-tier { display: flex; flex-direction: column; }
.tsl2-tier > * + * { margin-top: 20px; }
.tsl2-tier > .tsl2-h2 + .tsl2-tier-price { margin-top: 10px; }
.tsl2-tier-price, .tsl2-benefits-head { margin: 0; }
.tsl2-tier > .tsl2-benefits-head + .tsl2-list { margin-top: 20px; }
.tsl2-tier > .tsl2-action { margin-top: auto; align-self: flex-start; }
.tsl2-tier > .tsl2-list + .tsl2-action, .tsl2-tier > .tsl2-text + .tsl2-action { margin-top: 20px; }
.tsl2-tier > .tsl2-list { margin-bottom: 20px; }
.tsl2-tier > .tsl2-list + .tsl2-action { margin-top: auto; }
/* the Met sign-up form */
.tsl2-signup { max-width: 100%; }
.tsl2-signup > * + * { margin-top: 20px; }
.tsl2-field { display: block; }
.tsl2-field > span { display: block; margin-bottom: 10px; }
.tsl2-field input, .tsl2-field select, .tsl2-field textarea { width: 100%; padding: 10px; border: 1px solid var(--tsl2-line); background: #fff; color: #000; font: inherit; border-radius: 0; }
.tsl2-field-row { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 10px; }
.tsl2-field-row > .tsl2-field { margin: 0; }
.tsl2-signup .tsl2-act { display: inline-flex; }
.tsl2-signup-status { margin: 10px 0 0; }
.tsl2-signup-status:empty { display: none; }
/* the founding donors box: 1px red, 40 inside */
.tsl2-fbox { border: 1px solid var(--tsl2-red); padding: 40px; }
.tsl2-fbox > .tsl2-h2 + .tsl2-fbox-grid { margin-top: 20px; }
.tsl2-fbox-grid { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 40px; row-gap: 20px; }
.tsl2-fbox p { margin: 0; }
.tsl2-fbox-name { color: var(--tsl2-red); }
.tsl2-fbox-level > p + p { margin-top: 10px; }
/* the newsletter on a white page */
.tsl2-nl.is-black input[type="email"] { border-color: var(--tsl2-line); }
.tsl2-nl.is-black button { color: #000; border-color: var(--tsl2-line); }
.tsl2-nl.is-black button:hover { background: #000; color: #fff; }
.tsl2-nl-block .tsl2-nl-msg { color: var(--tsl2-grey); grid-column: auto; }
.tsl2-nl-block .tsl2-nl-msg.is-ok { color: #000; }
.tsl2-class-dates .tsl2-times { margin-top: 0; }
@media (max-width: 600px) {
	.tsl2-cells-2, .tsl2-cells-3, .tsl2-tiers, .tsl2-levels { grid-template-columns: 1fr; }
	.tsl2-flow { columns: 1; }
	.tsl2-row-3 { grid-template-columns: 1fr auto; grid-template-areas: 'a c' 'b b'; row-gap: 10px; }
	.tsl2-row-3 > span:nth-child(1) { grid-area: a; white-space: nowrap; }
	.tsl2-row-3 > span:nth-child(2) { grid-area: b; }
	.tsl2-row-3 > span:nth-child(3) { grid-area: c; }
	.tsl2-row-2 { grid-template-columns: 1fr; row-gap: 10px; }
	.tsl2-giving, .tsl2-fbox { padding: 20px; }
	.tsl2-amounts { grid-template-columns: 1fr 1fr; }
	.tsl2-fbox-grid { grid-template-columns: 1fr; }
	.tsl2-field-row { grid-template-columns: 1fr; }
	.tsl2-action.is-wide { display: block; padding: 10px; text-align: center; }
	.tsl2-list li + li { margin-top: 10px; }   /* on a phone list items wrap, so they get 10 between them */
	.tsl2-text ul li + li { margin-top: 10px; }
}

/* ---- Film and event pages: the poster column beside the text column, 3 to 4, 40 apart (step 3) ---- */
.tsl2-single { --tsl2-cat: var(--tsl2-blue); }
.tsl2-single.is-events { --tsl2-cat: var(--tsl2-red); }
.tsl2-cols { display: grid; grid-template-columns: 3fr 4fr; column-gap: 40px; align-items: start; }
.tsl2-poster { display: block; width: 100%; height: auto; }
.tsl2-trailer { display: block; margin-top: 10px; text-align: center; padding-bottom: 10px; border-bottom: 1px solid var(--tsl2-line); }
.tsl2-extra { display: block; width: 100%; height: auto; margin-top: 20px; }
.tsl2-trailer:hover, .tsl2-arrow:hover, .tsl2-more summary:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a.tsl2-tm:hover { background: var(--tsl2-cat); color: #fff; text-decoration: none; }   /* a time button fills with its color on hover, as on the homepage's schedule and the calendar (10/13) */
/* the page header: three lines 10 apart */
.tsl2-h1 { font-weight: 400; font-size: 37px; line-height: 1; margin: 0; text-wrap: balance; }
.tsl2-sub { font-size: 29px; line-height: 1.05; color: var(--tsl2-grey); margin-top: 10px; text-wrap: balance; }
.tsl2-facts { color: var(--tsl2-grey); margin-top: 10px; }
/* the showtimes block: a black line on every row, the grey closing line, times in 1px buttons in the program's color */
.tsl2-times { margin-top: 20px; border-bottom: 1px solid var(--tsl2-line); }
.tsl2-row { display: flex; justify-content: space-between; align-items: center; gap: 20px; border-top: 1px solid var(--tsl2-line); }
.tsl2-row-text { padding: 10px 0; }
.tsl2-tms { display: flex; gap: 20px; flex: none; }
.tsl2-tm { font-size: 17px; line-height: 1.24; border: 1px solid var(--tsl2-cat); padding: 3px 8px; margin: 10px 0; white-space: nowrap; }   /* the time buttons at Base 17 site-wide (10/13) */
.tsl2-tm.is-off { border-color: var(--tsl2-grey); color: var(--tsl2-grey); }
.tsl2-tm.is-plain { border-color: transparent; padding-left: 0; padding-right: 0; }
.tsl2-more summary { list-style: none; cursor: pointer; text-align: center; padding: 10px 0; border-top: 1px solid var(--tsl2-line); user-select: none; -webkit-tap-highlight-color: transparent; }
.tsl2-more summary::-webkit-details-marker { display: none; }
/* the row stays put: its arrow turns down while the extra dates unfold under it, and back when they fold */
.tsl2-more-arrow { display: inline-block; transition: transform .25s ease; transform-origin: 60% 50%; }
.tsl2-more[open] .tsl2-more-arrow { transform: rotate(90deg); }
/* the note, additional info, the text, the quotes, the closing link: 20 apart, paragraphs 20 apart */
.tsl2-note { margin-top: 20px; color: var(--tsl2-grey); }
.tsl2-info, .tsl2-quotes { margin-top: 20px; }
.tsl2-text { margin-top: 20px; }
.tsl2-note p, .tsl2-info p, .tsl2-quotes p { margin: 0; }
.tsl2-info p + p, .tsl2-quotes p + p { margin-top: 20px; }
.tsl2-info a:hover, .tsl2-quotes p a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.tsl2-text .tsl-red { color: var(--tsl2-red); }
.tsl2-text strong, .tsl2-text b, .tsl2-info strong, .tsl2-info b { font-weight: 400; }   /* one weight for everything */
.tsl2-text .tsl2-subhead { font-size: 29px; line-height: 1.05; letter-spacing: -0.02em; word-spacing: -0.045em; text-wrap: balance; }   /* a paragraph typed all bold is a heading in the read, at Subhead 29 */
.tsl2-text p + .tsl2-subhead { margin-top: 40px; }
@media (max-width: 600px) { .tsl2-text .tsl2-subhead { font-size: 22px; line-height: 1.1; } }
.tsl2-arrow { display: inline-block; margin-top: 20px; }
@media (max-width: 600px) {
	.tsl2-cols { display: block; }
	.tsl2-textcol { margin-top: 40px; }
	.tsl2-h1 { font-size: 24px; line-height: 1.1; }
	.tsl2-sub { font-size: 22px; line-height: 1.1; }
}
/* ---- Exhibition pages: the picture across the width, then two equal columns 40 apart; the reading stays on screen (step 4) ---- */
.tsl2-hero { display: block; width: auto; max-width: 100%; height: auto; }   /* the page picture: never stretched past its own size (10/14) */
.tsl2-hero.is-tall, .tsl2-ex-current-img.is-tall { max-height: calc(100vh - 145px); }   /* a picture taller than it is wide is held to the screen's height (the header, 40 above, 40 below) at its own width; a square or landscape one stays full width however tall (10/14) */
.tsl2-ex-cols { margin-top: 0; display: grid; grid-template-columns: 3fr 4fr; column-gap: 40px; align-items: start; }   /* the film page's split, 3 to 4: the works left, every word right, from the page's own 40 under the site header's line; no page picture on the page (10/20) */
.tsl2-ex-left > * + *, .tsl2-ex-words > * + * { margin-top: 20px; }   /* everything 20 apart */
.tsl2-ex-left > :first-child, .tsl2-ex-words > :first-child { margin-top: 0; }   /* the first piece and the title start level */
.tsl2-ex-right { align-self: stretch; position: relative; }   /* the column runs the row's full height; the words inside it are the standard sticky sidebar (10/20) */
.tsl2-ex-words { position: sticky; top: 105px; }   /* held by the browser, never by script: the words hold 40 under the site header's line while the works scroll, and let go only when the works run out, so the two columns end together (10/20, "stay stuck at top until the left side gets far down enough for them to both tie"); the script sets the top from the header's real height */
.tsl2-ex-piece { margin: 0; }
.tsl2-ex-piece + .tsl2-ex-piece, .tsl2-ex-art + .tsl2-ex-art, .tsl2-ex-art + .tsl2-ex-videoblock { margin-top: 40px; }   /* 40 after a caption to the next piece (or the video), so a piece and its caption read as one thing: at 20 the caption floated halfway between two works (10/20) */
.tsl2-ex-img { display: block; width: auto; max-width: 100%; height: auto; }   /* a piece at the column's width, or at its own size when the file is smaller: never stretched, never cropped, its own edge the only edge (10/14; grey boxes were tried and dropped 10/20 for the narrower column) */
.tsl2-ex-cap { margin-top: 20px; }
.tsl2-ex-video { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #000; }
.tsl2-ex-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.tsl2-ex-site .tsl2-arrow { margin-top: 0; }   /* the arrow link's film-page margin does not apply here */
.tsl2-ex-right .tsl2-text + .tsl2-text { margin-top: 40px; }   /* 40 between the statement, about the artist and the statement continued: two voices, not one more paragraph (10/20) */
@media (max-width: 600px) {
	/* one column in the read order: header, line, opening, press, statement, art, about, art, statement, website, video */
	.tsl2-hero.is-tall, .tsl2-ex-current-img.is-tall { max-height: none; }
	.tsl2-ex-cols { display: flex; flex-direction: column; }
	.tsl2-ex-left, .tsl2-ex-right, .tsl2-ex-words { display: contents; position: static; }   /* one column: the words' wrapper melts away too, so the read order below can place its parts; nothing parks */
	.tsl2-ex-cols > * > * { margin-top: 20px; }   /* in one column the reading no longer starts level with the title: 20 under the line */
	.tsl2-ex-head { order: 1; margin-top: 0 !important; }   /* the page starts on the title, 40 under the site header's line, as on a laptop */
	.tsl2-ex-open { order: 3; }
	.tsl2-ex-press { order: 4; }
	.tsl2-ex-statement { order: 5; }
	.tsl2-ex-art1 { order: 6; }
	.tsl2-ex-about { order: 7; }
	.tsl2-ex-art2 { order: 8; }
	.tsl2-ex-statement2 { order: 9; }
	.tsl2-ex-site { order: 10; }
	.tsl2-ex-videoblock { order: 11; }
	.tsl2-ex-art, .tsl2-ex-about, .tsl2-ex-statement2, .tsl2-ex-videoblock { margin-top: 40px; }   /* 40 wherever the art and the texts meet in the one column, so a text never reads as a caption (10/20) */
}

/* the trailer: a dark ground, the player, an X */
.tsl2-lightbox { position: fixed; inset: 0; z-index: 100000; background: rgba(0, 0, 0, .85); display: flex; align-items: center; justify-content: center; padding: 64px 20px; cursor: pointer; }
.tsl2-lightbox[hidden] { display: none; }
.tsl2-lightbox-frame { width: min(1100px, 100%); aspect-ratio: 16 / 9; background: #000; cursor: default; }
.tsl2-lightbox-frame iframe, .tsl2-lightbox-frame video { width: 100%; height: 100%; border: 0; display: block; }
.tsl2-lightbox-x { position: absolute; top: 10px; right: 16px; width: 44px; height: 44px; background: none; border: 0; padding: 0; cursor: pointer; }
.tsl2-lightbox-x i { position: absolute; left: 4px; right: 4px; top: 21px; height: 2px; background: #fff; }
.tsl2-lightbox-x i:first-child { transform: rotate(45deg); }
.tsl2-lightbox-x i:last-child { transform: rotate(-45deg); }
html.tsl2-lightbox-open, html.tsl2-lightbox-open body { overflow: hidden; }

/* ---- Homepage (step 6): the today card in the first slot beside the card grid, three across at the site edge,
   20 apart both ways, 20 below the header's line; two across on a tablet, one on a phone ---- */
body.tsl-v2.home main#content.tsl2-main { padding-top: 20px; }   /* the homepage: 20 from the header's line, not a page's 40 */
.tsl2-home-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: start; }
/* the today card: exactly a card's size; its rows share the height evenly (the one place spacing flexes) */
.tsl2-today { align-self: stretch; display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.tsl2-today-head { display: flex; align-items: baseline; gap: 10px; }
.tsl2-today-label { font-weight: 400; font-size: 22px; line-height: 1.1; margin: 0; flex: 1; min-width: 0; }
.tsl2-today-prev, .tsl2-today-next { background: none; border: 0; padding: 0; margin: 0; font: inherit; font-size: 17px; line-height: 1.24; color: #000; cursor: pointer; }
.tsl2-today-prev:disabled, .tsl2-today-next:disabled { color: #ccc; cursor: default; }
.tsl2-today-prev:hover:not(:disabled), .tsl2-today-next:hover:not(:disabled) { color: var(--tsl2-grey); }
.tsl2-today-set { flex: 1; display: flex; flex-direction: column; }   /* two sets of days: the laptop's (a light day borrows the next) and the phone's (one day each) */
.tsl2-today-set.is-phone { display: none; }
.tsl2-today-view { flex: 1; display: flex; flex-direction: column; }
.tsl2-today-view[hidden] { display: none; }
.tsl2-today-sub { flex: none; display: flex; align-items: center; border-top: 1px solid var(--tsl2-line); font-size: 22px; line-height: 1.1; padding: 20px 0; }   /* a borrowed day's line, the size of the day heading: 20 above and below it whatever the card's height; the rows share the rest */
.tsl2-today-view.is-dense .tsl2-today-time { padding: 1px 6px; }   /* 7 lines or more: the buttons tighten, the type stays 13 */
.tsl2-today-view.is-dense .tsl2-today-sub { padding: 10px 0; }
.tsl2-today-rows { flex: 1; display: flex; flex-direction: column; margin-top: 20px; border-bottom: 1px solid var(--tsl2-line); }   /* the rows share the card's spare height and never shrink below their words: a full day makes the card taller than its neighbours instead (10/13, "flex to fit") */
.tsl2-today-row { flex: 1 0 auto; border-top: 1px solid var(--tsl2-line); display: flex; justify-content: space-between; align-items: center; gap: 20px; font-size: 13px; line-height: 1.24; }
.tsl2-today-row.is-line span { padding: 3px 0; font-size: 17px; }   /* the store line, a closed day or a notice at Base 17, not the notes' 13 (10/13) */
.tsl2-today-row.is-line a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }   /* the one word that is a link in the store line: underlined, or nothing says so (the rare exception) */
.tsl2-today-title { min-width: 0; font-size: 17px; }   /* the title at Base 17 */
.tsl2-today-title:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }   /* the live effect, kept */
.tsl2-today-note { display: block; color: var(--tsl2-grey); font-size: 13px; }
.tsl2-today-row.is-past .tsl2-today-title { color: var(--tsl2-grey); text-decoration: line-through; text-decoration-color: var(--tsl2-grey); }
.tsl2-today-times { display: flex; gap: 10px; flex: none; }
.tsl2-today-time { font-size: 17px; line-height: 1.24; border: 1px solid var(--c, #000); padding: 3px 8px; white-space: nowrap; }   /* the time button at Base 17, like every time button on the site (10/13) */
a.tsl2-today-time:hover { background: var(--c, #000); color: #fff; }
.tsl2-today-time.is-past { border-color: #ccc; color: #ccc; }
/* a card: a 1px frame, the picture in a 16:9 frame, the date strip joined under it */
.tsl2-card { border: 1px solid var(--tsl2-line); min-width: 0; transition: border-color .4s ease; }
.tsl2-card:hover, .tsl2-card.is-tapped { border-color: var(--c); }   /* the frame takes the program's color with the strip, as live */
.tsl2-card-pic { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: #ececec; }
body.tsl-v2 .tsl2-card-img { display: block; width: 100%; height: 100%; object-fit: cover; }   /* fills the frame, cut from the middle; written with the body class so it outranks the general picture rule (body.tsl-v2 img: height auto), which left a picture of another shape short with a grey band under it */
.tsl2-chips { position: absolute; right: 10px; bottom: 10px; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; max-width: calc(100% - 20px); z-index: 2; }
.tsl2-chip { background: #000; color: #fff; border: 1px solid #fff; font-size: 13px; line-height: 1.24; padding: 3px 8px; text-align: right; }   /* the white line keeps the chip readable on a dark picture */
.tsl2-card-when { display: block; text-align: center; border-top: 1px solid var(--tsl2-line); padding: 10px; font-size: 17px; line-height: 1.24; transition: background-color .4s ease, color .4s ease, border-color .4s ease; }
.tsl2-card:hover .tsl2-card-when, .tsl2-card.is-tapped .tsl2-card-when { background: var(--c); border-color: var(--c); color: #fff; }   /* the fill in the program's color, the words white */
/* hovering the picture: one even shade with the title, the one line and the showings, 20 in; laptops only */
/* display:none at rest (a browser can paint the subtree under opacity:0); @starting-style gives the .4s fade in, the fade out is instant */
.tsl2-card-hov { position: absolute; inset: 0; display: none; opacity: 0; transition: opacity .4s ease; pointer-events: none; flex-direction: column; gap: 10px; padding: 20px; color: #fff; background: rgba(0, 0, 0, 0.8); overflow: hidden; z-index: 3; }
.tsl2-hov-title { font-size: 22px; line-height: 1.1; }
.tsl2-hov-line { font-size: 17px; line-height: 1.24; }
.tsl2-hov-small { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, max-content)); gap: 10px 20px; font-size: 13px; line-height: 1.24; }   /* the showings read left to right in columns that line up, 20 apart, rows 10 apart; as many columns as the hover's width holds */
.tsl2-hov-row { white-space: nowrap; }
.tsl2-hov-meta { font-size: 13px; line-height: 1.24; }
.tsl2-card.is-exhibition .tsl2-hov-small { grid-template-columns: minmax(0, 1fr); gap: 0; }   /* an exhibition keeps the artist over the dates */
@media (hover: hover) {   /* a mouse, any window width; a phone taps the strip instead */
	.tsl2-card-pic:hover .tsl2-card-hov { display: flex; opacity: 1; }
	@starting-style { .tsl2-card-pic:hover .tsl2-card-hov { opacity: 0; } }
}
@media (max-width: 1024px) { .tsl2-home-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) {
	.tsl2-home-grid { grid-template-columns: minmax(0, 1fr); }
	.tsl2-today { overflow: visible; }
	.tsl2-today-set.is-laptop { display: none; }
	.tsl2-today-set.is-phone { display: flex; }
	.tsl2-today-rows { flex: none; }
	.tsl2-today-row { flex: none; padding: 10px 0; font-size: 17px; }
	.tsl2-today-time { font-size: 17px; }
	.tsl2-card.is-promo { display: none; }   /* a promo card has no date: not in the phone's dated column */
}

/* ---- Film and Events listings (step 6): the homepage's cards under the page's title; Coming Soon at L 50 too, 40 above and below; the series as tabs ---- */
.tsl2-listing .tsl2-cards { margin-top: 40px; }
.tsl2-title-next { margin-top: 40px; }
.tsl2-tabs { display: flex; flex-wrap: wrap; gap: 10px 20px; margin-top: 40px; font-size: 17px; line-height: 1.24; }
.tsl2-tab { background: none; border: 0; border-bottom: 2px solid transparent; padding: 0 0 3px; margin: 0; font: inherit; color: #000; cursor: pointer; }
.tsl2-tab:hover { color: var(--tsl2-grey); }
.tsl2-tab.is-on { border-bottom-color: var(--tsl2-red); }
.tsl2-listing-note { margin: 40px 0 0; color: var(--tsl2-grey); }
.tsl2-listing-note a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.tsl2-listing-note[hidden] { display: none; }
.tsl2-card[hidden] { display: none; }

/* ---- Exhibitions landing and past page (step 6): art, not showtimes; the current show across the width with its header,
   a line 40 above and below Upcoming, two columns 40 apart; the past page the same columns, newest first ---- */
.tsl2-ex-current { display: block; margin-top: 40px; }
.tsl2-ex-current-img { display: block; width: auto; max-width: 100%; height: auto; }   /* the page picture, never cropped, never stretched; a portrait one capped as on its page (10/14) */
.tsl2-ex-current-title { display: block; font-size: 37px; line-height: 1; margin-top: 20px; text-wrap: balance; }
.tsl2-ex-current-artist { display: block; font-size: 29px; line-height: 1.05; color: var(--tsl2-grey); margin-top: 10px; }
.tsl2-ex-current-dates { display: block; font-size: 17px; line-height: 1.24; color: var(--tsl2-grey); margin-top: 10px; }
.tsl2-ex-more:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }   /* the exhibition cards themselves have no hover (art, not showtimes); the link at the end is a link like every other */
.tsl2-ex-upcoming-head { border-top: 1px solid var(--tsl2-line); padding-top: 40px; margin-top: 40px; }   /* the one line on a listing: what's on from what's coming */
.tsl2-ex-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; align-items: start; margin-top: 40px; }
.tsl2-exc { display: block; min-width: 0; }
.tsl2-exc-pic { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: #ececec; }
.tsl2-exc-img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }   /* the picture fills the landscape frame, cropped, whatever its shape (height: 100% did not take against the frame's aspect ratio) */
.tsl2-exc-title { display: block; font-size: 22px; line-height: 1.1; margin-top: 20px; }
.tsl2-exc-line { display: block; font-size: 17px; line-height: 1.24; color: var(--tsl2-grey); }
.tsl2-ex-more { display: inline-block; margin-top: 40px; }
.tsl2-ex-grid.is-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }   /* the past page: an archive to scan, three across */
@media (max-width: 1024px) { .tsl2-ex-grid.is-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) {
	.tsl2-ex-grid, .tsl2-ex-grid.is-3 { grid-template-columns: minmax(0, 1fr); }
	.tsl2-ex-current-title { font-size: 24px; line-height: 1.1; }
	.tsl2-ex-current-artist { font-size: 22px; line-height: 1.1; }
}

/* ---- Calendar (step 6): 20 below the header's line: the views as tabs, the month at 22 with its arrows, the key; the month grid
   (Tuesday and Wednesday narrow), cells in 1px lines, 10 inside, a showing as a box in its color; a phone gets the day list ---- */
body.tsl-v2.page-id-13963 main#content.tsl2-main { padding-top: 20px; }
.tsl2-cal-top { display: flex; align-items: baseline; gap: 20px 40px; flex-wrap: wrap; }
.tsl2-cal-tabs { margin-top: 0; }
.tsl2-cal-month { font-size: 22px; line-height: 1.1; display: flex; align-items: baseline; gap: 20px; }
.tsl2-cal-prev, .tsl2-cal-next { background: none; border: 0; padding: 0; margin: 0; font: inherit; font-size: 17px; line-height: 1.24; color: #000; cursor: pointer; }
.tsl2-cal-prev:disabled, .tsl2-cal-next:disabled { color: #ccc; cursor: default; }
.tsl2-cal-prev:hover:not(:disabled), .tsl2-cal-next:hover:not(:disabled) { color: var(--tsl2-grey); }
.tsl2-cal-key { margin-left: auto; display: flex; gap: 20px; }
.tsl2-cal-key span::before { content: ''; display: inline-block; width: 10px; height: 10px; background: var(--c); margin-right: 6px; vertical-align: -1px; }
.tsl2-cal-prints { margin-left: auto; display: flex; gap: 10px; }
.tsl2-cal-prints[hidden], .tsl2-cal-key[hidden], .tsl2-cal-paper[hidden], .tsl2-cal-standard[hidden] { display: none !important; }   /* the view decides which of the key and the print buttons shows */
.tsl2-cal-print { background: none; border: 1px solid var(--tsl2-line); padding: 3px 8px; margin: 0; font: inherit; font-size: 17px; line-height: 1.24; color: #000; cursor: pointer; }
.tsl2-cal-print:hover { background: #000; color: #fff; }
.tsl2-cal-dows, .tsl2-cal-grid { display: grid; grid-template-columns: 2fr 2fr 1fr 1fr 2fr 2fr 2fr; }
.tsl2-cal-dows { margin-top: 20px; }
.tsl2-cal-dow { font-size: 13px; line-height: 1.24; text-transform: uppercase; letter-spacing: 0.04em; padding: 0 10px 10px; }
.tsl2-cal-grid { border-top: 1px solid var(--tsl2-line); border-left: 1px solid var(--tsl2-line); }
.tsl2-cal-cell { border-right: 1px solid var(--tsl2-line); border-bottom: 1px solid var(--tsl2-line); padding: 10px; min-height: 140px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.tsl2-cal-num, .tsl2-cal-hrs, .tsl2-cal-closed, .tsl2-cal-notice { font-size: 13px; line-height: 1.24; }
.tsl2-cal-hrs { color: var(--tsl2-grey); margin-top: -10px; }
.tsl2-cal-closed { color: var(--tsl2-red); margin-top: -10px; }
.tsl2-cal-notice { color: var(--tsl2-grey); }
.tsl2-cal-cell.is-past > * { opacity: .4; }
.tsl2-cal-cell.is-today { outline: 2px solid var(--tsl2-red); outline-offset: -2px; }
.tsl2-cal-cell.is-today .tsl2-cal-num { color: var(--tsl2-red); }
.tsl2-cal-show { display: grid; grid-template-columns: auto 1fr; column-gap: 5px; border: 1px solid var(--c); padding: 3px 8px; font-size: 13px; line-height: 1.24; min-width: 0; }   /* the title and its notes hang beside the time */
.tsl2-cal-show:hover { background: var(--c); color: #fff; }
.tsl2-cal-show:hover .tsl2-cal-note { color: #fff; }
.tsl2-cal-note { display: block; color: var(--tsl2-grey); }
.tsl2-cal-ti { overflow-wrap: anywhere; }
.tsl2-cal-days { display: none; }
/* the Fridge Print page on screen: the paper in a grey hairline, the month scaled to fit it */
.tsl2-cal-paper { margin-top: 20px; border: 1px solid var(--tsl2-line); box-sizing: border-box; }
.tsl2-cal-sheet { position: relative; width: 100%; height: 100%; background: #fff; color: #000; overflow: hidden; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
.tsl2-cal-sz { display: flex; flex-direction: column; transform-origin: 0 0; }
.tsl2-cal-sz.is-measure { height: auto !important; }
.tsl2-cal-sz.is-measure .tsl2-cal-box { flex: none; grid-template-rows: none !important; }
.tsl2-cal-sh { display: flex; justify-content: space-between; align-items: center; font-size: 37px; line-height: 1; letter-spacing: -0.02em; word-spacing: -0.045em; }
.tsl2-cal-brand { display: flex; align-items: center; gap: 10px; }
.tsl2-cal-brand img { width: 43px; height: 43px; display: block; }
.tsl2-cal-box { flex: 1; min-height: 0; display: grid; margin-top: 10px; border-top: 1px solid var(--tsl2-line); border-left: 1px solid var(--tsl2-line); }
.tsl2-cal-pdow, .tsl2-cal-c { border-right: 1px solid var(--tsl2-line); border-bottom: 1px solid var(--tsl2-line); }
.tsl2-cal-pdow { font-size: 13px; line-height: 1.24; text-transform: uppercase; letter-spacing: 0.04em; padding: 10px; }
.tsl2-cal-c { padding: 10px; min-width: 0; }
.tsl2-cal-n { font-size: 17px; line-height: 1.24; }
.tsl2-cal-c.is-out .tsl2-cal-n { color: var(--tsl2-grey); }
.tsl2-cal-phrs { font-size: 13px; line-height: 1.24; color: var(--tsl2-grey); }
.tsl2-cal-pclosed { font-size: 13px; line-height: 1.24; color: var(--tsl2-red); }
.tsl2-cal-s { display: grid; grid-template-columns: auto 1fr; column-gap: 5px; font-size: 13px; line-height: 1.24; text-wrap: pretty; }
.tsl2-cal-s.is-hl { background: var(--t); margin: 0 -8px; padding: 3px 8px; }
.tsl2-cal-s.is-hl + .tsl2-cal-s.is-hl { margin-top: 1px; }
.tsl2-cal-s .tsl2-cal-ti { overflow-wrap: break-word; }
.tsl2-cal-ft { display: flex; justify-content: space-between; gap: 20px; margin-top: 10px; font-size: 13px; line-height: 1.24; }
.tsl2-cal-loading { margin-top: 20px; }
@media print {   /* the Fridge Print: only the paper prints, pinned to the page; the page size comes from the button pressed */
	html.tsl2-cal-printing body * { visibility: hidden !important; }
	html.tsl2-cal-printing .tsl2-cal-paper, html.tsl2-cal-printing .tsl2-cal-paper * { visibility: visible !important; }
	html.tsl2-cal-printing .tsl2-cal-paper { position: fixed; left: 0; top: 0; margin: 0; border: 0; background: #fff; }
}
@media (max-width: 600px) {
	.tsl2-cal-tabs, .tsl2-cal-key, .tsl2-cal-dows, .tsl2-cal-grid, .tsl2-cal-prints { display: none !important; }   /* a phone: the day list instead of the grid; no Fridge Print there */
	.tsl2-cal-paper { display: none !important; }
	.tsl2-cal-standard { display: block !important; }
	.tsl2-cal-month { width: 100%; justify-content: space-between; }
	.tsl2-cal-month .tsl2-cal-next { margin-left: 0; }
	.tsl2-cal-days { display: block; }
	.tsl2-cal-day-head { font-weight: 400; font-size: 22px; line-height: 1.1; margin: 40px 0 0; }
	.tsl2-cal-day:first-child .tsl2-cal-day-head { margin-top: 20px; }
	.tsl2-cal-rows { margin-top: 20px; border-bottom: 1px solid var(--tsl2-line); }
	.tsl2-cal-row { border-top: 1px solid var(--tsl2-line); padding: 10px 0; display: flex; justify-content: space-between; align-items: center; gap: 20px; font-size: 17px; line-height: 1.24; }
	.tsl2-cal-row.is-quiet { color: var(--tsl2-grey); }
	.tsl2-cal-row.is-quiet a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }   /* Store, the rare underlined link */
	.tsl2-cal-row-title { min-width: 0; }
	.tsl2-cal-row-title:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
	.tsl2-cal-row .tsl2-cal-note { font-size: 13px; }
	.tsl2-cal-row.is-past .tsl2-cal-row-title { color: var(--tsl2-grey); text-decoration: line-through; text-decoration-color: var(--tsl2-grey); }
	.tsl2-cal-row-times { display: flex; gap: 10px; flex: none; }
	.tsl2-cal-time { border: 1px solid var(--c); padding: 3px 8px; white-space: nowrap; }
	a.tsl2-cal-time:hover { background: var(--c); color: #fff; }
	.tsl2-cal-time.is-past { border-color: #ccc; color: #ccc; }
}


/* ===== Ticket flow (step 6, 10/13): restyle only. The popup, the cart bar, the checkout and the Order received page keep
   their live markup, scripts and wording (the ticket popup snippet, the checkout snippet, WooCommerce); these rules lay them
   out as the design has them. ===== */
/* the ticket popup: white, 520 wide, over the page darkened 60%; a black top with the title as the link to its page */
body.tsl-v2 #tsl-ticket-modal { --c: #FD4239; }
body.tsl-v2 #tsl-ticket-modal[data-type="movie"] { --c: #59CBE8; }
body.tsl-v2 #tsl-ticket-modal[data-type="gallery"] { --c: #00C58E; }
body.tsl-v2 .tsl-modal { padding: 20px; }
body.tsl-v2 .tsl-modal-overlay { background: rgba(0, 0, 0, .6); }
body.tsl-v2 .tsl-modal-content { max-width: 520px; width: 100%; background: #fff; border-radius: 0 !important; max-height: calc(100vh - 40px); overflow-y: auto; }
body.tsl-v2 .tsl-modal-body { padding: 0; }
body.tsl-v2 .tsl-modal-titlebar { margin: 0; padding: 20px 62px 20px 20px; background: #000; }
body.tsl-v2 #tsl-modal-title { margin: 0; padding: 0; font-size: 22px; line-height: 1.1; font-weight: 400; letter-spacing: 0; text-align: left; color: #fff !important; border: 0 !important; }
body.tsl-v2 .tsl-modal-title-link { color: #fff !important; text-decoration: none; }   /* the title is the link to its page: plain at rest, underlined on hover, like every link (10/13) */
body.tsl-v2 .tsl-modal-title-link:hover { color: #fff !important; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
body.tsl-v2 .tsl-modal-title-link[href="#"] { text-decoration: none !important; }
body.tsl-v2 #tsl-ticket-modal .tsl-modal-close { top: 20px !important; right: 20px !important; width: 24px !important; height: 24px !important; line-height: 24px !important; font-size: 22px !important; font-weight: 400 !important; color: #fff !important; text-align: center; }
body.tsl-v2 #tsl-ticket-modal .tsl-modal-close:hover { color: #999 !important; }
body.tsl-v2 #tsl-modal-showtimes { padding: 20px; }
body.tsl-v2 .tsl-modal-message, body.tsl-v2 .tsl-loading { padding: 0; font-size: 17px; line-height: 1.24; color: #666; text-align: left; }
body.tsl-v2 .tsl-showtime-block, body.tsl-v2 .tsl-showtime-block.tsl-sold-out { border: 0 !important; margin: 0; padding: 0; opacity: 1; }
body.tsl-v2 .tsl-showtime-block + .tsl-showtime-block { margin-top: 20px; }
body.tsl-v2 .tsl-showtime-columns { display: block; }
/* the day and time on one line: Friday, October 16 at 4:00pm */
body.tsl-v2 .tsl-date-column { min-width: 0; max-width: none; text-align: left; font-size: 17px; line-height: 1.24; color: #000; }
body.tsl-v2 .tsl-day-of-week, body.tsl-v2 .tsl-month-date, body.tsl-v2 .tsl-time { display: inline; margin: 0; font-size: 17px; line-height: 1.24; font-weight: 400; color: #000; }
body.tsl-v2 .tsl-day-of-week::after { content: ", "; }
body.tsl-v2 .tsl-month-date::after { content: " at "; }
body.tsl-v2 .tsl-special-note { display: block; margin-top: 10px; font-size: 13px; line-height: 1.24; color: #666; }
body.tsl-v2 .tsl-sold-out-badge { display: none; }
/* the ticket types as lined rows: the type, its price grey under it, the stepper on 1px lines */
body.tsl-v2 .tsl-tickets-column { flex: none; min-width: 0; }
body.tsl-v2 .tsl-tickets-card { background: none; padding: 0; margin-top: 20px; border-radius: 0; border-bottom: 1px solid var(--tsl2-line); }
body.tsl-v2 .tsl-tickets-card.tsl-sold-out-card { border-bottom: 0; }
body.tsl-v2 .tsl-sold-out-message { font-size: 17px; line-height: 1.24; color: var(--tsl2-grey); }
body.tsl-v2 .tsl-ticket-row, body.tsl-v2 .tsl-ticket-row + .tsl-ticket-row { border: 0 !important; border-top: 1px solid var(--tsl2-line) !important; padding: 10px 0; gap: 20px; }
body.tsl-v2 .tsl-ticket-info { gap: 0; }
body.tsl-v2 .tsl-ticket-type { font-size: 17px; line-height: 1.24; font-weight: 400; color: #000; }
body.tsl-v2 .tsl-ticket-price { font-size: 17px; line-height: 1.24; color: var(--tsl2-grey); }
body.tsl-v2 .tsl-qty-control { border: 1px solid var(--tsl2-line); border-radius: 0; background: none; overflow: visible; }
body.tsl-v2 .tsl-qty-minus, body.tsl-v2 .tsl-qty-plus { width: 36px; height: 36px; border: 0; background: none; font-family: inherit; font-size: 17px; font-weight: 400; color: #000; transition: none; }
body.tsl-v2 .tsl-qty-minus:hover, body.tsl-v2 .tsl-qty-plus:hover, body.tsl-v2 .tsl-qty-minus:active, body.tsl-v2 .tsl-qty-plus:active { background: none; color: var(--tsl2-grey); }
body.tsl-v2 .tsl-qty-value { width: 36px; line-height: 36px; font-size: 17px; font-weight: 400; color: #000; border-left: 1px solid var(--tsl2-line); border-right: 1px solid var(--tsl2-line); }
/* Checkout (n tickets) solid in the program's color, Add & keep browsing outlined in it, 10 apart; grey outlines until a ticket is chosen */
body.tsl-v2 .tsl-checkout-btn, body.tsl-v2 .tsl-keep-browsing-btn { display: block; width: 100%; margin: 0; padding: 10px; font-family: inherit; font-size: 17px; line-height: 1.24; font-weight: 400; text-align: center; border: 1px solid var(--c); border-radius: 0; cursor: pointer; transition: none; opacity: 1; }
body.tsl-v2 .tsl-checkout-btn { margin-top: 20px; background: var(--c); color: #fff !important; }
body.tsl-v2 .tsl-keep-browsing-btn { margin-top: 10px; background: none; color: #000; }
body.tsl-v2 .tsl-checkout-btn:hover:not(.disabled) { background: var(--c); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
body.tsl-v2 .tsl-keep-browsing-btn:hover:not(.disabled) { background: var(--c); border-color: var(--c); color: #fff; }
body.tsl-v2 .tsl-checkout-btn.disabled, body.tsl-v2 .tsl-keep-browsing-btn.disabled { background: none; border-color: #ccc; color: #999 !important; cursor: default; opacity: 1; }
body.tsl-v2 .tsl-checkout-btn.loading, body.tsl-v2 .tsl-keep-browsing-btn.loading { background: none; border-color: var(--tsl2-grey); color: var(--tsl2-grey) !important; cursor: wait; opacity: 1; }
/* the cart bar: black along the bottom, the count at the site edge, Check out as an outlined white button */
body.tsl-v2 #tsl-cart-bar { justify-content: space-between; padding: 10px max(var(--tsl2-edge), calc((100% - 1590px) / 2)); padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)); background: #000; color: #fff !important; font-size: 17px; line-height: 1.24; font-weight: 400; }
body.tsl-v2 #tsl-cart-bar:hover { background: #000; }
body.tsl-v2 #tsl-cart-bar .tsl-cart-bar-cta { color: #fff; font-weight: 400; border: 1px solid #fff; padding: 3px 8px; margin-left: 14px; }
body.tsl-v2 #tsl-cart-bar:hover .tsl-cart-bar-cta { background: #fff; color: #000; }
/* the checkout page: the title, then Your order (lined rows) beside Your details (the fields on 1px lines, the card box, Place order) */
body.tsl-v2 .tsl2-checkout .woocommerce { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 40px; align-items: start; margin-top: 40px; max-width: none; width: auto; }
body.tsl-v2 .tsl2-checkout .woocommerce-notices-wrapper { grid-column: 1 / -1; }
body.tsl-v2 .tsl2-checkout .woocommerce-notices-wrapper:empty { display: none; }
body.tsl-v2 .tsl2-co-head { grid-column: 1; grid-row: 1; padding-bottom: 20px; }   /* both headings 20 to their line: the order's is its first row's, the details' its own */
body.tsl-v2 .tsl2-co-head-details { grid-column: 2; padding-bottom: 20px; border-bottom: 1px solid var(--tsl2-line); }
body.tsl-v2 .tsl2-checkout .tsl-checkout-cart { grid-column: 1; grid-row: 2 / span 6; margin: 0; max-width: none; border: 0; border-bottom: 1px solid var(--tsl2-line); border-radius: 0; background: none; overflow: visible; font-family: inherit; }
body.tsl-v2 .tsl2-checkout #wc-square-digital-wallet, body.tsl-v2 .tsl2-checkout .wc-square-digital-wallet { grid-column: 2; grid-row: 2; display: block; max-width: none; margin: 0; padding: 0; }
body.tsl-v2 .tsl2-checkout #wc-square-digital-wallet > *, body.tsl-v2 .tsl2-checkout .wc-square-wallet-buttons { margin: 10px 0 0 !important; }
body.tsl-v2 .tsl2-checkout form.checkout { grid-column: 2; grid-row: 3; margin-top: 10px; max-width: none; width: auto; }
body.tsl-v2 .tsl2-checkout .tsl-checkout-coupon-bottom { grid-column: 2; grid-row: 4; max-width: none; margin: 20px 0 0; padding: 0; border: 0; background: none; }
body.tsl-v2 .tsl2-checkout .woocommerce-form-coupon-toggle, body.tsl-v2 .tsl2-checkout form.checkout_coupon, body.tsl-v2 .tsl2-checkout .tsl-edit-cart-link, body.tsl-v2 .tsl2-checkout #order_review_heading, body.tsl-v2 .tsl2-checkout .woocommerce-checkout-review-order-table, body.tsl-v2 .tsl2-checkout .woocommerce-SavedPaymentMethods-saveNew, body.tsl-v2 .tsl2-checkout .woocommerce-additional-fields, body.tsl-v2 .tsl2-checkout .woocommerce-billing-fields h3, body.tsl-v2 .tsl2-checkout .woocommerce-privacy-policy-text, body.tsl-v2 .tsl2-checkout #wc-square-google-pay, body.tsl-v2 .tsl2-checkout .gpay-button-container, body.tsl-v2 .tsl2-checkout #wc-square-wallet-divider, body.tsl-v2 .tsl2-checkout .sv-wc-payment-gateway-icon, body.tsl-v2 .tsl2-checkout .wc_payment_method > input.input-radio, body.tsl-v2 .tsl2-checkout .payment_box .form-row:has(.js-sv-wc-tokenize-payment), body.tsl-v2 .tsl2-checkout .return-to-shop, body.tsl-v2 .tsl2-checkout .wc-backward { display: none !important; }
/* the order's rows: the ticket (its count and price grey under it), the stepper, the price, ×; Booking fee; Total at Title 22 */
body.tsl-v2 .tsl-checkout-cart__items { padding: 0; }
body.tsl-v2 .tsl-checkout-item { display: flex; align-items: center; gap: 20px; padding: 10px 0; border: 0; border-top: 1px solid var(--tsl2-line); background: none; font-size: 17px; line-height: 1.24; transition: none; }
body.tsl-v2 .tsl-checkout-item.tsl-updating, body.tsl-v2 .tsl-checkout-item.tsl-removing { opacity: .5; pointer-events: none; }
body.tsl-v2 .tsl-checkout-item__info { flex: 1; min-width: 0; }
body.tsl-v2 .tsl-checkout-item__title { margin: 0; font-size: 17px; line-height: 1.24; font-weight: 400; color: #000; }
body.tsl-v2 .tsl-checkout-item__type, body.tsl-v2 .tsl-checkout-item__datetime { margin: 0; font-size: 17px; line-height: 1.24; color: var(--tsl2-grey); }
body.tsl-v2 .tsl-checkout-item__controls { display: flex; align-items: center; gap: 20px; flex: none; }
body.tsl-v2 .tsl-checkout-item__qty { order: 1; display: inline-flex; align-items: center; gap: 0; padding: 0; border: 1px solid var(--tsl2-line); border-radius: 0; }
body.tsl-v2 .tsl-checkout-item__total { order: 2; min-width: 0; font-size: 17px; font-weight: 400; color: #000; text-align: right; }
body.tsl-v2 .tsl-checkout-item__remove { order: 3; width: auto; height: auto; padding: 0; border: 0; background: none; font-family: inherit; font-size: 17px; line-height: 1.24; font-weight: 400; color: #000; transition: none; }
body.tsl-v2 .tsl-checkout-item__remove:hover { color: var(--tsl2-grey); }
body.tsl-v2 .tsl-checkout-cart .tsl-qty-btn { width: 36px; height: 36px; border: 0; background: none; font-family: inherit; font-size: 17px; font-weight: 400; color: #000; display: flex; align-items: center; justify-content: center; transition: none; }
body.tsl-v2 .tsl-checkout-cart .tsl-qty-btn:hover { background: none; color: var(--tsl2-grey); }
body.tsl-v2 .tsl-checkout-cart .tsl-qty-display { min-width: 0; width: 36px; line-height: 36px; text-align: center; font-size: 17px; font-weight: 400; border-left: 1px solid var(--tsl2-line); border-right: 1px solid var(--tsl2-line); }
body.tsl-v2 .tsl-checkout-cart__totals { padding: 0; background: none; }
body.tsl-v2 .tsl-checkout-total-row { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; margin: 0; padding: 10px 0; border-top: 1px solid var(--tsl2-line); font-size: 17px; line-height: 1.24; color: #000; }
body.tsl-v2 .tsl-checkout-total-row--coupon { color: #000; }
body.tsl-v2 .tsl-checkout-total-row--total { margin-top: 0; padding-top: 10px; border-top: 1px solid var(--tsl2-line); font-size: 22px; line-height: 1.1; font-weight: 400; color: #000; }
body.tsl-v2 .tsl-coupon-remove { width: auto; height: auto; padding: 0; border: 0; background: none; font-size: 17px; color: #000; }
body.tsl-v2 .tsl-coupon-remove:hover { color: var(--tsl2-grey); }
body.tsl-v2 .tsl-past-show-note { margin: 0 0 20px !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: none !important; font-size: 17px !important; line-height: 1.24 !important; color: var(--tsl2-grey) !important; }
/* the fields: labels at Small 13 10 above, 1px boxes 44 tall, 20 between; first and last name side by side */
body.tsl-v2 .tsl2-checkout #customer_details { max-width: none !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: none !important; }
body.tsl-v2 .tsl2-checkout .col2-set .col-1, body.tsl-v2 .tsl2-checkout .col2-set .col-2 { width: 100%; max-width: 100%; float: none; }
body.tsl-v2 .tsl2-checkout .woocommerce-billing-fields { max-width: none; margin: 0; }
body.tsl-v2 .tsl2-checkout .woocommerce-billing-fields__field-wrapper { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 20px; row-gap: 20px; margin: 0; padding: 0; border: 0; background: none; }
body.tsl-v2 .tsl2-checkout .form-row { margin: 0 !important; padding: 0 !important; width: auto !important; float: none !important; clear: none !important; }
body.tsl-v2 .tsl2-checkout .form-row-wide, body.tsl-v2 .tsl2-checkout #billing_email_field, body.tsl-v2 .tsl2-checkout #billing_phone_field, body.tsl-v2 .tsl2-checkout #order_comments_field { grid-column: 1 / -1; }
body.tsl-v2 .tsl2-checkout .tsl-event-notes-field { margin-top: 20px !important; }
body.tsl-v2 .tsl2-checkout .form-row label { display: block; margin: 0 0 10px !important; font-size: 13px !important; line-height: 1.24 !important; font-weight: 400 !important; color: #000 !important; }
body.tsl-v2 .tsl2-checkout .form-row label .required, body.tsl-v2 .tsl2-checkout .form-row label .optional { color: #000 !important; text-decoration: none; border: 0; }
body.tsl-v2 .tsl2-checkout .form-row .woocommerce-input-wrapper { display: block; }
body.tsl-v2 .tsl2-checkout .form-row input.input-text, body.tsl-v2 .tsl2-checkout .form-row textarea, body.tsl-v2 .tsl2-checkout .form-row select { display: block; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; margin: 0; padding: 10px !important; border: 1px solid var(--tsl2-line) !important; border-radius: 0 !important; background: #fff; box-shadow: none !important; font-family: inherit !important; font-size: 17px !important; line-height: 1.24 !important; color: #000; }
body.tsl-v2 .tsl2-checkout .form-row textarea { min-height: 88px; }
body.tsl-v2 .tsl2-checkout .form-row input.input-text:focus, body.tsl-v2 .tsl2-checkout .form-row textarea:focus { outline: none !important; border-color: #000 !important; }
body.tsl-v2 .tsl2-checkout .form-row.woocommerce-invalid input.input-text { border-color: #FD4239 !important; }
/* the card box: the card processor's own fields in a 1px box, its label at Small with the grey line beside it; Place order solid black under the box */
body.tsl-v2 .tsl2-checkout #payment { max-width: none !important; margin: 20px 0 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: none !important; }
body.tsl-v2 .tsl2-checkout #payment .payment_methods { margin: 0; padding: 20px !important; border: 1px solid var(--tsl2-line) !important; border-radius: 0; list-style: none; background: none; }
body.tsl-v2 .tsl2-checkout #payment .wc_payment_method { margin: 0; padding: 0; list-style: none; }
body.tsl-v2 .tsl2-checkout #payment .wc_payment_method > label { float: left; display: block; margin: 0 4px 0 0; padding: 0; font-size: 13px; line-height: 1.24; font-weight: 400; color: #000; }
body.tsl-v2 .tsl2-checkout #payment .payment_box { margin: 0 !important; padding: 0 !important; border: 0; border-radius: 0; background: none !important; }
body.tsl-v2 .tsl2-checkout #payment .payment_box::before { display: none !important; }
body.tsl-v2 .tsl2-checkout #payment .payment_box > p { margin: 0; font-size: 13px; line-height: 1.24; color: var(--tsl2-grey); }
body.tsl-v2 .tsl2-checkout #payment .payment_box > p::before { content: "· "; }
body.tsl-v2 .tsl2-checkout #payment .payment_box fieldset { clear: both; margin: 10px 0 0 !important; padding: 0 !important; border: 0 !important; }
body.tsl-v2 .tsl2-checkout .sq-card-iframe-container { border: 1px solid var(--tsl2-line) !important; border-radius: 0 !important; background: #fff; }
body.tsl-v2 .tsl2-checkout .sq-card-message { font-size: 13px; line-height: 1.24; margin: 10px 0 0 !important; }
body.tsl-v2 .tsl2-checkout .sq-card-message:empty { display: none; }   /* the card processor's error line takes no room until it has something to say */
body.tsl-v2 .tsl2-checkout .sq-payment-form, body.tsl-v2 .tsl2-checkout .wc-square-credit-card-hosted-field-wrapper { margin-bottom: 0 !important; }
body.tsl-v2 .tsl2-checkout #payment .place-order { max-width: none !important; margin: 0 !important; padding: 20px 0 0 !important; }
body.tsl-v2 .tsl2-checkout #place_order { display: block; width: 100% !important; margin: 0; padding: 10px !important; border: 1px solid var(--tsl2-line) !important; border-radius: 0 !important; background: #000 !important; color: #fff !important; font-family: inherit !important; font-size: 17px !important; line-height: 1.24 !important; font-weight: 400 !important; text-align: center; cursor: pointer; transition: none !important; }
body.tsl-v2 .tsl2-checkout #place_order:hover { background: #000 !important; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
body.tsl-v2 .tsl2-checkout #place_order.tsl-processing, body.tsl-v2 .tsl2-checkout #place_order.tsl-processing:hover { background: var(--tsl2-grey) !important; border-color: var(--tsl2-grey) !important; cursor: wait !important; opacity: 1 !important; text-decoration: none; }
/* Have a secret code? at Small; the code field and Apply as the page's field and outlined button */
body.tsl-v2 .tsl-coupon-summary { font-size: 13px; line-height: 1.24; font-weight: 400; color: #000; list-style: none; cursor: pointer; }
body.tsl-v2 .tsl-coupon-summary::-webkit-details-marker, body.tsl-v2 .tsl-coupon-summary::marker { display: none; content: ""; }
body.tsl-v2 .tsl-coupon-summary:hover { color: #000; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
body.tsl-v2 .tsl-coupon-details[open] .tsl-coupon-summary { margin-bottom: 10px; }
body.tsl-v2 .tsl-coupon-form { gap: 10px; }
body.tsl-v2 .tsl-coupon-input { padding: 10px; border: 1px solid var(--tsl2-line); border-radius: 0; font-family: inherit; font-size: 17px; line-height: 1.24; }
body.tsl-v2 .tsl-coupon-apply { padding: 10px 20px; border: 1px solid var(--tsl2-line); border-radius: 0; background: none; color: #000; font-family: inherit; font-size: 17px; line-height: 1.24; font-weight: 400; transition: none; }
body.tsl-v2 .tsl-coupon-apply:hover { background: #000; color: #fff; }
body.tsl-v2 .tsl-coupon-message { margin-top: 10px; font-size: 13px; line-height: 1.24; }
/* WooCommerce's notices on the checkout (a field missing, a card declined): plain red lines, no box */
body.tsl-v2 .tsl2-checkout .woocommerce-error, body.tsl-v2 .tsl2-checkout .woocommerce-message, body.tsl-v2 .tsl2-checkout .woocommerce-info { display: block; margin: 0 0 20px; padding: 0; border: 0; border-radius: 0; background: none; list-style: none; font-size: 17px; line-height: 1.24; color: #000; }
body.tsl-v2 .tsl2-checkout .woocommerce-error { color: #FD4239; }
body.tsl-v2 .tsl2-checkout .woocommerce-error li, body.tsl-v2 .tsl2-checkout .woocommerce-message li { margin: 0; padding: 0; list-style: none; }
body.tsl-v2 .tsl2-checkout .woocommerce-error::before, body.tsl-v2 .tsl2-checkout .woocommerce-message::before, body.tsl-v2 .tsl2-checkout .woocommerce-info::before { display: none; }
/* the Order received page's email check (a guest opening the link later): its lines at Base, the field as the checkout's, Verify outlined */
body.tsl-v2 .tsl2-checkout.is-received .woocommerce > p, body.tsl-v2 .tsl2-checkout.is-received .woocommerce-verify-email > p:not(.form-row) { margin: 0 0 20px; font-size: 17px; line-height: 1.24; }
body.tsl-v2 .tsl2-checkout .woocommerce-verify-email { max-width: 660px; }
body.tsl-v2 .tsl2-checkout .woocommerce-verify-email .form-row + .form-row { margin-top: 20px !important; }
body.tsl-v2 .tsl2-checkout .woocommerce-verify-email .button { display: inline-block; margin: 0; padding: 3px 8px; border: 1px solid var(--tsl2-line); border-radius: 0; background: none; color: #000; font-family: inherit; font-size: 17px; line-height: 1.24; font-weight: 400; cursor: pointer; }
body.tsl-v2 .tsl2-checkout .woocommerce-verify-email .button:hover { background: #000; color: #fff; }
/* Order received: the live message beside the order summary (the same lined rows); the questions line grey at the end */
body.tsl-v2 .tsl2-checkout.is-received .woocommerce { display: block; }
body.tsl-v2 .woocommerce-order { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 40px; align-items: start; grid-auto-flow: row dense; }
body.tsl-v2 .woocommerce-order > * { grid-column: 1; min-width: 0; }
body.tsl-v2 .woocommerce-order > .woocommerce-order-details { grid-column: 2; grid-row: 1 / span 20; margin: 0; }
body.tsl-v2 .woocommerce-order > .woocommerce-order-overview, body.tsl-v2 .woocommerce-order > .woocommerce-customer-details, body.tsl-v2 .woocommerce-order .woocommerce-table--order-details thead { display: none !important; }
body.tsl-v2 .woocommerce-order > p.woocommerce-notice { margin: 0; padding: 0; border: 0; background: none; font-size: 17px; line-height: 1.24; color: #000; }
body.tsl-v2 .woocommerce-order > p.woocommerce-notice::before { display: none; }
body.tsl-v2 .woocommerce-order > p.woocommerce-thankyou-order-received:first-of-type { font-size: 29px; line-height: 1.05; letter-spacing: -0.02em; word-spacing: -0.045em; text-wrap: balance; }   /* a section heading, Subhead 29 (10/13) */
body.tsl-v2 .woocommerce-order > p.woocommerce-notice + p.woocommerce-notice { margin-top: 20px; }
body.tsl-v2 .woocommerce-order > #tsl-newsletter-thankyou { order: 5; margin: 20px 0 0 !important; padding: 0 !important; border-radius: 0 !important; background: none !important; text-align: left !important; }
body.tsl-v2 .woocommerce-order > #tsl-newsletter-thankyou p { margin: 0 !important; font-size: 17px !important; line-height: 1.24 !important; }
body.tsl-v2 .woocommerce-order > #tsl-newsletter-thankyou #tsl-newsletter-btn { margin: 10px 0 0 !important; padding: 3px 8px !important; border: 1px solid var(--tsl2-line) !important; border-radius: 0 !important; background: none !important; color: #000 !important; font-family: inherit !important; font-size: 17px !important; line-height: 1.24 !important; }
body.tsl-v2 .woocommerce-order > #tsl-newsletter-thankyou #tsl-newsletter-btn:hover { background: #000 !important; color: #fff !important; }
body.tsl-v2 .woocommerce-order > #tsl-newsletter-thankyou #tsl-newsletter-msg { margin: 10px 0 0 !important; font-size: 17px !important; line-height: 1.24 !important; color: var(--tsl2-grey) !important; }
body.tsl-v2 .woocommerce-order > .tsl-order-questions { order: 6; margin: 20px 0 0; font-size: 17px; line-height: 1.24; color: var(--tsl2-grey); }
body.tsl-v2 .woocommerce-order-details__title { margin: 0; font-size: 29px; line-height: 1.05; font-weight: 400; letter-spacing: -0.02em; word-spacing: -0.045em; }
body.tsl-v2 .woocommerce-order .woocommerce-table--order-details { display: table; width: 100%; margin: 20px 0 0; border: 0; border-collapse: collapse; border-bottom: 1px solid var(--tsl2-line); font-size: 17px; line-height: 1.24; }
body.tsl-v2 .woocommerce-order .woocommerce-table--order-details th, body.tsl-v2 .woocommerce-order .woocommerce-table--order-details td { padding: 10px 0; border: 0; border-top: 1px solid var(--tsl2-line); background: none; font-weight: 400; font-size: 17px; line-height: 1.24; color: #000; text-align: left; vertical-align: top; }
body.tsl-v2 .woocommerce-order .woocommerce-table--order-details td:last-child, body.tsl-v2 .woocommerce-order .woocommerce-table--order-details th + td { text-align: right; padding-left: 20px; }
body.tsl-v2 .woocommerce-order .woocommerce-table--order-details .woocommerce-Price-amount { white-space: nowrap; }
body.tsl-v2 .woocommerce-order .woocommerce-table--order-details th { width: auto; white-space: nowrap; }
body.tsl-v2 .woocommerce-order .woocommerce-table--order-details tbody th, body.tsl-v2 .woocommerce-order .woocommerce-table--order-details td.product-name { white-space: normal; width: auto; }
body.tsl-v2 .woocommerce-order .woocommerce-table--order-details .product-quantity { font-weight: 400; color: var(--tsl2-grey); }
body.tsl-v2 .woocommerce-order .woocommerce-table--order-details tfoot tr:not(:has(.woocommerce-Price-amount)) td { text-align: left; white-space: normal; }   /* a row with words, not a sum (the buyer's note), reads from the left */
body.tsl-v2 .woocommerce-order .woocommerce-table--order-details tfoot tr:has(.tsl2-order-total) th, body.tsl-v2 .woocommerce-order .woocommerce-table--order-details tfoot tr:has(.tsl2-order-total) td { font-size: 22px; line-height: 1.1; }   /* the Total row at Title 22 (its value is wrapped by the theme) */
body.tsl-v2 .woocommerce-order .woocommerce-table--order-details .wc-item-meta, body.tsl-v2 .woocommerce-order .woocommerce-table--order-details .wc-item-meta li { margin: 0; padding: 0; list-style: none; font-size: 17px; color: var(--tsl2-grey); }
/* a membership or donation confirmation (the live wording) in the same two columns, its order summary shown */
body.tsl-v2 .woocommerce-order > .tsl-confirmation { max-width: none !important; margin: 0 !important; padding: 0 !important; text-align: left !important; letter-spacing: 0 !important; }
body.tsl-v2 .woocommerce-order > .woocommerce-order-details { display: block !important; }
body.tsl-v2 .tsl-confirmation__icon { display: none !important; }
body.tsl-v2 .tsl-confirmation__title { margin: 0 !important; font-size: 29px !important; line-height: 1.05 !important; font-weight: 400 !important; letter-spacing: -0.02em !important; word-spacing: -0.045em !important; }
body.tsl-v2 .tsl-confirmation__body, body.tsl-v2 .tsl-confirmation__next-body { margin: 20px 0 0 !important; font-size: 17px !important; line-height: 1.24 !important; color: #000 !important; }
body.tsl-v2 .tsl-confirmation__next { margin: 20px 0 0 !important; padding: 0 !important; border: 0 !important; text-align: left !important; }
body.tsl-v2 .tsl-confirmation__next-title { margin: 0 !important; font-size: 17px !important; line-height: 1.24 !important; font-weight: 400 !important; }
body.tsl-v2 .tsl-confirmation__next-body { margin-top: 0 !important; }
body.tsl-v2 .tsl-confirmation__questions { margin: 20px 0 0 !important; font-size: 17px !important; line-height: 1.24 !important; color: var(--tsl2-grey) !important; }
body.tsl-v2 .tsl-confirmation__questions a { border: 0 !important; color: #000 !important; }
body.tsl-v2 .tsl-confirmation__questions a:hover { text-decoration: underline !important; text-decoration-thickness: 1px !important; text-underline-offset: 3px !important; }
body.tsl-v2 .tsl-confirmation__cta { display: inline-block !important; margin-top: 20px !important; padding: 3px 8px !important; border: 1px solid var(--tsl2-line) !important; border-radius: 0 !important; background: none !important; color: #000 !important; font-family: inherit !important; font-size: 17px !important; line-height: 1.24 !important; font-style: normal !important; font-weight: 400 !important; transition: none !important; }
body.tsl-v2 .tsl-confirmation__cta:hover { background: #000 !important; color: #fff !important; }
@media (max-width: 600px) {
	body.tsl-v2 .tsl2-checkout .woocommerce { grid-template-columns: minmax(0, 1fr); }
	body.tsl-v2 .tsl2-co-head, body.tsl-v2 .tsl2-co-head-details, body.tsl-v2 .tsl2-checkout .tsl-checkout-cart, body.tsl-v2 .tsl2-checkout #wc-square-digital-wallet, body.tsl-v2 .tsl2-checkout .wc-square-digital-wallet, body.tsl-v2 .tsl2-checkout form.checkout, body.tsl-v2 .tsl2-checkout .tsl-checkout-coupon-bottom { grid-column: 1; grid-row: auto; }
	body.tsl-v2 .tsl2-co-head-details { margin-top: 40px; }
	body.tsl-v2 .tsl2-checkout .woocommerce-billing-fields__field-wrapper { grid-template-columns: minmax(0, 1fr); }
	body.tsl-v2 .tsl-checkout-item { flex-wrap: wrap; row-gap: 10px; }
	body.tsl-v2 .tsl-checkout-item__info { flex: 1 1 100%; }
	body.tsl-v2 .tsl-checkout-item__controls { width: 100%; }
	body.tsl-v2 .tsl-checkout-item__total { margin-left: auto; }
	body.tsl-v2 .woocommerce-order { grid-template-columns: minmax(0, 1fr); }
	body.tsl-v2 .woocommerce-order > .woocommerce-order-details { grid-column: 1; grid-row: auto; order: 9; margin-top: 40px; }
}