/* The "paper" look for the Practitioner directory (2 Oct 2026): a printed classified directory. Yellow paper, black ink, four tight columns,
   square heavy boxes, the phone number biggest of all in a black band, bullet lists, tiny free lines, black heading bars, filler boxes.
   Loaded AFTER directory.css, only when the paper look is on (?look=paper, remembered in a cookie). Peter's reference photos: real directory pages. */
@import url('https://fonts.googleapis.com/css2?family=Archivo+Narrow:wght@400;600;700&family=Archivo:wght@500;800;900&display=swap');
:root{--paper:#f6d94a;--paper-2:#f0cd33;--ink:#111;--rule:#111}
body{background:#3a3a36!important;color:var(--ink)}
main.wrap{background:var(--paper);padding:14px 16px 26px;box-shadow:0 0 0 1px #000,0 18px 40px -18px rgba(0,0,0,.7);margin-top:14px;margin-bottom:26px;
  background-image:radial-gradient(rgba(0,0,0,.035) 1px,transparent 1px);background-size:3px 3px}
main.wrap a{color:var(--ink)}
.crumbs,.crumbs a{color:#3d3410!important;font:600 12px 'Archivo Narrow',Arial,sans-serif;text-transform:uppercase;letter-spacing:.06em}

/* page heading: a black tab with yellow type, like a category heading */
.band{background:var(--ink)!important;border:0!important;border-radius:0!important;padding:10px 14px!important}
.band h1{color:var(--paper)!important;font:900 30px/1.05 Archivo,Arial,sans-serif!important;text-transform:uppercase;letter-spacing:.01em}
.band span{color:var(--paper)!important;font:600 14px 'Archivo Narrow',Arial,sans-serif;text-transform:uppercase}
.sub{background:transparent!important;border:0!important;border-bottom:2px solid var(--rule)!important;border-radius:0!important;padding:6px 2px!important;font:400 13px 'Archivo Narrow',Arial,sans-serif}
.intro{font:400 14.5px/1.4 'Archivo Narrow',Arial,sans-serif;max-width:none}.rel{font:400 13.5px 'Archivo Narrow',Arial,sans-serif;color:var(--ink)}
.rel a,.sub a{color:var(--ink)!important;font-weight:600}
.legend,.note{font:400 12.5px/1.35 'Archivo Narrow',Arial,sans-serif;color:#2b2408}

/* search: a boxed advert of our own */
.searchbar{background:var(--paper)!important;border:3px double var(--rule)!important;border-radius:0!important}
.searchbar label{font:800 14px Archivo,Arial,sans-serif;text-transform:uppercase}
.sbox input{border:2px solid var(--rule)!important;border-radius:0!important;background:#fffbe6}
.sbox button{background:var(--ink)!important;color:var(--paper)!important;border:0!important;border-radius:0!important;font:800 14px Archivo,Arial,sans-serif!important;text-transform:uppercase}
.kc{border-radius:0!important;border:1.5px solid var(--rule)!important;background:transparent!important;color:var(--ink)!important;font:600 12.5px 'Archivo Narrow',Arial,sans-serif!important;text-transform:uppercase;padding:4px 9px!important}
.kc.on{background:var(--ink)!important;color:var(--paper)!important}.kc span{color:inherit!important;opacity:.7}

/* town / section heading bars */
.sec{background:var(--ink)!important;border-radius:0!important;margin:20px 0 0!important;padding:5px 10px!important}
.sec h2{color:var(--paper)!important;font:900 17px Archivo,Arial,sans-serif!important;text-transform:uppercase}
.sec small{color:var(--paper)!important;opacity:.8;font:600 12px 'Archivo Narrow',Arial,sans-serif!important;text-transform:uppercase}
.sec a{color:var(--paper)!important;border:0!important;font:600 12px 'Archivo Narrow',Arial,sans-serif!important;text-transform:uppercase;text-decoration:underline!important}
h2.k{font:900 15px Archivo,Arial,sans-serif;text-transform:uppercase;border-top:4px solid var(--rule);padding-top:6px;margin:26px 0 -12px}

/* the page: four tight columns with rules, adverts packed like a jigsaw */
.cols{column-count:4!important;column-gap:13px!important;column-rule:1px solid var(--rule);padding-top:8px;border-bottom:2px solid var(--rule);padding-bottom:6px}
@media(max-width:1100px){.cols{column-count:3!important}}
@media(max-width:800px){.cols{column-count:2!important}}
@media(max-width:520px){.cols{column-count:1!important;column-rule:0}}

/* free lines: tiny, name ..... town  number */
.lines{background:transparent!important;border:0!important;padding:0!important;margin:0!important}
.row{display:flex;flex-wrap:wrap;align-items:baseline;gap:3px;padding:1.5px 0!important;border:0!important;font:400 11.5px/1.25 'Archivo Narrow',Arial,sans-serif!important;break-inside:avoid}
.row b{font-weight:600!important;font-size:11.5px}.row b a{color:var(--ink)!important}
.row .dots{flex:1;border-bottom:1px dotted #111!important;transform:translateY(-3px);min-width:10px}
.row .town{color:var(--ink)!important;font-size:11px!important}
.row .ph{color:var(--ink)!important;font:700 11.5px 'Archivo Narrow',Arial,sans-serif!important;max-width:none!important}
.row .ph.muted{font-weight:400!important;font-style:italic}
.row .tag{flex-basis:100%;font-size:10.5px!important;color:#2b2408!important;padding-left:8px}
.row .cl,.ad .cl{font:400 9.5px 'Archivo Narrow',Arial,sans-serif!important;color:#5b4d12!important;margin-left:4px;text-transform:uppercase;letter-spacing:.03em}

/* boxed adverts: square, heavy black border, on the yellow paper */
.ad{background:transparent!important;border:2.5px solid var(--rule)!important;border-radius:0!important;box-shadow:none!important;padding:8px 9px 0!important;margin:7px 0!important;break-inside:avoid;position:relative;overflow:hidden}
.ad.color{border-color:var(--ad)!important}
.ad:nth-of-type(3n+2){border-style:double!important;border-width:5px!important}
.ad:nth-of-type(3n){border-radius:14px!important}
.ad .top{display:block!important;text-align:center}
.ad .av{display:none!important}
.ad h3{font:900 19px/1.02 Archivo,Arial,sans-serif!important;text-transform:uppercase;letter-spacing:.01em;margin:2px 0 3px!important}
.ad h3 a{color:var(--ink)!important}
.ad .where{font:600 12px 'Archivo Narrow',Arial,sans-serif!important;color:var(--ink)!important;text-transform:uppercase;letter-spacing:.05em;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:2px 0;margin:3px 0 6px}
.ad p{font:400 13px/1.3 'Archivo Narrow',Arial,sans-serif!important;margin:5px 0!important;text-align:center}
.ad .yellnote{font:400 11.5px 'Archivo Narrow',Arial,sans-serif!important;color:var(--ink)!important;text-align:center;margin:0 0 3px!important}
.ad .yellnote a{color:var(--ink)!important}
/* topics as a bullet list, the way services were listed */
.ad .chips{display:block!important;margin:4px 0 7px!important;columns:2;column-gap:8px;text-align:left}
.ad .chips span{display:block!important;background:none!important;border:0!important;border-radius:0!important;padding:0 0 0 11px!important;color:var(--ink)!important;font:600 12.5px/1.3 'Archivo Narrow',Arial,sans-serif!important;position:relative;text-transform:uppercase}
.ad .chips span:before{content:"";position:absolute;left:1px;top:.45em;width:5px;height:5px;background:var(--ink);border-radius:50%}
.ad .offer{background:transparent!important;border:1.5px dashed var(--rule)!important;border-radius:0!important;color:var(--ink)!important;font:700 12.5px 'Archivo Narrow',Arial,sans-serif!important;text-align:center;text-transform:uppercase}
/* the phone number: the biggest thing in the advert, reversed out of black, right across the bottom */
.ad .act{display:block!important;margin:6px -9px 0!important}
.ad .tel{display:block;background:var(--ink);color:var(--paper)!important;font:900 23px/1.15 Archivo,Arial,sans-serif!important;text-align:center;padding:5px 4px;letter-spacing:.01em}
.ad.color .tel{background:var(--ad)}
.ad .bk{display:block!important;background:transparent!important;color:var(--ink)!important;border:0!important;border-radius:0!important;font:700 11.5px 'Archivo Narrow',Arial,sans-serif!important;text-transform:uppercase;letter-spacing:.06em;text-align:center;padding:3px 0 4px!important;text-decoration:underline}
.ad .bk.off{text-decoration:none;opacity:.6}
.ad .cl{display:block!important;text-align:center;margin:0 0 4px!important}
/* photos printed in black on the yellow */
.ad .photo{border-radius:0!important;filter:grayscale(1) contrast(1.15);mix-blend-mode:multiply;margin:4px 0 6px!important;height:92px!important;border:1px solid var(--rule)}
/* the ribbon becomes a small black corner flash */
.ribbon{position:absolute!important;top:0!important;left:0!important;right:auto!important;background:var(--ink)!important;color:var(--paper)!important;border-radius:0!important;font:700 9.5px 'Archivo Narrow',Arial,sans-serif!important;text-transform:uppercase;letter-spacing:.05em;padding:1px 6px!important;box-shadow:none!important}
.ad:has(.ribbon){padding-top:18px!important}

/* a full advert runs right across the page */
.ad.full{display:grid!important;grid-template-columns:230px 1fr 250px!important;gap:14px;align-items:center;border-width:4px!important;padding:12px 12px!important;margin:10px 0 4px!important;border-radius:0!important;border-style:solid!important}
.ad.full .photo{height:130px!important;margin:0!important}
.ad.full h3{font-size:30px!important;text-align:left}.ad.full .top{text-align:left}.ad.full p{text-align:left;font-size:15px!important}
.ad.full .right{display:block}.ad.full .right .tel{font-size:30px!important;padding:10px 6px}
.ad.full .right .bk{font-size:13px!important;padding:6px 0!important}
@media(max-width:800px){.ad.full{grid-template-columns:1fr!important}.ad.full h3{font-size:24px!important}}

/* filler boxes, the way gaps were filled */
.filler{break-inside:avoid;border:2px solid var(--rule);margin:7px 0;padding:8px 9px;text-align:center;font:700 13px/1.25 'Archivo Narrow',Arial,sans-serif;text-transform:uppercase;background:var(--paper-2)}
.filler b{display:block;font:900 17px/1.05 Archivo,Arial,sans-serif;margin-bottom:3px}
.filler a{color:var(--ink);text-decoration:underline}
.filler.bubble{border-radius:50% / 40%;border-width:2.5px;padding:14px 16px}
.empty{background:transparent!important;border:2px dashed var(--rule)!important;border-radius:0!important}
footer.site{margin-top:0!important}
.lookswitch{position:fixed;right:12px;bottom:12px;z-index:60;background:#111;color:#f6d94a;font:700 12px Arial,sans-serif;padding:8px 12px;text-decoration:none;border:1px solid #f6d94a}

/* lines stay on ONE line at every width (the base stylesheet stacks the phone under the name on phones); the name links to the listing, so no "claim" link per line */
.row{flex-wrap:nowrap!important}
.row .ph{flex-basis:auto!important;white-space:nowrap}
.row b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.row .cl{display:none!important}
.row .tag{display:none!important}
.row.has-tag{flex-wrap:wrap!important}
@media(max-width:520px){.row{font-size:13px!important;padding:4px 0!important}.row b,.row .ph{font-size:13px!important}}

/* 2 Oct, Peter: the paper is faded and pale; the HEADINGS are the stronger yellow (black type on a yellow bar), as in the real pages. */
:root{--paper:#fbf5d0;--paper-2:#f4cb2e;--head:#f4cb2e}
main.wrap{background-color:var(--paper);background-image:radial-gradient(rgba(90,70,0,.045) 1px,transparent 1px)}
.band{background:var(--head)!important;border:1px solid #111!important}
.band h1{color:#111!important}.band span{color:#111!important}
.sec{background:var(--head)!important;border:1px solid #111!important}
.sec h2{color:#111!important}.sec small{color:#111!important;opacity:.75}.sec a{color:#111!important}
h2.k{background:var(--head);border:1px solid #111;border-top:4px solid #111;padding:5px 10px;margin:26px 0 -12px}
.kc.on{background:#111!important;color:var(--head)!important}
.sbox button{color:var(--head)!important}
.searchbar{background:var(--paper)!important}
.sbox input{background:#fffdf0}
.ad .tel{color:var(--paper)!important}
.ribbon{color:var(--head)!important}
.filler{background:var(--head)}
.ad .photo{filter:grayscale(1) contrast(1.1);mix-blend-mode:multiply}

/* 2 Oct, Peter: "a little lighter" */
:root{--paper:#fdf9e3}
main.wrap{background-image:radial-gradient(rgba(90,70,0,.03) 1px,transparent 1px)}
.sbox input{background:#fffef7}

/* ---- from Peter's 1990 directory pages (2 Oct) ---- */
/* running head and thumb-index tab */
.runhead{display:flex;justify-content:space-between;align-items:baseline;border-bottom:2px solid #111;padding:0 0 3px;margin:0 0 8px;font:400 10px 'Archivo Narrow',Arial,sans-serif;color:#3d3410}
.runhead b{font:900 15px Archivo,Arial,sans-serif;color:#111;letter-spacing:.02em}
.thumbtab{position:fixed;right:0;top:42%;z-index:20;background:#111;color:var(--paper);font:900 20px Archivo,Arial,sans-serif;padding:9px 8px 9px 10px;border-radius:3px 0 0 3px}
@media(max-width:700px){.thumbtab{display:none}}
/* display adverts (Half) sit together, two across, each two columns wide */
.display{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:8px 0 2px}
.display .ad{margin:0!important}
.display .ad h3{font-size:26px!important}.display .ad .tel{font-size:30px!important;padding:7px 4px}
.display .ad p{font-size:14.5px!important}.display .ad .photo{height:120px!important}
@media(max-width:800px){.display{grid-template-columns:1fr}}
/* in-column box (Quarter): one column wide, the NAME sitting on the top border, centred lines, number at the foot */
.ad.sz-quarter{border-width:1.5px!important;border-style:solid!important;border-radius:0!important;padding:0 7px 0!important;margin:12px 0 7px!important;overflow:visible!important}
.ad.sz-quarter .top{text-align:left!important;margin:-9px 0 2px -3px!important;background:none!important;padding:0!important}
.ad.sz-quarter h3{display:inline-block;background:var(--paper);padding:0 6px 0 3px;font:900 13.5px/1.1 Archivo,Arial,sans-serif!important;margin:0!important}
.ad.sz-quarter h3 a{color:#111!important;text-shadow:none!important}
.ad.sz-quarter .where{border:0!important;text-align:center;margin:3px 0 2px!important;color:#111!important;font-size:11.5px!important}
.ad.sz-quarter p{font-size:12px!important;margin:2px 0!important}
.ad.sz-quarter .chips{columns:1;text-align:center;margin:2px 0 3px!important}
.ad.sz-quarter .chips span{display:inline!important;padding:0!important;font-size:11.5px!important}
.ad.sz-quarter .chips span:before{position:static;display:inline-block;margin:0 4px 1px 3px}
.ad.sz-quarter .chips span:first-child:before{display:none}
.ad.sz-quarter .act{margin:3px -7px 0!important;display:flex!important;align-items:baseline;justify-content:flex-end;gap:8px;border-top:0}
.ad.sz-quarter .tel{background:transparent!important;color:#111!important;font:900 15px Archivo,Arial,sans-serif!important;padding:0 7px 2px!important;text-shadow:none!important}
.ad.sz-quarter .tel:before{content:none!important}
.ad.sz-quarter .bk,.ad.sz-quarter .cl,.ad.sz-quarter .yellnote,.ad.sz-quarter .ribbon,.ad.sz-quarter .photo{display:none!important}
.ad.sz-quarter:has(.ribbon){padding-top:0!important}
.ad.sz-quarter .artbox{float:right;margin:8px 0 0 6px}.ad.sz-quarter .artbox svg{width:34px;height:34px}
/* the advertiser's own bold line among the listings, pointing at the advert */
.row.xref{flex-wrap:wrap!important}
.row.xref b{font:900 12px Archivo,Arial,sans-serif!important;text-transform:uppercase}
.row.xref .ph{font-weight:900!important}
.row.xref .see{flex-basis:100%;text-align:center;font:400 10.5px 'Archivo Narrow',Arial,sans-serif;letter-spacing:.02em}
/* line art */
.artbox{color:#111;line-height:0}
.ad .artbox{float:right;margin:0 0 4px 8px}
.ad.full .artbox{float:none;position:absolute;right:270px;top:14px}
.display .ad .artbox svg{width:78px;height:78px}
@media(max-width:800px){.ad.full .artbox{position:static;float:right}}
/* plain italic fillers between listings */
.filler.plain{border:0;background:transparent;border-top:1px solid #111;border-bottom:1px solid #111;font:italic 400 13px/1.3 Georgia,serif;text-transform:none;padding:6px 4px}
/* section headings: a rounded box with a stippled fill, the classification heading of the 1990 books */
.sec{border-radius:7px!important;border:1.5px solid #111!important;background-image:radial-gradient(rgba(0,0,0,.28) .9px,transparent 1px)!important;background-size:3px 3px!important;box-shadow:inset 0 0 0 2px var(--head)}

/* ---- the shapes kit: the flash (offer line) as a box, starburst, star, oval, speech bubble, ribbon, seal or arrow ---- */
.ad .offer{position:relative}
.ad .offer span{display:block}
.ad .offer.fl-burst,.ad .offer.fl-star,.ad .offer.fl-seal{border:0!important;background:#111!important;color:var(--paper)!important;width:124px;min-height:124px;margin:6px auto!important;display:flex!important;align-items:center;justify-content:center;padding:26px 22px!important;font:800 12.5px/1.15 Archivo,Arial,sans-serif!important;text-transform:uppercase;transform:rotate(-8deg)}
.ad .offer.fl-burst{clip-path:polygon(50% 0%,59% 13%,72% 5%,76% 20%,91% 17%,88% 32%,100% 38%,92% 50%,100% 62%,88% 68%,91% 83%,76% 80%,72% 95%,59% 87%,50% 100%,41% 87%,28% 95%,24% 80%,9% 83%,12% 68%,0% 62%,8% 50%,0% 38%,12% 32%,9% 17%,24% 20%,28% 5%,41% 13%)}
.ad .offer.fl-star{clip-path:polygon(50% 0%,62% 34%,98% 35%,69% 57%,79% 91%,50% 71%,21% 91%,31% 57%,2% 35%,38% 34%);width:150px;min-height:150px;padding:54px 44px 40px!important;font-size:10.5px!important}
.ad .offer.fl-seal{border-radius:50%;clip-path:none;outline:2px dashed var(--paper);outline-offset:-9px;box-shadow:0 0 0 3px #111}
.ad .offer.fl-oval{border:2.5px solid #111!important;border-radius:50%!important;background:transparent!important;padding:13px 22px!important;max-width:230px;margin:8px auto!important;font:800 13px/1.15 Archivo,Arial,sans-serif!important;text-transform:uppercase;border-style:solid!important}
.ad .offer.fl-bubble{border:2.5px solid #111!important;border-radius:18px!important;background:var(--paper)!important;padding:9px 14px!important;max-width:220px;margin:6px auto 18px!important;font:800 13px/1.15 Archivo,Arial,sans-serif!important;border-style:solid!important}
.ad .offer.fl-bubble:after{content:"";position:absolute;left:26px;bottom:-13px;width:18px;height:18px;background:inherit;border-right:2.5px solid #111;border-bottom:2.5px solid #111;transform:skewX(28deg) rotate(45deg);transform-origin:center}
.ad .offer.fl-ribbon{border:0!important;background:#111!important;color:var(--paper)!important;padding:7px 26px!important;max-width:260px;margin:8px auto!important;font:800 13px/1.15 Archivo,Arial,sans-serif!important;text-transform:uppercase;clip-path:polygon(0 0,100% 0,calc(100% - 14px) 50%,100% 100%,0 100%,14px 50%)}
.ad .offer.fl-arrow{border:0!important;background:#111!important;color:var(--paper)!important;padding:8px 34px 8px 14px!important;max-width:240px;margin:8px auto!important;font:800 13px/1.15 Archivo,Arial,sans-serif!important;text-transform:uppercase;clip-path:polygon(0 0,calc(100% - 22px) 0,100% 50%,calc(100% - 22px) 100%,0 100%)}
.ad .offer.fl-box{border:2px solid #111!important;border-style:solid!important;box-shadow:3px 3px 0 #111;max-width:260px;margin:8px auto!important}

/* ---- Full advert, re-laid (2 Oct): picture | words | flash + number, nothing floating in space ---- */
.ad.full{grid-template-columns:210px 1fr 270px!important;align-items:stretch!important;gap:16px!important}
.ad.full .fpic{display:flex;flex-direction:column;justify-content:center;gap:8px}
.ad.full .fpic .photo{height:150px!important;min-height:0}
.ad.full .fpic .artbox{display:none;position:static!important;float:none!important;text-align:center}
.ad.full .fmain{display:flex;flex-direction:column;justify-content:center}
.ad.full .fmain .chips{columns:2;margin-bottom:0!important}
.ad.full .right{display:flex!important;flex-direction:column;justify-content:center;align-items:stretch}
.ad.full .right .offer{margin:0 auto 10px!important}
.ad.full .right .tel{font-size:28px!important}
@media(max-width:800px){.ad.full{grid-template-columns:1fr!important}.ad.full .fpic .photo{height:130px!important}}
/* half adverts: stretch to the same height and keep the number at the foot */
.display{align-items:stretch}
.display .ad{display:flex!important;flex-direction:column}
.display .ad .act{margin-top:auto!important}
.display .ad .artbox{float:right}

/* 2 Oct, Peter: adverts of the same size must BE the same size. No odd-one-out borders, offsets or radii between same-size adverts. */
.display .ad,.display .ad:nth-of-type(n){border-style:solid!important;border-radius:0!important;border-width:3px!important;margin:0!important}
.display{grid-auto-rows:1fr}
.display .ad p{flex:0 0 auto}
.display .ad .chips{margin-bottom:6px!important}
/* a picture fills the box: in a Half advert the line art sits large beside the words */
.display .ad.has-art .artbox svg{width:104px;height:104px}

/* ---- 2 Oct, Peter: "people spent a fortune on the ads so they spent hours with the rep getting it right" — adverts are DENSE ----
   More to say (selling points between stars, a since-seal, a strapline, the address along the foot) and bigger type, so the box is full. */
.display{grid-auto-rows:auto}
.display .ad{padding-bottom:0!important}
.display .ad h3{font-size:30px!important;line-height:1!important}
.display .ad .where{font-size:13.5px!important;padding:3px 0!important}
.display .ad p{font-size:16px!important;line-height:1.25!important;font-weight:600}
.display .ad .chips{columns:2!important}
.display .ad .chips span{font-size:15px!important;line-height:1.35!important}
.display .ad .tel{font-size:36px!important;padding:6px 4px!important}
.ad.full h3{font-size:40px!important;line-height:.98!important}
.ad.full p{font-size:17px!important;font-weight:600;line-height:1.25!important}
.ad.full .fmain .chips span{font-size:16px!important;line-height:1.4!important}
.ad.full .right .tel{font-size:36px!important;padding:8px 4px!important}
.ad.full{row-gap:0!important}
.ad .points{display:flex;flex-wrap:wrap;justify-content:center;gap:2px 0;margin:6px 0 7px;border-top:1.5px solid #111;border-bottom:1.5px solid #111;padding:4px 0;font:800 13px/1.3 Archivo,Arial,sans-serif;text-transform:uppercase;letter-spacing:.02em}
.ad .points span:before{content:"\2605";margin:0 7px;font-size:11px;position:relative;top:-1px}
.ad .points span:last-child:after{content:"\2605";margin:0 7px;font-size:11px;position:relative;top:-1px}
.ad .strap{font:italic 700 17px/1.2 Georgia,'Times New Roman',serif;text-align:center;margin:4px 0 6px}
.ad .since{float:left;width:66px;height:66px;border-radius:50%;border:2.5px solid #111;outline:1.5px solid #111;outline-offset:2px;display:flex;flex-direction:column;align-items:center;justify-content:center;font:900 18px/1 Archivo,Arial,sans-serif;margin:2px 10px 4px 2px;transform:rotate(-7deg)}
.ad .since small{font:700 9px/1 'Archivo Narrow',Arial,sans-serif;text-transform:uppercase;letter-spacing:.08em;margin-bottom:2px}
.ad.full .right .since{float:none;margin:0 auto 8px}
.ad .foot{font:700 11.5px/1.2 'Archivo Narrow',Arial,sans-serif;text-transform:uppercase;letter-spacing:.05em;text-align:center;padding:4px 4px 5px;border-top:1.5px solid #111}
.display .ad .foot{margin:0 -9px}
.ad.full .foot{grid-column:1 / -1;margin:8px -12px -12px;padding:5px}
.display .ad .act .bk,.ad.full .right .bk{font-size:12.5px!important}

/* ---- INK DISCIPLINE (2 Oct, Peter: "you are putting colour on the 70s pages") ----
   In the paper looks everything prints in black unless an era stylesheet says otherwise. The Today look colours these with the advertiser's
   colour; that must never leak through. The 1990s and 2000s add their spot / full colour back deliberately, below this in their own files. */
.ad .artbox,.ad .since,.ad .since small,.ad .points,.ad .points span,.ad .strap,.ad .foot,.ad .where,.ad p,.ad .yellnote,.ad .yellnote a{color:#111!important}
.ad .since{background:transparent!important;border-radius:50%!important;padding:0!important}
.ad .points span{background:transparent!important;border:0!important;border-radius:0!important;padding:0!important;font-size:inherit!important}
.ad .strap{border-left:0!important;padding-left:0!important}
.ad .foot{margin-top:0!important}
.ribbon{border:0!important}

/* illustrations: big. They are the advert. */
.display .ad .artbox .artimg{width:150px!important;height:150px!important}
.ad.full .fpic .artbox .artimg{width:190px!important;height:190px!important}
.ad.sz-quarter .artbox .artimg{width:46px!important;height:46px!important}

/* drawn flash frames and spot fillers in the paper looks */
.ad .offer.flimg{color:#111!important;background:none!important;border:0!important;filter:none!important}
.ad .offer.flimg span{font:800 13.5px/1.12 Archivo,Arial,sans-serif!important;text-transform:uppercase;color:#111!important;text-shadow:none!important}
.display .ad .offer.flimg{width:190px}
.filler.pic{border:0!important;background:transparent!important;box-shadow:none!important;padding:6px 0!important;color:#111;line-height:0}
.filler.pic.framed{position:relative;height:150px;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.2;clip-path:none!important;border-radius:0!important;outline:0!important}
.filler.pic.framed .fr{position:absolute;inset:0;background:#111;-webkit-mask:var(--fi) center / contain no-repeat;mask:var(--fi) center / contain no-repeat}
.filler.pic.framed b,.filler.pic.framed a{position:relative;transform:translateY(-12px);color:#111!important}
.filler.pic.framed b{font-size:14px!important}.filler.pic.framed a{font-size:11.5px}

/* ---- words inside the drawn frames (2 Oct, Peter: "your wording doesn't look that great in the bubbles") ----
   Hand-lettered, like a sign-writer's brush, and big enough to FILL the shape. Size steps down as the line gets longer. */
@import url('https://fonts.googleapis.com/css2?family=Bangers&family=Patrick+Hand&display=swap');
/* speech and thought bubbles are spoken, so they get a pen hand instead of sign-writer capitals */
.filler.pic.framed b{font:400 22px/1 Bangers,cursive!important;letter-spacing:.04em}.filler.pic.framed a{font:400 15px/1.1 'Patrick Hand',cursive!important;text-transform:none}
/* bursts, shout bubbles and seals: the words must stay inside the points, so they get a narrower column and tighter lettering */

/* never break a word: step the lettering down when one word is long (bursts have the narrowest middle) */

/* FLASH FRAMES (2 Oct, tight): the drawing is trimmed to its edge, takes its own shape, and the lettering scales with it (cqw),
   so the words fill the frame and the frame wastes no room in the advert. */
.ad .offer.flimg{width:min(100%,210px)!important;aspect-ratio:var(--ar,1 / 1)!important;padding:0!important;margin:2px auto!important;transform:rotate(-3deg)!important;container-type:inline-size;--fl:17cqw;--fw:99cqw;--in:62%;--k:1}
.ad .offer.flimg span{display:block;max-width:var(--in);font:400 calc(min(var(--fl),var(--fw)) * var(--k))/1 Bangers,'Comic Sans MS',cursive!important;letter-spacing:.03em!important;text-transform:uppercase!important;color:#111!important;text-shadow:none!important;text-wrap:balance;overflow-wrap:normal;word-break:keep-all;hyphens:none;transform:none!important}
.ad .offer.flimg.len-m{--fl:14.5cqw}.ad .offer.flimg.len-l{--fl:12cqw}.ad .offer.flimg.len-xl{--fl:10cqw}
.ad .offer.flimg.wl-1{--fw:14.5cqw}.ad .offer.flimg.wl-2{--fw:12.5cqw}.ad .offer.flimg.wl-3{--fw:10.5cqw}
.ad .offer.fi-burst-12,.ad .offer.fi-burst-spiky,.ad .offer.fi-seal-scalloped{--in:56%;--k:.86;width:min(100%,190px)!important}
.ad .offer.fi-bubble-shout{--in:60%;--k:.9}
.ad .offer.fi-heart{--in:58%;--k:.85;width:min(100%,180px)!important}.ad .offer.fi-heart span{transform:translateY(-8cqw)!important}
.ad .offer.fi-shield{--in:60%;--k:.9;width:min(100%,150px)!important}.ad .offer.fi-shield span{transform:translateY(-6cqw)!important}
.ad .offer.fi-rosette{--in:50%;--k:.8;width:min(100%,140px)!important}.ad .offer.fi-rosette span{transform:translateY(-22cqw)!important}
.ad .offer.fi-scroll-banner{--in:56%;--k:.72;width:min(100%,250px)!important;transform:none!important}.ad .offer.fi-scroll-banner span{transform:rotate(-7deg)!important}
.ad .offer.fi-bubble-round,.ad .offer.fi-bubble-oval,.ad .offer.fi-bubble-thought,.ad .offer.fi-bubble-box{--in:68%}
.ad .offer.fi-bubble-round span,.ad .offer.fi-bubble-oval span,.ad .offer.fi-bubble-thought span,.ad .offer.fi-bubble-box span{font-family:'Patrick Hand','Comic Sans MS',cursive!important;letter-spacing:0!important;transform:translateY(-5cqw)!important}
.ad .offer.fi-bubble-round,.ad .offer.fi-bubble-thought{width:min(100%,170px)!important}
/* the "since" seal sits beside the flash, not in a row of its own */
.ad.full .right .badges{display:flex;align-items:center;justify-content:center;gap:8px;width:100%}
.ad.full .right .badges .since{flex:none;margin:0!important}
.ad.full .right .badges .offer{flex:0 1 auto;margin:0!important}
.ad.full .right .badges .offer.flimg{flex:1 1 0;min-width:0}
.ad.full .right .badges .offer.flimg{flex:0 0 auto!important;width:170px!important}
.ad.full .right .badges .offer.fi-scroll-banner{width:220px!important}
.ad.full .right .badges .offer.fi-rosette,.ad.full .right .badges .offer.fi-shield{width:130px!important}
.ad .offer.fi-bubble-round,.ad .offer.fi-bubble-oval,.ad .offer.fi-bubble-thought,.ad .offer.fi-bubble-box{--in:76%;--k:.74}
.ad .offer.fi-bubble-round span,.ad .offer.fi-bubble-oval span,.ad .offer.fi-bubble-thought span,.ad .offer.fi-bubble-box span{transform:translateY(-7cqw)!important}