/* 1970s: letterpress. All black on yellow, thin single rules, slab-serif names, no photos, the number set plainly. Quiet and dense. */
@import url('https://fonts.googleapis.com/css2?family=Zilla+Slab:wght@500;700&family=Old+Standard+TT:wght@400;700&display=swap');
:root{--paper:#fbf3c8;--head:#fbf3c8}
main.wrap{background-image:none}
.band{background:transparent!important;border:0!important;border-top:4px double #111!important;border-bottom:4px double #111!important;padding:8px 2px!important}
.band h1{font:700 30px/1.05 'Zilla Slab',Georgia,serif!important;text-transform:none!important;letter-spacing:0}
.band span{font:400 13px 'Old Standard TT',Georgia,serif!important;text-transform:none!important;font-style:italic}
.sec{background:transparent!important;border:0!important;border-top:2px solid #111!important;border-bottom:1px solid #111!important;padding:3px 2px!important}
.sec h2{font:700 17px 'Zilla Slab',Georgia,serif!important;text-transform:uppercase;letter-spacing:.08em}
.sec small,.sec a{font:400 12px 'Old Standard TT',Georgia,serif!important;text-transform:none!important;font-style:italic}
h2.k{background:transparent;border:0;border-top:4px double #111;font:700 15px 'Zilla Slab',Georgia,serif;letter-spacing:.08em}
.row,.row b,.row .ph,.row .town{font-family:'Old Standard TT',Georgia,serif!important;font-size:12px!important}
.row .ph{font-weight:700!important}
.ad,.ad.color{border:1.5px solid #111!important;border-radius:0!important;border-style:solid!important;border-width:1.5px!important;padding:8px 9px 6px!important}
.ad:nth-of-type(3n+2){border-width:1.5px!important;outline:1.5px solid #111;outline-offset:2px;margin:10px 3px!important}
.ad h3{font:700 19px/1.05 'Zilla Slab',Georgia,serif!important;text-transform:none!important;letter-spacing:0}
.ad .where{font:400 12px 'Old Standard TT',Georgia,serif!important;text-transform:none!important;letter-spacing:0;font-style:italic;border:0!important;margin:0 0 4px!important}
.ad p{font:400 12.5px/1.3 'Old Standard TT',Georgia,serif!important}
.ad .chips{columns:1}
.ad .chips span{font:400 12.5px/1.3 'Old Standard TT',Georgia,serif!important;text-transform:none!important;padding-left:12px!important}
.ad .chips span:before{width:6px;height:1.5px;border-radius:0;top:.65em}
.ad .photo{display:none!important}
.ad .act{margin:6px 0 0!important;border-top:1px solid #111}
.ad .tel,.ad.color .tel{background:transparent!important;color:#111!important;font:700 21px/1.2 'Zilla Slab',Georgia,serif!important;padding:4px 0 0}
.ad .tel:before{content:"Tel. ";font:400 13px 'Old Standard TT',Georgia,serif;font-style:italic}
.ad .bk{font:400 11.5px 'Old Standard TT',Georgia,serif!important;text-transform:none!important;letter-spacing:0;font-style:italic}
.ad .offer{border:1px solid #111!important;font:700 12px 'Zilla Slab',Georgia,serif!important;text-transform:none!important}
.ad.full{border-width:1.5px!important;outline:1.5px solid #111;outline-offset:3px;}
.ad.full h3{font-size:30px!important}
.ribbon{background:transparent!important;color:#111!important;border-bottom:1px solid #111;border-right:1px solid #111;font:400 10px 'Old Standard TT',Georgia,serif!important;text-transform:none!important;font-style:italic}
.filler{background:transparent;border:1.5px solid #111;font:400 12.5px 'Old Standard TT',Georgia,serif;text-transform:none;font-style:italic}
.filler b{font:700 16px 'Zilla Slab',Georgia,serif;font-style:normal}
.filler.bubble{border-radius:0;outline:1.5px solid #111;outline-offset:2px}
.searchbar{border:1.5px solid #111!important}.searchbar label{font:700 14px 'Zilla Slab',Georgia,serif;text-transform:none}
.kc{font-family:'Old Standard TT',Georgia,serif!important;text-transform:none!important;font-size:13px!important}
.sbox button{font-family:'Zilla Slab',Georgia,serif!important;color:#fbf3c8!important}

@media(min-width:801px){.ad.full{grid-template-columns:1fr 260px!important}}
@media(max-width:800px){.ad.full{grid-template-columns:1fr!important}}

.ad:has(.ribbon){padding-top:22px!important}
.ad.sz-quarter h3{font:700 14px 'Zilla Slab',Georgia,serif!important}.ad.sz-quarter .tel{font:700 15px 'Zilla Slab',Georgia,serif!important}
.sec{background-image:none!important;border-radius:0!important;box-shadow:none;border-left:0!important;border-right:0!important}
.runhead b{font:700 15px 'Zilla Slab',Georgia,serif}.row.xref b{font:700 12px 'Zilla Slab',Georgia,serif!important;text-transform:none}
.ad .artbox{display:block}
.ad .offer{font-family:'Zilla Slab',Georgia,serif!important;text-transform:none!important}.ad .offer.fl-oval,.ad .offer.fl-bubble,.ad .offer.fl-box{border-width:1.5px!important;box-shadow:none}.ad .offer.fl-bubble:after{border-width:1.5px}

/* no photos in this era: the line art IS the picture, large, in the picture column */
.ad.full .fpic .photo{display:none!important}
.ad.full .fpic .artbox{display:block!important}.ad.full .fpic .artbox svg{width:150px;height:150px}
.ad.full.no-art{grid-template-columns:1fr 270px!important}.ad.full.no-art .fpic{display:none}
@media(min-width:801px){.ad.full.has-art{grid-template-columns:190px 1fr 270px!important}}
.display .ad .artbox svg{width:96px;height:96px}
.ad.full .right{border-left:1px solid #111;padding-left:14px}.ad.full .right .tel{font-size:26px!important}
.ad .points{border-width:1px;font:700 13px 'Zilla Slab',Georgia,serif;text-transform:none;letter-spacing:0}.ad .since{border-width:1.5px;outline-width:1px;font-family:'Zilla Slab',Georgia,serif}.ad .foot{border-width:1px;font:400 12px 'Old Standard TT',Georgia,serif;text-transform:none;letter-spacing:0}.display .ad h3{font-size:26px!important}.ad.full h3{font-size:34px!important}
/* 1970s: one ink. Black only, on every advert, whatever colour the advertiser chose. */
.ad,.ad *{border-color:#111!important;outline-color:#111!important}
.ad .tel,.ad h3,.ad h3 a,.ad .bk,.ad .chips span{color:#111!important}
.ad .chips span:before{background:#111!important}
.ribbon{border-bottom:1px solid #111!important;border-right:1px solid #111!important;color:#111!important;background:transparent!important}
.ad .offer.fl-burst,.ad .offer.fl-star,.ad .offer.fl-seal,.ad .offer.fl-ribbon,.ad .offer.fl-arrow{background:#111!important;color:var(--paper)!important}
.ad .offer.fl-oval,.ad .offer.fl-bubble,.ad .offer.fl-box{color:#111!important;background:transparent!important}
.ad .cl,.row .cl{color:#111!important}

/* ---- 2 Oct: the display advert rebuilt on the pattern of Peter's 1970s reference ("a thing of beauty"):
   the PICTURE runs the full height of one side; the words run down the other in mixed type: an italic serif headline, a brush-script
   line, star bullets in condensed capitals, a small italic line, the name reversed out of an oval, and the number in a DIAL box. ---- */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@1,700;1,900&family=Yellowtail&family=Oswald:wght@500;600&display=swap');
.display .ad,.display .ad:nth-of-type(n){display:grid!important;grid-template-columns:1.2fr .8fr;column-gap:8px;border:0!important;outline:0!important;border-top:3px double #111!important;border-bottom:3px double #111!important;padding:10px 4px 8px!important;margin:0!important;align-content:start}
.display .ad > *{grid-column:1}
.display .ad .artbox{grid-column:2!important;grid-row:1 / span 14;align-self:center;justify-self:center;float:none!important;margin:0!important;width:100%}
.display .ad .artbox svg{width:100%!important;height:auto!important;max-height:300px;stroke-width:1.7}
.display .ad:not(.has-art){grid-template-columns:1fr}
.display .ad .ribbon{position:static!important;grid-column:1 / -1;border:0!important;text-align:left;padding:0 0 4px!important;font-size:10px!important}
.display .ad:has(.ribbon){padding-top:10px!important}
/* headline (their one-liner) first, italic serif capitals */
.display .ad .top > div{display:flex;flex-direction:column}
.display .ad .top{text-align:left!important}
.display .ad .where{order:-1;font:italic 900 19px/1.1 'Playfair Display',Georgia,serif!important;text-transform:uppercase!important;letter-spacing:.03em!important;margin:0 0 6px!important}
/* the name, reversed out of an oval */
.display .ad h3{order:3;background:#111;border-radius:50%;padding:14px 22px 16px!important;margin:8px 0 6px!important;text-align:center;font:400 30px/1 Yellowtail,'Brush Script MT',cursive!important;text-transform:none!important}
.display .ad h3 a{color:var(--paper)!important}
/* the pitch as a brush-script line */
.display .ad p{font:400 21px/1.15 Yellowtail,'Brush Script MT',cursive!important;text-align:left!important;margin:2px 0 6px!important}
/* services: stars and condensed capitals */
.display .ad .chips{columns:1!important;margin:2px 0 6px!important}
.display .ad .chips span{font:600 15px/1.3 Oswald,'Arial Narrow',sans-serif!important;text-transform:uppercase!important;letter-spacing:.03em;padding-left:22px!important}
.display .ad .chips span:before{content:"\2605"!important;background:none!important;width:auto!important;height:auto!important;top:0!important;left:0!important;font-size:14px;color:#111}
.display .ad .strap{font:italic 700 13px/1.25 'Playfair Display',Georgia,serif!important;text-transform:uppercase;letter-spacing:.06em;text-align:center!important;margin:4px 0!important}
.display .ad .points{border:0!important;justify-content:center;font:500 11.5px/1.3 Oswald,'Arial Narrow',sans-serif!important;text-transform:uppercase!important;letter-spacing:.06em;margin:2px 0 4px!important}
.display .ad .points span:before{content:"\00b7"!important;margin:0 6px}.display .ad .points span:first-child:before{content:none!important}.display .ad .points span:last-child:after{content:none!important}
.display .ad .since{float:none!important;transform:none!important;width:auto!important;height:auto!important;border:0!important;outline:0!important;display:block!important;font:italic 700 12.5px 'Playfair Display',Georgia,serif!important;text-transform:uppercase;letter-spacing:.08em;text-align:center;margin:0 0 2px!important}
.display .ad .since small{display:inline!important;font:inherit!important;letter-spacing:inherit}.display .ad .since small:after{content:" "}
.display .ad .yellnote{display:none!important}
/* the DIAL box */
.display .ad .act{border:1.5px solid #111!important;margin:14px 20px 4px!important;padding:8px 6px 4px!important;position:relative;display:block!important}
.display .ad .act:before{content:"DIAL";position:absolute;top:-8px;left:50%;transform:translateX(-50%);background:var(--paper);padding:0 8px;font:700 11px/1.3 'Playfair Display',Georgia,serif;letter-spacing:.14em}
.display .ad .tel,.display .ad.color .tel{font:600 30px/1.1 Oswald,'Arial Narrow',sans-serif!important;letter-spacing:.04em;padding:0!important}
.display .ad .tel:before{content:none!important}
.display .ad .bk{display:none!important}
.display .ad .offer{margin:6px auto!important}
.display .ad .foot{border:0!important;margin:0!important;font:500 10.5px/1.3 Oswald,'Arial Narrow',sans-serif!important;text-transform:uppercase!important;letter-spacing:.08em}
.display .ad .cl{grid-column:1 / -1;text-align:center}
@media(max-width:560px){.display .ad{grid-template-columns:1fr}.display .ad .artbox{grid-column:1!important;grid-row:auto;max-width:220px}}

/* layout fix (2 Oct): the ribbon must not span both columns, or it lands BELOW the picture and drags the words down with it */
.display .ad .ribbon{grid-column:1!important;grid-row:1}
.display .ad .cl{grid-column:1!important}
.display .ad .artbox{grid-row:1 / span 20!important;align-self:center}
.display .ad .artbox svg{stroke-width:1.5}

.display .ad .artbox .artimg{width:100%!important;height:auto!important;aspect-ratio:1 / 1;max-width:330px}
.ad.full .fpic .artbox .artimg{width:100%!important;height:auto!important;aspect-ratio:1 / 1}
@media(min-width:801px){.ad.full.has-art{grid-template-columns:260px 1fr 260px!important}}

@media(max-width:560px){.display .ad .artbox{grid-row:auto!important;grid-column:1!important}.display .ad .ribbon{grid-row:auto}}
