.tc-page{max-width:1200px;margin:40px auto;padding:0 20px;font-family:var(--wp--preset--font-family--body-font,-apple-system,BlinkMacSystemFont,'Inter',sans-serif);color:var(--wp--preset--color--contrast,#16181d);position:relative;} .tc-columns{display:flex;gap:24px;align-items:flex-start;} .tc-main{flex:1;min-width:0;max-width:900px;} .tc-page-noad .tc-main{max-width:1200px;} .tc-adslot{flex:0 0 300px;} @media(max-width:1000px){.tc-columns{flex-direction:column;}.tc-adslot{display:none;}} .tc-back-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:30px;} .tc-back{display:inline-block;font-size:15px;font-weight:600;color:#4f46e5;text-decoration:none;padding:9px 16px;border-radius:8px;background:#f4f5f7;} .tc-print-btn{display:inline-flex;align-items:center;gap:6px;font-size:15px;font-weight:600;color:#4f46e5;text-decoration:none;padding:9px 16px;border-radius:8px;background:#f4f5f7;border:none;cursor:pointer;font-family:inherit;} .tc-print-btn:hover{background:#e6e7eb;} .tc-nav-btns{display:flex;gap:10px;margin-left:auto;} .tc-nav-btn{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;font-size:16px;font-weight:600;color:#4f46e5;text-decoration:none;border-radius:8px;background:#f4f5f7;} .tc-nav-btn:hover{background:#e6e7eb;} .tc-back:hover{background:#e6e7eb;} .tc-eyebrow{font-weight:600;font-size:15px;letter-spacing:.08em;text-transform:uppercase;color:#4f46e5;margin-bottom:8px;} .tc-page h1{font-size:34px;margin:0 0 8px;color:#16181d;} .tc-kw{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:20px;} .tc-kw span{font-size:15px;color:#8a8f98;background:#f4f5f7;border-radius:999px;padding:6px 13px;} .tc-themes{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:22px;} .tc-themes button{font-size:15px;font-weight:500;padding:8px 16px;border-radius:999px;border:1px solid #e6e7eb;background:#fff;color:#8a8f98;cursor:pointer;font-family:inherit;} .tc-themes button:hover{border-color:#4f46e5;color:var(--wp--preset--color--contrast,#16181d);} .tc-themes button.active{background:#4f46e5;border-color:#4f46e5;color:#fff;} .tc-layout{display:flex;gap:36px;align-items:flex-start;} .tc-art{flex:0 0 300px;background:#f4f5f7;border-radius:16px;overflow:hidden;border:1px solid #e6e7eb;padding:14px;} .tc-art img{width:100%;height:auto;display:block;object-fit:contain;} .tc-art .tc-noimg{aspect-ratio:1144/1919;display:flex;align-items:center;justify-content:center;color:#8a8f98;font-size:15px;} .tc-body{flex:1;min-width:280px;} .tc-section{border-left:3px solid #e6e7eb;padding-left:16px;margin-bottom:20px;} .tc-notes{margin-bottom:20px;} .tc-section.tc-upright{border-left-color:#4f46e5;} .tc-label{font-weight:600;font-size:15px;letter-spacing:.03em;text-transform:uppercase;color:#4f46e5;margin-bottom:6px;} .tc-text{font-size:19px;font-weight:400;line-height:1.6;} .tc-desc .tc-text{color:#8a8f98;font-style:italic;} @media(max-width:700px){ .tc-layout{flex-direction:column;} .tc-art{flex:0 0 auto;max-width:280px;margin:0 auto;} .tc-eyebrow,.tc-page h1{text-align:center;} .tc-kw{justify-content:center;} .tc-themes{justify-content:center;} .tc-back-row{justify-content:center;} .tc-nav-btns{margin-left:0;} } .tc-print-notes{display:none;} .tc-print-notes-label{display:none;} .tc-print-header{display:none;} .tc-print-aspect{display:none;} @media print{ /* The script moves .tc-print-root onto the body and puts tc-printing on , so this hides every other child of the body without having to name the theme's header, footer or wrappers - that naming was done with :has(), and where :has() went unread the header kept its place at the top of the flow and pushed the card onto page two. The rule below is the whole fix; the older selectors stay underneath as a fallback for a browser that reaches print with the script blocked. */ html.tc-printing body > *{display:none !important;} /* One sheet: the card at the top, ruled lines filling whatever is left. The card is NOT clipped to half. A previous attempt gave it exactly 50% and hid the overflow, which did not make it fit - it cut the verdict off mid-sentence. The card takes the height it needs and the notes take the rest, with a floor so there is always a usable amount of room to write in. Everything the card prints is sized so that the two land near half and half on their own. The height is in millimetres rather than a percentage or vh, neither of which a print layout resolves the way you would hope. 245mm fits inside both A4 and US Letter once the 12mm margin is taken off, so the sheet never spills onto a second page on either. */ html.tc-printing body > .tc-print-root{ display:flex !important;flex-direction:column; height:252mm; } html.tc-printing .tc-print-header{flex:0 0 auto;} html.tc-printing .tc-print-root > .tc-page{flex:0 0 auto;min-height:0;} html.tc-printing .tc-print-notes-label{flex:0 0 auto;} html.tc-printing .tc-print-notes{flex:1 1 auto;min-height:80mm;height:auto;} html.tc-printing, html.tc-printing body{ margin:0 !important;padding:0 !important; height:auto !important;min-height:0 !important;overflow:visible !important; } body:has(.tc-page) header, body:has(.tc-page) footer, body:has(.tc-page) nav{display:none !important;} .tc-back-row, .tc-adslot, .tp-crosslinks, .tc-nav-btns, .tc-print-btn{display:none !important;} @page{margin:12mm;} .tc-print-root{display:block;margin:0;padding:0;} /* Only small blocks get break-inside:avoid, and .tc-page is not one of them. It is the whole card, and a card is usually taller than a sheet of paper - so telling the browser not to split it left it no choice but to start it on a fresh page, which is exactly the blank first page: page one held nothing but the little printed-from header, page two held everything. .tc-layout came out for the same reason. Sections and the notes box are short enough to keep whole, and those stay. */ .tc-section, .tc-print-notes{page-break-inside:avoid;break-inside:avoid;} .tc-print-header{page-break-after:avoid;break-after:avoid;} .tc-themes button{-webkit-print-color-adjust:exact;print-color-adjust:exact;} .tc-page{max-width:none;margin:0;padding:0;} .tc-columns{display:block;} .tc-main{max-width:none;} /* The two columns are sized to end together. The old sheet gave the art 180px and let the text run on past the bottom of it, which left an empty rectangle about 45 by 50mm under the picture - a sixth of the sheet holding nothing. At 53mm the art comes to 91mm tall, which is what the column beside it measures once the row of buttons is gone, so the two of them finish level and the hole has nowhere to be. */ .tc-layout{gap:7mm;} .tc-art{flex:0 0 53mm;border:1px solid #d5d7dd;background:#fff;padding:2mm;border-radius:3px;} .tc-eyebrow{font-size:10.5px;margin-bottom:2px;} .tc-page h1{font-size:19px;margin-bottom:4px;} /* Keywords as words. On screen they are chips because they are things you can tap; on paper a chip is a grey rectangle around a word, three of them across the top of the sheet, and the ink buys nothing. */ .tc-kw{gap:0;margin-bottom:7px;} .tc-kw span{font-size:10.5px;padding:0;background:none;color:#666;} /* Non-breaking spaces around the dot: a plain space at the start of a generated string is collapsed away and the words run together. */ .tc-kw span + span::before{content:"\00a0\00b7\00a0";color:#aaa;} /* The row of buttons is a control: on paper it is six pills with no way to press them, five of which are not what the sheet is showing. The line underneath says the same thing in one word. */ .tc-themes{display:none;} /* A divider rather than another heading: violet uppercase would read as a third section label next to UPRIGHT and REVERSED, when what it actually says is "everything below is this aspect". Grey, with a rule running out to the right margin. */ .tc-print-aspect{ display:flex;align-items:center;gap:6px;margin:0 0 6px; font-weight:600;font-size:10px;letter-spacing:.1em;text-transform:uppercase; color:#777; } .tc-print-aspect::after{content:"";flex:1 1 auto;height:1px;background:#ddd;} .tc-print-aspect:empty{display:none;} .tc-section{padding-left:9px;margin-bottom:6px;} .tc-label{font-size:10.5px;} .tc-text{font-size:11px;line-height:1.32;} .tc-desc{margin-bottom:0;} .tc-print-notes-label{ display:block;margin-top:6mm; font-weight:600;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase; color:#666; } .tc-print-notes{ display:block;margin-top:3mm; /* Pixels rather than millimetres: a repeating gradient measured in mm is read differently by different print engines, and the rule that worked before this was written in px. 26px is a comfortable line height to write on. */ background-image:repeating-linear-gradient(to bottom, transparent, transparent 26px, #bbb 26px, #bbb 27px); -webkit-print-color-adjust:exact;print-color-adjust:exact; /* No height here on purpose: the flex rule at the top of this block gives it everything the card did not use. A number here would be the thing that decides where the lines stop, and that was how the sheet ended up with 30mm of nothing under them. */ } .tc-print-header{ display:flex;align-items:center;justify-content:space-between;gap:16px; margin-bottom:12px;padding-bottom:6px;border-bottom:1px solid #ddd; -webkit-print-color-adjust:exact;print-color-adjust:exact; } .tc-print-logo{flex:0 0 auto;width:110px;} .tc-print-logo svg{display:block;width:100%;height:auto;} .tc-print-tip{flex:1;font-size:11px;color:#888;line-height:1.35;text-align:right;} .tc-print-tip strong{color:#4f46e5;font-weight:700;} } /* --- yes or no, on the card page ---------------------------------------- A framed box rather than another left-border section. The sections above it are prose about the card; this is a verdict, and reading it as one more paragraph was the complaint - it disappeared into what surrounded it. So it gets a border on all four sides, a tinted ground and its own padding, and it drops the left accent bar that made it look like a sibling of the upright and reversed blocks. */ .tc-section.tc-yesno{ border:1px solid var(--ta-line,#e6e7eb); border-left:1px solid var(--ta-line,#e6e7eb); border-radius:var(--ta-radius-card,16px); background:var(--ta-surface-alt,#f4f5f7); padding:18px 20px; margin-bottom:24px; } .tc-yesno .tc-label{margin-bottom:12px;} .tc-yesno .tc-yesno-row{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px;margin-bottom:14px;} .tc-yesno .tc-yesno-row:last-child{margin-bottom:0;} .tc-yesno-side{font-size:15px;font-weight:600;color:var(--ta-muted,#8a8f98);min-width:104px;} .tc-yesno-chip{ font-size:15px;font-weight:700;line-height:1; border-radius:var(--ta-radius-pill,999px);padding:7px 14px; background:#fff;color:#16181d; } .tc-yesno-chip.tc-lean-yes{background:#e7f5ec;color:#1b7a3e;} .tc-yesno-chip.tc-lean-no{background:#fdecea;color:#b3261e;} .tc-yesno-chip.tc-lean-mixed{background:#ece9ff;color:#4f46e5;} .tc-yesno-why{flex:1 1 100%;font-size:17px;line-height:1.55;color:#16181d;} @media(max-width:640px){ .tc-section.tc-yesno{padding:16px;} .tc-yesno .tc-yesno-row{justify-content:center;text-align:center;} .tc-yesno-side{min-width:0;} } /* --- the verdict box on paper ------------------------------------------- Last in the file, and that is the point. These rules were first written inside the @media print block higher up, where they lost every argument with the screen rules above - @media adds no specificity, so the later plain rule wins even on paper. The verdict kept its screen padding and its 17px reason text, took eighty-five millimetres, and ran off the bottom of the card's half into the ruled lines. Sitting after the screen rules, they win. On paper it is a compact box: heading, then one line each for upright and reversed. */ @media print{ .tc-section.tc-yesno{padding:8px 10px;margin-bottom:0;border-radius:8px;} .tc-yesno .tc-label{margin-bottom:5px;} .tc-yesno .tc-yesno-row{margin-bottom:5px;gap:6px;} .tc-yesno-side{font-size:10.5px;min-width:74px;} .tc-yesno-chip{ font-size:10.5px;padding:3px 8px; -webkit-print-color-adjust:exact;print-color-adjust:exact; } .tc-yesno-why{font-size:10.5px;line-height:1.3;} } /* --- the block's own width, against the theme's layout rule --------------- Block themes print a layout rule of their own - .wp-container-… > * - that clamps every child of the post content to the theme's content size (620px in Twenty Twenty-Four). It carries the same specificity as a plain class and lands in after our stylesheet, so it wins on order alone and the block is squeezed into a column meant for prose. Naming the content container puts our width back in front on specificity, without !important, which would also override the narrower widths this block sets for itself on small screens. Last in the file on purpose: @media adds no specificity, so a later plain rule wins on paper as well as on screen. */ .entry-content .tc-page, .wp-block-post-content .tc-page, .wp-site-blocks .tc-page{max-width:1200px;}