/* THE 16-BOX PAGE (2 Oct 2026). Paper looks only. A page is 4 boxes across by 4 down with hard rules between them.
   Full page = 16 boxes, Half = 8 (across or upright), Quarter = 4, Double = 2 (across or upright), Small = 1; free listings fill the rest.
   Everything inside a box is sized in --u (1% of one box's width), so the whole page scales as one piece. */
.ypwrap{container-type:inline-size;margin:10px 0 24px;--u:.25cqw;--ink:#111;--box:transparent;--spot:#111;--nm:Archivo,Arial,sans-serif;--nmw:900;--nmcase:none;--bd:'Archivo Narrow',Arial,sans-serif;--tl:Archivo,Arial,sans-serif;color:var(--ink)}
.yphead{display:flex;justify-content:space-between;align-items:baseline;border-top:1px solid var(--ink);border-bottom:3px solid var(--ink);padding:3px 2px 2px;font:800 12px Archivo,Arial,sans-serif;text-transform:uppercase;letter-spacing:.04em}
.yp{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:35.4cqw;border-left:1.5px solid var(--ink)}
.yp>*{grid-column:var(--c) / span var(--w);grid-row:var(--r) / span var(--h);border-right:1.5px solid var(--ink);border-bottom:1.5px solid var(--ink);box-sizing:border-box;overflow:hidden;min-width:0;min-height:0;position:relative;margin:0}

/* free listings: 15 lines to a box */
.bx.ls{padding:calc(var(--u)*3) calc(var(--u)*4)}
/* --n = names in this box (8 to 15): fewer names are set larger, so the box is always full */
.lsn{--lh:calc(var(--u)*135 / var(--n));height:100%}
.lr{display:flex;align-items:baseline;gap:calc(var(--u)*1.2);height:var(--lh,calc(var(--u)*9));font:400 min(calc(var(--lh,calc(var(--u)*9)) * .57),calc(var(--u)*5.9))/var(--lh,calc(var(--u)*9)) var(--bd);white-space:nowrap}
.lr a{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;font-weight:700;color:inherit;text-decoration:none}
.lr a:hover{text-decoration:underline}
.lr i{flex:1 1 calc(var(--u)*4);min-width:calc(var(--u)*3);border-bottom:1px dotted currentColor;transform:translateY(calc(var(--u)*-1.6))}
.lr span{flex:none;max-width:62%;overflow:hidden;text-overflow:ellipsis}
.lr.x a{font-weight:900}.lr.x a:before{content:"\2605  "}
.lr.c:not(.x) a:after{content:" \2713"}

/* an advert */
.bx.ad16{padding:calc(var(--u)*4);display:flex;flex-direction:column;gap:calc(var(--u)*2.5);background:var(--box);--f:1;--g:1;--pl:3}
.bx h3{margin:0;font:var(--nmw) calc(var(--u)*9.5*var(--f)*var(--n,1))/1.02 var(--nm);text-transform:var(--nmcase);text-wrap:balance;letter-spacing:0}
.bx h3 a{color:inherit;text-decoration:none}
.bx .b-hd{margin-top:calc(var(--u)*1.5);font:600 calc(var(--u)*5*var(--g))/1.15 var(--bd);text-transform:uppercase;letter-spacing:.04em}
.bx .b-txt{display:flex;flex-direction:column;gap:calc(var(--u)*2.5);min-height:0}
.bx .b-txt p{margin:0;font:400 calc(var(--u)*5.7*var(--g))/1.28 var(--bd);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:var(--pl);overflow:hidden}
.bx .b-tp{font:700 calc(var(--u)*5.2*var(--g))/1.3 var(--bd);text-transform:uppercase;letter-spacing:.02em}
.bx .b-tp span+span:before{content:" \2022  "}
.bx .strap{font:italic 700 calc(var(--u)*7*var(--g))/1.15 Georgia,serif;text-align:center}
.bx .points{font:700 calc(var(--u)*4.9*var(--g))/1.45 var(--bd);text-transform:uppercase;text-align:center;border-top:1px solid currentColor;border-bottom:1px solid currentColor;padding:calc(var(--u)*1.2) 0}
.bx .points span:before{content:"\2605  "}.bx .points span{margin:0 calc(var(--u)*1.5)}
.bx .b-art{position:relative;min-height:calc(var(--u)*40);min-width:0}
.bx .bxart{position:absolute;inset:0;background:currentColor;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center}
.bx .b-ph{display:none;background-size:cover;background-position:center}
.bx .b-tel{margin-top:auto;text-align:center}
.bx .b-tel span{display:block;font:900 calc(var(--u)*11*var(--f))/1.1 var(--tl);white-space:nowrap;letter-spacing:.01em}
.bx .b-tel .bk{display:none}
.bx .foot{font:600 calc(var(--u)*4.5*var(--g))/1.2 var(--bd);text-transform:uppercase;letter-spacing:.04em;text-align:center;border-top:1px solid currentColor;padding-top:calc(var(--u)*1.5)}
.bx .b-fl{display:flex;align-items:center;justify-content:center;gap:calc(var(--u)*3);min-height:0}
.bx .since{flex:none;width:calc(var(--u)*24*var(--g));aspect-ratio:1;border-radius:50%;border:1.5px solid currentColor;outline:1px solid currentColor;outline-offset:2px;display:flex;flex-direction:column;align-items:center;justify-content:center;font:900 calc(var(--u)*7.5*var(--g))/1 var(--tl);transform:rotate(-8deg);color:var(--spot)}
.bx .since small{font:700 calc(var(--u)*3.4*var(--g))/1 var(--bd);text-transform:uppercase;letter-spacing:.08em;margin-bottom:calc(var(--u)*1)}
/* the flash: plain box, or words inside a drawn frame */
.bx .offer{font:800 calc(var(--u)*6*var(--g))/1.1 var(--bd);text-transform:uppercase;border:2px solid currentColor;padding:calc(var(--u)*2) calc(var(--u)*4);text-align:center;color:var(--spot)}
.bx .offer.flimg{border:0;padding:0;position:relative;display:flex;align-items:center;justify-content:center;aspect-ratio:var(--ar,1 / 1);width:calc(var(--u)*56*var(--g));flex:none;container-type:inline-size;transform:rotate(-3deg);--fl:17cqw;--fw:99cqw;--in:62%;--k:1}
.bx .offer.flimg:before{content:"";position:absolute;inset:0;background:currentColor;-webkit-mask:var(--fi) center / contain no-repeat;mask:var(--fi) center / contain no-repeat}
.bx .offer.flimg span{position:relative;display:block;max-width:var(--in);font:400 calc(min(var(--fl),var(--fw)) * var(--k))/1 Bangers,'Comic Sans MS',cursive;letter-spacing:.03em;text-transform:uppercase;color:#111;text-wrap:balance;word-break:keep-all}
.bx .offer.flimg.len-m{--fl:14.5cqw}.bx .offer.flimg.len-l{--fl:12cqw}.bx .offer.flimg.len-xl{--fl:10cqw}
.bx .offer.flimg.wl-1{--fw:14.5cqw}.bx .offer.flimg.wl-2{--fw:12.5cqw}.bx .offer.flimg.wl-3{--fw:10.5cqw}
.bx .offer.fi-burst-12,.bx .offer.fi-burst-spiky,.bx .offer.fi-seal-scalloped{--in:56%;--k:.86}
.bx .offer.fi-bubble-shout{--in:60%;--k:.9}
.bx .offer.fi-heart{--in:58%;--k:.85}.bx .offer.fi-heart span{transform:translateY(-8cqw)}
.bx .offer.fi-shield{--in:60%;--k:.9}.bx .offer.fi-shield span{transform:translateY(-6cqw)}
.bx .offer.fi-rosette{--in:50%;--k:.8}.bx .offer.fi-rosette span{transform:translateY(-22cqw)}
.bx .offer.fi-scroll-banner{--in:56%;--k:.72;transform:none}.bx .offer.fi-scroll-banner span{transform:rotate(-7deg)}
.bx .offer.fi-bubble-round,.bx .offer.fi-bubble-oval,.bx .offer.fi-bubble-thought,.bx .offer.fi-bubble-box{--in:76%;--k:.74}
.bx .offer.fi-bubble-round span,.bx .offer.fi-bubble-oval span,.bx .offer.fi-bubble-thought span,.bx .offer.fi-bubble-box span{font-family:'Patrick Hand','Comic Sans MS',cursive;letter-spacing:0;transform:translateY(-7cqw)}
.bx .b-top{grid-area:top}.bx .b-art{grid-area:art}.bx .b-txt{grid-area:txt}.bx .b-fl{grid-area:fl}.bx .b-tel{grid-area:tel}.bx .foot{grid-area:ft}

/* SHAPES. Upright ones are a simple stack; wide ones put the picture down one side. */
.bx.s11{gap:calc(var(--u)*3)}
.bx.s12{--f:1.15;--g:1.05;--pl:5}.bx.s12 .b-art{flex:1 1 0;max-height:calc(var(--u)*70)}
.bx.s21{--f:1.2;--g:1.05;--pl:4;display:grid;grid-template-columns:36% minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto;grid-template-areas:"art top" "art txt" "tel tel";column-gap:calc(var(--u)*5)}
.bx.s21.no-art{grid-template-columns:minmax(0,1fr);grid-template-areas:"top" "txt" "tel"}
.bx.s22{--f:1.7;--g:1.5;--pl:5;display:grid;grid-template-columns:45% minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto auto auto;grid-template-areas:"top top" "art txt" "fl txt" "tel tel" "ft ft";column-gap:calc(var(--u)*6);row-gap:calc(var(--u)*4);padding:calc(var(--u)*6)}
.bx.s22.no-art{grid-template-areas:"top top" "txt txt" "fl fl" "tel tel" "ft ft"}
.bx.s22.no-fl.has-art{grid-template-areas:"top top" "art txt" "art txt" "tel tel" "ft ft"}
.bx.s22 .offer.flimg{width:calc(var(--u)*62)}
.bx.s24,.bx.s42,.bx.s44{--f:1.9;--g:1.5;--pl:9;padding:calc(var(--u)*7);gap:calc(var(--u)*5)}
.bx.s24 .b-art,.bx.s42 .b-art,.bx.s44 .b-art{flex:1 1 0;max-height:calc(var(--u)*120)}
@media(min-width:700px){
  .bx.s42{--f:2.3;--g:1.8;--pl:6;display:grid;grid-template-columns:27% minmax(0,1fr) 27%;grid-template-rows:auto minmax(0,1fr) auto auto;grid-template-areas:"top top top" "art txt fl" "art tel tel" "ft ft ft";column-gap:calc(var(--u)*8);row-gap:calc(var(--u)*4)}
  .bx.s42.no-art{grid-template-columns:minmax(0,1fr) 30%;grid-template-areas:"top top" "txt fl" "tel tel" "ft ft"}
  .bx.s42 .b-fl{flex-direction:column}
  .bx.s42 .b-art{max-height:none}
  .bx.s44{--f:3.1;--g:2.7;--pl:12;padding:calc(var(--u)*12);display:grid;grid-template-columns:48% minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto auto auto;grid-template-areas:"top top" "art txt" "art fl" "tel tel" "ft ft";column-gap:calc(var(--u)*12);row-gap:calc(var(--u)*9)}
  .bx.s44.no-art{grid-template-areas:"top top" "txt txt" "fl fl" "tel tel" "ft ft"}
  .bx.s44 .b-tel span{font-size:calc(var(--u)*46)}
  .bx.s44 .offer.flimg{width:calc(var(--u)*110)}
  .bx.s44 .b-art{max-height:none}
  .bx.s44 .b-txt{gap:calc(var(--u)*7);justify-content:center}
  .bx.s44 .b-tel{margin:0}
  .bx.s44 .b-top{text-align:center}
}
/* phones: two boxes across; a wide advert turns upright */
@media(max-width:699px){
  .ypwrap{--u:.5cqw}
  .yp{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:70.8cqw;grid-auto-flow:dense}
  .yp>*{grid-column:span var(--w);grid-row:span var(--h)}
  .yp>.s42,.yp>.s44{grid-column:span 2;grid-row:span 4}
}

/* fillers */
.bx.fil{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:calc(var(--u)*4);padding:calc(var(--u)*6);font:700 calc(var(--u)*5.6)/1.25 var(--bd);text-transform:uppercase}
.bx.fil b{font:var(--nmw) calc(var(--u)*10)/1.05 var(--nm);text-transform:var(--nmcase)}
.bx.fil a{color:inherit;font-weight:400;text-transform:none;font-style:italic}
.bx.fil .spot{width:calc(var(--u)*60)!important;height:calc(var(--u)*60)!important}

/* ---------- THE LOOKS ---------- */
/* 1970s: black ink only. Serif, italic names, the number in a ruled DIAL box. */
.look-70{--nm:'Playfair Display',Georgia,serif;--nmw:900;--bd:'Old Standard TT',Georgia,serif;--tl:'Zilla Slab',Georgia,serif}
.look-70 .bx h3{font-style:italic}
.look-70 .bx .b-hd{font-weight:700}
.look-70 .bx .strap{font-family:Yellowtail,'Brush Script MT',cursive;font-style:normal;font-weight:400;font-size:calc(var(--u)*9*var(--g))}
.look-70 .bx .b-tel span{border:1.5px solid currentColor;padding:calc(var(--u)*1.5) calc(var(--u)*2);font-weight:700}

.look-70 .bx.s22 .b-hd,.look-70 .bx.s42 .b-hd,.look-70 .bx.s24 .b-hd,.look-70 .bx.s44 .b-hd{text-align:center;margin-top:calc(var(--u)*4)}
/* 1980s: black ink only. Heavy condensed capitals, the name reversed out of a black band. */
.look-80{--nm:Anton,Impact,sans-serif;--nmw:400;--nmcase:uppercase;--tl:Anton,Impact,sans-serif}
.look-80 .bx.ad16 .b-top{background:#111;color:var(--paper,#fbf5d0);margin:calc(var(--u)*-4) calc(var(--u)*-4) 0;padding:calc(var(--u)*3) calc(var(--u)*4)}
.look-80 .bx.s22 .b-top{margin:calc(var(--u)*-6) calc(var(--u)*-6) 0;padding:calc(var(--u)*5) calc(var(--u)*6)}
.look-80 .bx.s24 .b-top,.look-80 .bx.s42 .b-top,.look-80 .bx.s44 .b-top{margin:0;padding:calc(var(--u)*6) calc(var(--u)*8)}
.look-80 .bx h3{letter-spacing:.02em}
.look-80 .bx .b-tel span{font-weight:400;letter-spacing:.04em;border-top:3px solid #111;border-bottom:3px solid #111;padding:calc(var(--u)*1) 0}
.look-80 .bx .strap{font:400 calc(var(--u)*7*var(--g))/1.1 Anton,Impact,sans-serif;text-transform:uppercase;font-style:normal}
/* 1990s: one spot colour (red; blue if the advertiser chose blue). Paid adverts knocked out to white. */
.look-90{--nmcase:uppercase}
.look-90 .bx.ad16{--spot:#d21f1f;--box:#fff}
.look-90 .bx.ad16[style*="1d5fa3"]{--spot:#1d5fa3}
.look-90 .bx h3{color:var(--spot)}
.look-90 .bx .b-tel span{background:var(--spot);color:#fff;padding:calc(var(--u)*2) 0}
.look-90 .bx .strap{color:var(--spot)}
.look-90 .bx .b-tp span+span:before,.look-90 .bx .points span:before{color:var(--spot)}
.look-90 .bx .bxart{background:var(--spot)}
/* 2000s: full colour. The advertiser's own colour in a band, white box, photographs. */
.look-00 .bx.ad16{--spot:var(--ad,#2f4738);--box:#fff}
.look-00 .bx.ad16 .b-top{background:linear-gradient(180deg,color-mix(in srgb,var(--spot) 82%,#fff),var(--spot));color:#fff;margin:calc(var(--u)*-4) calc(var(--u)*-4) 0;padding:calc(var(--u)*4);text-shadow:0 1px 1px rgba(0,0,0,.35)}
.look-00 .bx.s22 .b-top{margin:calc(var(--u)*-6) calc(var(--u)*-6) 0;padding:calc(var(--u)*6)}
.look-00 .bx.s24 .b-top,.look-00 .bx.s42 .b-top,.look-00 .bx.s44 .b-top{margin:0;padding:calc(var(--u)*7) calc(var(--u)*9);border-radius:calc(var(--u)*4)}
.look-00 .bx .b-tel span{color:var(--spot)}
.look-00 .bx .strap{color:var(--spot)}
.look-00 .bx .bxart{background:var(--spot)}
.look-00 .bx .offer.flimg{color:#d21f1f;filter:drop-shadow(1px 2px 1.5px rgba(0,0,0,.3))}.look-00 .bx .offer.flimg span{color:#b3120a}
.look-00 .bx .b-tp span{display:inline-block;background:color-mix(in srgb,var(--spot) 14%,#fff);border-radius:99px;padding:0 calc(var(--u)*3);margin:0 calc(var(--u)*1) calc(var(--u)*1.5) 0}
.look-00 .bx .b-tp span+span:before{content:none}

.bx.s42 .b-txt,.bx.s22 .b-txt{justify-content:center}
.bx.nl-m{--n:.84}.bx.nl-l{--n:.66}
.bx .offer.flimg{background:none!important;box-shadow:none!important}

/* the rep's mock-up on the claim page: your one line, beside the adverts */
.lr.me{background:#111;color:#fff;margin:0 calc(var(--u)*-2);padding:0 calc(var(--u)*2)}
.bx.fil.you .spot{transform:scaleX(-1)}
.bx.fil.open{border:2px dashed currentColor;margin:calc(var(--u)*6);gap:calc(var(--u)*8)}
.bx.fil.open b{font-size:calc(var(--u)*18)}.bx.fil.open span{font-size:calc(var(--u)*8);max-width:80%}
@media(max-width:699px){.vs .yp>*{grid-column:span var(--w);grid-row:span var(--h)}}

/* half page: the name runs the full width of the advert */
@media(min-width:700px){.bx.s42 .b-top{display:flex;align-items:baseline;gap:calc(var(--u)*8);flex-wrap:wrap}.bx.s42 .b-top .b-hd{margin:0}
  .look-70 .bx.s42 .b-top{justify-content:center}
  .look-80 .bx.s42 .b-top,.look-00 .bx.s42 .b-top{align-items:center}}
.bx.s22{--g:1.7}

/* free lines: the number is the thing people want. Bold, every digit the same width so the numbers line up down the box; a website or
   "no number yet" is set lighter so it is never mistaken for one. */
.lr a{font-weight:600}
.lr span{font-weight:800;font-variant-numeric:tabular-nums lining-nums;letter-spacing:.01em;font-family:Archivo,'Archivo Narrow',Arial,sans-serif;font-size:.96em}
.lr span.w{font-weight:400;font-style:italic;font-family:var(--bd);font-size:.92em;letter-spacing:0}
.lr i{border-bottom-width:1.5px;opacity:.75}
.look-70 .lr span:not(.w){font-family:'Zilla Slab',Georgia,serif}
.look-80 .lr span:not(.w){font-family:'Archivo Narrow',Arial,sans-serif}
.lr span.w{padding-right:.2em}

/* FREE LINES, as the printed book set them (2 Oct): name, then the address indented beneath with dashes running to a bold number. */
.lsn{height:100%;display:flex;flex-direction:column;justify-content:space-between}
.le{font:400 calc(var(--u)*5.5)/calc(var(--u)*7.6) var(--bd);min-width:0}
.le .l1{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.le a{color:inherit;text-decoration:none}.le a:hover{text-decoration:underline}
.le .l2{display:flex;align-items:baseline;gap:calc(var(--u)*1);white-space:nowrap}
.le.two .l2{padding-left:calc(var(--u)*5)}
.le .l2>span,.le.one .l2>a{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}
.le .l2>span{font-size:.92em}
.le .l2>i{flex:1 1 calc(var(--u)*4);min-width:calc(var(--u)*3);height:0;border-bottom:1.5px dashed currentColor;transform:translateY(calc(var(--u)*-1.7));opacity:.8}
.le .l2>b{flex:none;font:800 1em/1 Archivo,Arial,sans-serif;font-variant-numeric:tabular-nums lining-nums;max-width:70%;overflow:hidden;text-overflow:ellipsis}
.le .l2>b.w{font:italic 400 .9em var(--bd)}
.le.c a{font-weight:800;text-transform:uppercase;letter-spacing:.01em}
.le.x .l1:before{content:"\25B6  ";font-size:.8em}
.le.x .l2>span{font-style:italic}
.le.me{background:#111;color:#fff;margin:0 calc(var(--u)*-2);padding:0 calc(var(--u)*2)}
.look-70 .le .l2>b:not(.w){font-family:'Zilla Slab',Georgia,serif;font-weight:700}
.look-80 .le .l2>b:not(.w){font-family:'Archivo Narrow',Arial,sans-serif;font-weight:700}

/* Boxed line: a ruled box in the run of free lines, the smallest paid place */
.le.bxd{border:1.5px solid currentColor;padding:calc(var(--u)*1.5) calc(var(--u)*2.5);margin:calc(var(--u)*1) 0;text-align:center}
.le.bxd .l1{font-size:1.12em}
.le.bxd .bh,.le.bxd .bt{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:.92em}
.le.bxd .bt{font-weight:700;text-transform:uppercase;font-size:.84em}
.le.bxd .l2{padding-left:0}
.look-90 .le.bxd{background:#fff}.look-90 .le.bxd .l1{color:#d21f1f}
.look-00 .le.bxd{background:#fff;border-radius:calc(var(--u)*2)}
.look-80 .le.bxd .l1{background:#111;color:var(--paper,#fbf5d0);margin:calc(var(--u)*-1.5) calc(var(--u)*-2.5) calc(var(--u)*1);padding:calc(var(--u)*.5) calc(var(--u)*2)}

/* NO GRID LINES (2 Oct): the page is measured in lines of type. Adverts carry their own rule; the free lines run down the columns
   packed tight, as the printed book set them. */
.yp{border-left:0}
.yp>*{border:0}
.yp>.ad16{border:1.5px solid var(--ink);margin:calc(var(--u)*1.5)}
.bx.ls{padding:calc(var(--u)*3) calc(var(--u)*3.5)}
.lsn{justify-content:flex-start}
.le{line-height:calc(var(--u)*7.5)}
.le.bxd{margin:calc(var(--u)*2) 0}
.lfil{flex:1 1 0;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(var(--u)*2);text-align:center;border-top:1px solid currentColor;border-bottom:1px solid currentColor;margin:calc(var(--u)*3) 0 calc(var(--u)*1);padding:calc(var(--u)*2) 0;font:italic 400 calc(var(--u)*5.6)/1.25 var(--bd);overflow:hidden}
.lfil b{font:var(--nmw) calc(var(--u)*8.5)/1.05 var(--nm);font-style:normal;text-transform:var(--nmcase)}
.lfil a{color:inherit}
.lfil .spot{width:calc(var(--u)*46)!important;height:calc(var(--u)*46)!important;flex:none}

/* one advert on its own: the page is only as wide as the advert */
.ypwrap.solo{margin:0;--u:calc(100cqw / var(--cols) / 100)}
.ypwrap.solo .yp{grid-template-columns:repeat(var(--cols),minmax(0,1fr));grid-auto-rows:calc(141.6 * 100cqw / var(--cols) / 100)}
.ypwrap.solo .yp>*{grid-column:1 / span var(--w);grid-row:1 / span var(--h);margin:0}

/* free line: name on one line, number on the next. Only a paid Bold line is in heavy capitals; a claimed free line just gets a tick. */
.le.c a{font-weight:inherit;text-transform:none;letter-spacing:0}
.le.c:not(.x):not(.bd):not(.bxd) .l1 a:after{content:" \2713"}
.le.bd a,.le.x a,.le.bxd a{font-weight:800;text-transform:uppercase;letter-spacing:.01em}
.le.bd .l2>b{font-size:1.12em}
.le.two .l2{padding-left:calc(var(--u)*5)}

/* arrows are for cross-references only ("HYPNOTHERAPISTS - See Hypnotherapists in Derby"); an advertiser's own line is plain bold */
.le.x .l1:before{content:none}
.le.xr{margin-top:calc(var(--u)*1.5);padding-left:calc(var(--u)*6);text-indent:calc(var(--u)*-6)}
.le.xr a{font-weight:800}.le.xr a:before{content:"\25B6";font-size:.8em;margin-right:calc(var(--u)*1.2);font-family:Arial,sans-serif}
.le.xr a span{font-weight:400;text-transform:none}.le.xr a span:before{content:"\2013  "}

/* 1970s NAMES: four settings, so a page of adverts is not a page of ovals. ns0 oval, ns1 reversed band, ns2 plain italic over a double rule,
   ns3 brush script. (Dealt out by listing for now; a picker in the editor later.) */
.look-70 .bx.s22 h3,.look-70 .bx.s42 h3,.look-70 .bx.s24 h3,.look-70 .bx.s44 h3{text-align:center}
.look-70 .bx.ns0:is(.s22,.s42,.s24,.s44) h3{background:#111;color:var(--paper,#fbf5d0);border-radius:50%;padding:calc(var(--u)*5) calc(var(--u)*12);font-family:Yellowtail,'Brush Script MT',cursive;font-style:normal;font-weight:400}
.look-70 .bx.ns1:is(.s22,.s42,.s24,.s44) h3{background:#111;color:var(--paper,#fbf5d0);padding:calc(var(--u)*4) calc(var(--u)*8)}
.look-70 .bx.ns2:is(.s22,.s42,.s24,.s44) h3{border-bottom:4px double #111;padding-bottom:calc(var(--u)*3)}
.look-70 .bx.ns3:is(.s22,.s42,.s24,.s44) h3{font-family:Yellowtail,'Brush Script MT',cursive;font-style:normal;font-weight:400;font-size:calc(var(--u)*12*var(--f)*var(--n,1));text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:.14em}
/* 1970s type, kept to a family: Old Standard for reading, Playfair italic for names, Zilla Slab for numbers and page furniture */
.look-70 .yphead{font-family:'Zilla Slab',Georgia,serif;font-weight:700}
.look-70 .bx .strap{font-family:'Playfair Display',Georgia,serif;font-style:italic;font-weight:700;font-size:calc(var(--u)*7*var(--g))}

/* PHONES (2 Oct): not a shrunken page. Adverts stack at full width in short, wide shapes; the free lines run two columns across. */
@media(max-width:699px){
  .yp{display:flex;flex-wrap:wrap;align-items:flex-start}
  .yp>*{grid-column:auto;grid-row:auto}
  .yp>.ad16{width:calc(100% - var(--u)*3);height:92cqw}
  .yp>.ad16.s44{height:118cqw}
  .yp>.ad16.s22{height:84cqw}
  .yp>.ad16.s21{height:54cqw}
  .yp>.ad16.s11{width:calc(50% - var(--u)*3);height:62cqw}
  .yp>.ad16.s12{width:calc(50% - var(--u)*3);height:104cqw}
  .yp>.ls{width:100%;height:auto}
  .lsn{display:block;columns:2;column-gap:calc(var(--u)*8);height:auto}
  .le{break-inside:avoid}
  .lfil{display:none}
  .bx.s42,.bx.s24,.bx.s44{--f:1.7;--g:1.5;--pl:5;display:grid;grid-template-columns:40% minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto auto auto;grid-template-areas:"top top" "art txt" "fl txt" "tel tel" "ft ft";column-gap:calc(var(--u)*6);row-gap:calc(var(--u)*4);padding:calc(var(--u)*6)}
  .bx.s44{--f:1.9;--g:1.7;--pl:7}
  .bx.s42.no-art,.bx.s24.no-art,.bx.s44.no-art{grid-template-areas:"top top" "txt txt" "fl fl" "tel tel" "ft ft"}
  .bx.s42 .b-art,.bx.s24 .b-art,.bx.s44 .b-art{max-height:none}
  .bx.s42 .b-txt,.bx.s24 .b-txt,.bx.s44 .b-txt{justify-content:center}
  .bx.s42 .since,.bx.s24 .since,.bx.s44 .since{display:none}
  .bx.s42 .offer.flimg,.bx.s24 .offer.flimg,.bx.s44 .offer.flimg{width:calc(var(--u)*58)}
  .bx.s42 .points,.bx.s24 .points{display:none}
}
@media(max-width:699px){
  .yp>.ad16{height:106cqw}.yp>.ad16.s44{height:124cqw}.yp>.ad16.s22{height:90cqw}.yp>.ad16.s21{height:54cqw}.yp>.ad16.s11{height:62cqw}.yp>.ad16.s12{height:104cqw}
  .bx.s22,.bx.s42,.bx.s24{--g:1.32;--pl:4}.bx.s44{--g:1.5;--pl:6}
  .bx.s22,.bx.s42,.bx.s24,.bx.s44{grid-template-rows:auto minmax(calc(var(--u)*46),1fr) auto auto auto;row-gap:calc(var(--u)*3)}
  .bx.s42 .offer.flimg,.bx.s24 .offer.flimg,.bx.s44 .offer.flimg,.bx.s22 .offer.flimg{width:calc(var(--u)*50)}
}

/* BACKDROP: a distant scene printed faintly along the foot of the advert, behind the words. BORDER: a drawn border in place of the plain rule. */
.bx .b-bg{position:absolute;left:0;right:0;bottom:0;height:62%;background:currentColor;opacity:.2;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center bottom;mask-position:center bottom;pointer-events:none;z-index:0}
.bx.has-bg>*:not(.b-bg){position:relative;z-index:1}
.bx.s42 .b-bg,.bx.s21 .b-bg{height:86%;-webkit-mask-position:right bottom;mask-position:right bottom}
.look-90 .bx .b-bg,.look-00 .bx .b-bg{background:var(--spot);opacity:.22}
.yp>.ad16.has-bd{border:calc(var(--u)*7) solid transparent}
.yp>.ad16.has-bd.s44,.yp>.ad16.has-bd.s42,.yp>.ad16.has-bd.s24{border-width:calc(var(--u)*10)}
.bx.ad16.has-bd{padding:calc(var(--u)*2.5)}
.bx.ad16.has-bd.s22,.bx.ad16.has-bd.s42,.bx.ad16.has-bd.s24,.bx.ad16.has-bd.s44{padding:calc(var(--u)*4)}
.look-80 .bx.ad16.has-bd .b-top,.look-00 .bx.ad16.has-bd .b-top{margin:0}
/* a narrow advert with a drawn border has less room: set the number smaller so it never runs out of the box */
.bx.ad16.has-bd.s12 .b-tel span,.bx.ad16.has-bd.s11 .b-tel span{font-size:calc(var(--u)*9.2)}
.bx.ad16.s12 .b-tel span,.bx.ad16.s11 .b-tel span{max-width:100%;overflow:hidden}
.bx.ad16.has-bd.s12 h3,.bx.ad16.has-bd.s11 h3{font-size:calc(var(--u)*8.4*var(--f)*var(--n,1));overflow-wrap:anywhere}

/* QUARTER PAGE, THE OTHER TWO WAYS (3 Oct): a strip across the page (4 boxes wide, 1 deep) and a column down it (1 wide, 4 deep). */
.bx.s41{--f:1.35;--g:1.1;--pl:3;display:grid;grid-template-columns:15% minmax(0,1fr) 31%;grid-template-rows:auto minmax(0,1fr) auto;grid-template-areas:"art top tel" "art txt fl" "ft ft ft";column-gap:calc(var(--u)*6);row-gap:calc(var(--u)*2);padding:calc(var(--u)*4) calc(var(--u)*6)}
.bx.s41.no-art{grid-template-columns:minmax(0,1fr) 31%;grid-template-areas:"top tel" "txt fl" "ft ft"}
.bx.s41 .b-art{min-height:0}
.bx.s41 .b-tel{margin:0;align-self:start}
.bx.s41 .points,.bx.s41 .strap,.bx.s41 .since{display:none}
.bx.s41 .offer.flimg{width:calc(var(--u)*40)}
.bx.s41 .b-txt{justify-content:center}
.bx.s14{--f:1.15;--g:1.05;--pl:9;gap:calc(var(--u)*4)}
.bx.s14 .b-art{flex:1 1 0;max-height:calc(var(--u)*110)}
.bx.s14 .offer.flimg{width:calc(var(--u)*70)}
.look-70 .bx.s41 h3,.look-70 .bx.s14 h3{text-align:left}
@media(max-width:699px){
  .yp>.ad16.s41{height:60cqw}
  .yp>.ad16.s14{width:calc(50% - var(--u)*3);height:150cqw}
  .bx.s41{grid-template-columns:34% minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto;grid-template-areas:"art top" "art txt" "tel tel";--f:1.2;--g:1.05;--pl:3;padding:calc(var(--u)*4)}
  .bx.s41.no-art{grid-template-columns:minmax(0,1fr);grid-template-areas:"top" "txt" "tel"}
  .bx.s41 .b-fl,.bx.s41 .foot{display:none}
}
.bx.ad16.s14 .b-tel span{max-width:100%;overflow:hidden}
.bx.ad16.has-bd.s14 .b-tel span{font-size:calc(var(--u)*9.2)}
.bx.ad16.has-bd.s14 h3{font-size:calc(var(--u)*8.4*var(--f)*var(--n,1));overflow-wrap:anywhere}
/* The column (1 box wide, the full depth of the page) is a tall shape: fill it. Bigger type, the picture at full width, and the parts
   spread down the column so the number sits at the foot, as a single-column advert did in print. */
@media(min-width:700px){
  .bx.s14{--f:1.5;--g:1.3;--pl:14;justify-content:space-between;gap:calc(var(--u)*5);padding:calc(var(--u)*6) calc(var(--u)*5)}
  .bx.s14 .b-art{flex:0 0 auto;width:100%;aspect-ratio:1 / 1;max-height:none}
  .bx.s14 .b-txt{gap:calc(var(--u)*5)}
  .bx.s14 .b-tp span{display:block}.bx.s14 .b-tp span+span:before{content:none}
  .bx.s14 .b-tel{margin-top:0}
  .bx.s14 .b-tel span{font-size:calc(var(--u)*12.5);white-space:normal;line-height:1.05}
  .bx.s14 .offer.flimg{width:calc(var(--u)*80)}
  .bx.s14 .b-bg{height:34%}
  .bx.s12{justify-content:space-between}
}
@media(min-width:700px){
  .bx.s14 h3{font-size:calc(var(--u)*10.5*var(--n,1));overflow-wrap:normal;word-break:normal;hyphens:none}
  .bx.ad16.has-bd.s14 h3{font-size:calc(var(--u)*9.4*var(--n,1));overflow-wrap:normal}
}
/* NAMES NEVER BLEED (3 Oct). In a one-box-wide advert the name is capped so its LONGEST WORD fits the column: --nw is that word's
   length (set per advert), --cw is how wide a letter runs in each look's name face, --rm is the room across the column. */
.ypwrap{--cw:.62}
.look-70{--cw:.6}.look-80{--cw:.5}.look-90{--cw:.82}.look-00{--cw:.66}
.bx.s11,.bx.s12,.bx.s14{--rm:88}
.bx.has-bd.s11,.bx.has-bd.s12,.bx.has-bd.s14{--rm:74}
.bx.ad16.s11 h3,.bx.ad16.s12 h3,.bx.ad16.s14 h3,.bx.ad16.has-bd.s11 h3,.bx.ad16.has-bd.s12 h3,.bx.ad16.has-bd.s14 h3{font-size:min(calc(var(--u)*10.5*var(--n,1)),calc(var(--u)*var(--rm)/(var(--nw,8)*var(--cw))));overflow-wrap:normal;word-break:normal;hyphens:none}
@media(min-width:700px){.bx.ad16.s14 h3,.bx.ad16.has-bd.s14 h3{font-size:min(calc(var(--u)*11.5*var(--n,1)),calc(var(--u)*var(--rm)/(var(--nw,8)*var(--cw))))}}
/* ...and neither does the number: capped to the column in every one-box-wide advert */
.bx.ad16.s11 .b-tel span,.bx.ad16.s12 .b-tel span,.bx.ad16.has-bd.s11 .b-tel span,.bx.ad16.has-bd.s12 .b-tel span{font-size:min(calc(var(--u)*11*var(--f)),calc(var(--u)*var(--rm)/7.9))}
/* a Small (one box) carries its drawing too: between the words and the number */
.bx.s11 .b-art{flex:1 1 0;min-height:calc(var(--u)*34)}
.bx.s11{gap:calc(var(--u)*2)}
/* THE FULL PAGE IS NOT THE WHOLE PAGE (3 Oct, Peter: "in a magazine a full page is a full page but on a phone or computer it's just a
   webpage"). It is 3 boxes by 3 at the top left of its town's first page; beside it runs a column of free lines, and under it one
   more advert of up to a Quarter (a strip across) or more free lines. It carries class s44 as well, so it keeps the Full layout. */
@media(min-width:700px){
  .bx.s44.s33{--f:2.4;--g:1.7;--pl:9;padding:calc(var(--u)*9);column-gap:calc(var(--u)*9);row-gap:calc(var(--u)*6)}
  .bx.s44.s33 .b-tel span{font-size:calc(var(--u)*35)}
  .bx.s44.s33 .offer.flimg{width:calc(var(--u)*84)}
  .bx.s44.s33 .b-txt{gap:calc(var(--u)*5)}
}
/* what we know about the practitioner, said on the advert itself: a trainee's advert always says so */
.bx .b-st{display:inline-block;margin-top:calc(var(--u)*2);font:800 calc(var(--u)*4.6*var(--g))/1 var(--bd);text-transform:uppercase;letter-spacing:.06em;border:1.5px solid currentColor;padding:calc(var(--u)*1.2) calc(var(--u)*2.2)}
.bx .b-st.ok{border:0;padding:0;font-weight:600;letter-spacing:.03em}
.look-80 .bx.ad16 .b-top .b-st,.look-00 .bx.ad16 .b-top .b-st{border-color:currentColor}

/* a Boxed line's name may run to two lines: a long name is never cut off in the advert someone paid for */
.le.bxd .l1{white-space:normal;overflow:visible;text-overflow:clip;line-height:1.15;padding-bottom:calc(var(--u)*1)}
/* links on a member's advert: their own site, booking and shop */
.bx .b-lk{display:flex;flex-wrap:wrap;justify-content:center;gap:calc(var(--u)*1.5) calc(var(--u)*2.5);margin-top:calc(var(--u)*2)}
.bx .b-lk a{font:700 calc(var(--u)*4.7*var(--g))/1 var(--bd);text-transform:uppercase;letter-spacing:.04em;color:inherit;text-decoration:underline;text-underline-offset:.18em;white-space:nowrap}
.bx .b-lk a:hover{text-decoration-thickness:2px}
.look-90 .bx .b-lk a,.look-00 .bx .b-lk a{color:var(--spot)}
.bx.s11 .b-lk a{font-size:calc(var(--u)*4.5)}
.bx.s11 .b-art{min-height:calc(var(--u)*16)}
.bx.s11 .b-lk{margin-top:calc(var(--u)*1.2);gap:calc(var(--u)*1) calc(var(--u)*2.5)}
.bx.s11 .b-st{margin-top:calc(var(--u)*1.2);font-size:calc(var(--u)*4)}
/* a flash under the picture must never ride up over it or down over the number */
.bx.s22 .b-fl{align-self:end;overflow:hidden;max-height:calc(var(--u)*62)}
.bx.s22.has-art.has-fl{grid-template-rows:auto minmax(calc(var(--u)*50),1fr) auto auto auto}
/* "That's you": the practitioner's own line picked out in black. The name has to be white too (the page's link colour was winning,
   which left a black bar with only a number in it). */
.le.me,.le.me a,.le.me b,.le.me .l1,.le.me .l2{color:#fff!important}
.le.me{padding-top:calc(var(--u)*1);padding-bottom:calc(var(--u)*1);border-radius:2px}
.le.me .l1 a{font-weight:800}
.le.me .l2>i{border-bottom-color:#fff;opacity:.7}
/* Double across: the words sit in the middle of the space beside the picture, not bunched at the top with a gap above the number */
.bx.s21 .b-txt{justify-content:center}
.bx.s21{--pl:5}
/* 2000s: full colour meant more than one colour. The number and the star bullets take a second colour that sets off the advert's own. */
.look-00 .bx.ad16{--spot2:#d21f1f}
.look-00 .bx.ad16[style*="2f4738"]{--spot2:#b3541e}
.look-00 .bx.ad16[style*="8a3b6b"]{--spot2:#1d5fa3}
.look-00 .bx.ad16[style*="b3541e"]{--spot2:#2f4738}
.look-00 .bx .b-tel span{color:var(--spot2)}
.look-00 .bx .points span:before{color:var(--spot2)}
.look-00 .bx .b-lk a{color:var(--spot2)}
.look-00 .bx .foot{border-top:2px solid var(--spot2)}
/* 1980s, corrected from a real 1989 page Peter found (3 Oct): by the late 80s display adverts DID carry a colour, blue or red, in a
   heavy rounded border, with the name set big in that colour, and blue and red adverts sat next to each other on the same page.
   One colour per advert (dealt out so neighbours differ; blue if the advertiser chose blue), black for everything else. */
.look-80 .bx.ad16{--spot:#1f4fa0;--box:#fffdf0;border:calc(var(--u)*1.6) solid var(--spot);border-radius:calc(var(--u)*5)}
.look-80 .bx.ad16.ns1,.look-80 .bx.ad16.ns3{--spot:#d21f1f}
.look-80 .bx.ad16[style*="1d5fa3"]{--spot:#1f4fa0}
.look-80 .bx.ad16.has-bd{border-radius:0}
.look-80 .bx.ad16 .b-top{background:var(--spot);color:#fff}
.look-80 .bx.ad16 .b-top h3{text-shadow:calc(var(--u)*.6) calc(var(--u)*.6) 0 rgba(0,0,0,.35)}
.look-80 .bx .b-tel span{color:var(--spot);border-top-color:var(--spot);border-bottom-color:var(--spot)}
.look-80 .bx .strap{color:var(--spot)}
.look-80 .bx .points span:before,.look-80 .bx .b-tp span+span:before{color:var(--spot)}
.look-80 .bx .offer.flimg{color:var(--spot)}
.look-80 .bx .since{color:var(--spot)}
.look-80 .le.x .l1 a:after,.look-80 .le.bd .l1 a:after{content:" \2605"}
.look-80 .le.bxd .l1,.look-80 .le.bxd .l1 a{color:#fbf5d0!important}

/* 1980s, SETTLED from the two real pages Peter found (3 Oct): a 1985 spread is BLACK INK ONLY and gets its variety from the adverts
   themselves: some reversed out (white on black), every border different, every name in a different face, a drawing in most, and the
   word "Phone" set before the number. The 1989 page with blue and red adverts in heavy rounded borders is where the 1990s look starts,
   so that treatment has moved there. Four settings, dealt out by ns0..ns3 so neighbours differ (the editor's "how your name is set"). */
.look-80 .bx.ad16,.look-80 .bx.ad16.ns1,.look-80 .bx.ad16.ns3,.look-80 .bx.ad16[style*="1d5fa3"]{--spot:#111;--box:transparent;border-radius:0}
.look-80 .bx.ad16{border:1.5px solid #111}
.look-80 .bx.ad16 .b-top{background:none;color:#111;margin:0;padding:0}
.look-80 .bx.ad16 .b-top h3{text-shadow:none}
.look-80 .bx .b-tel span{color:inherit;border-top:0;border-bottom:0;padding:0;font-family:'Archivo Narrow',Arial,sans-serif;font-weight:700;letter-spacing:.02em}
.look-80 .bx .b-tel span:before{content:"Phone ";font-size:.62em;font-weight:600;letter-spacing:.04em}
.look-80 .bx .strap,.look-80 .bx .since,.look-80 .bx .offer.flimg{color:inherit}
.look-80 .bx .points span:before,.look-80 .bx .b-tp span+span:before{color:inherit}
/* ns0: plain rule, heavy condensed capitals */
.look-80 .bx.ad16.ns0 h3{font-family:Anton,Impact,sans-serif;font-weight:400;text-transform:uppercase;letter-spacing:.03em}
/* ns1: the whole advert reversed out of black */
.look-80 .bx.ad16.ns1{background:#111;color:#fbf3c8;border-color:#111}
.look-80 .bx.ad16.ns1 .b-top{color:#fbf3c8}
.look-80 .bx.ad16.ns1 h3{font-family:Anton,Impact,sans-serif;font-weight:400;text-transform:uppercase;letter-spacing:.04em}
.look-80 .bx.ad16.ns1 .b-tel span{border:1.5px solid #fbf3c8;padding:calc(var(--u)*1.5) calc(var(--u)*2)}
.look-80 .bx.ad16.ns1 .offer.flimg span{color:#111}
.look-80 .bx.ad16.ns1 .offer.flimg{color:#fbf3c8}
.look-80 .bx.ad16.ns1 .offer.flimg:before{background:#fbf3c8}
.look-80 .bx.ad16.ns1 .b-bg{opacity:.28}
/* ns2: rounded double border, the name in an italic serif like a sign-writer's script */
.look-80 .bx.ad16.ns2{border:4px double #111;border-radius:calc(var(--u)*6)}
.look-80 .bx.ad16.ns2 h3{font-family:Georgia,'Times New Roman',serif;font-style:italic;font-weight:700;text-transform:none;letter-spacing:0;text-align:center}
.look-80 .bx.ad16.ns2 .b-hd{text-align:center}
/* ns3: dashed "cut out and keep" border, the name in a black band */
.look-80 .bx.ad16.ns3{border:2px dashed #111}
.look-80 .bx.ad16.ns3 .b-top{background:#111;color:#fbf3c8;padding:calc(var(--u)*3) calc(var(--u)*4)}
.look-80 .bx.ad16.ns3 h3{font-family:Anton,Impact,sans-serif;font-weight:400;text-transform:uppercase}
.look-80 .bx.ad16.has-bd{border-style:solid;border-color:transparent;border-radius:0}

/* 1990s: the colour arrives. One spot colour per advert in a heavy rounded border (the 1989 page), red unless the advertiser chose blue. */
.look-90 .bx.ad16{border:calc(var(--u)*1.5) solid var(--spot);border-radius:calc(var(--u)*5)}
.look-90 .bx.ad16.has-bd{border-color:transparent;border-radius:0}
/* 1990s, toned down from a real early-90s page Peter found (3 Oct): "very little use of red". The adverts are black; the colour is an
   ACCENT on one or two things (the stamp or flash, the "since" seal, the star bullets, the strapline), not the whole advert. */
.look-90 .bx.ad16{border:1.5px solid #111;border-radius:0}
.look-90 .bx.ad16.ns2{border:3px solid #111;border-radius:calc(var(--u)*7)}
.look-90 .bx.ad16.has-bd{border-color:transparent;border-radius:0}
.look-90 .bx h3{color:#111}
.look-90 .bx .b-tel span{background:none;color:#111;padding:0;border-top:3px solid #111;padding-top:calc(var(--u)*1.5)}
.look-90 .bx .bxart{background:#111}
.look-90 .bx .b-bg{background:#111;opacity:.16}
.look-90 .bx .b-lk a{color:#111}
.look-90 .bx.ad16.ns1 .b-top{background:#111;color:#fff;margin:calc(var(--u)*-4) calc(var(--u)*-4) 0;padding:calc(var(--u)*3) calc(var(--u)*4)}
.look-90 .bx.ad16.ns1 h3{color:#fff}
.look-90 .bx.s22.ns1 .b-top{margin:calc(var(--u)*-6) calc(var(--u)*-6) 0;padding:calc(var(--u)*5) calc(var(--u)*6)}
.look-90 .bx.s24.ns1 .b-top,.look-90 .bx.s42.ns1 .b-top,.look-90 .bx.s44.ns1 .b-top{margin:0;padding:calc(var(--u)*6) calc(var(--u)*8)}
.look-90 .bx.ad16.has-bd.ns1 .b-top{margin:0}
/* the accent: flash, seal, bullets, strapline */
.look-90 .bx .offer{color:var(--spot)}.look-90 .bx .since{color:var(--spot)}.look-90 .bx .strap{color:var(--spot)}
.look-90 .bx .offer.flimg span{color:var(--spot)}

/* 2000s, from one of the last printed books Peter found (3 Oct): the BIG adverts are rich, saturated colour from edge to edge, with a
   photograph worked into the colour, white lettering, gold for the small print, and no border at all. The SMALL adverts stayed black
   on the page: a double rule, the name in a flowing italic, and the number reversed out of a black band along the foot. */
.look-00 .bx.ad16:is(.s44,.s42,.s24,.s22,.s41){--deep:color-mix(in srgb,var(--ad,#2f4738) 74%,#000);--gold:#f6d98b;
  background:radial-gradient(75% 38% at 50% 112%,rgba(255,255,255,.1) 0 99%,transparent 100%),radial-gradient(120% 90% at 85% 0%,color-mix(in srgb,var(--ad,#2f4738) 88%,#fff) 0%,var(--ad,#2f4738) 38%,var(--deep) 100%);color:#fff;border:0;border-radius:calc(var(--u)*3);box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
.look-00 .bx.ad16:is(.s44,.s42,.s24,.s22,.s41)>*:not(.b-bg):not(.b-ph):not(.could-tag){position:relative;z-index:1}
.look-00 .bx.ad16:is(.s44,.s42,.s24,.s22,.s41) .b-ph{display:block;position:absolute;inset:0;z-index:0;opacity:.26;mix-blend-mode:luminosity;background-size:cover;background-position:center;border-radius:inherit}
.look-00 .bx.ad16:is(.s44,.s42,.s24,.s22,.s41) .b-top{background:none;margin:0;padding:0;border-radius:0;text-shadow:0 calc(var(--u)*.8) calc(var(--u)*1.6) rgba(0,0,0,.45)}
.look-00 .bx.ad16:is(.s44,.s42,.s24,.s22,.s41) h3{color:#fff}
.look-00 .bx.ad16:is(.s44,.s42,.s24,.s22,.s41) .b-hd{color:var(--gold)}
.look-00 .bx.ad16:is(.s44,.s42,.s24,.s22,.s41) .bxart{background:#fff}
.look-00 .bx.ad16:is(.s44,.s42,.s24,.s22,.s41) .b-bg{background:#fff;opacity:.14}
.look-00 .bx.ad16:is(.s44,.s42,.s24,.s22,.s41) .strap{color:var(--gold)}
.look-00 .bx.ad16:is(.s44,.s42,.s24,.s22,.s41) .b-tp span{background:rgba(255,255,255,.16);color:#fff}
.look-00 .bx.ad16:is(.s44,.s42,.s24,.s22,.s41) .points{border-color:rgba(255,255,255,.5)}
.look-00 .bx.ad16:is(.s44,.s42,.s24,.s22,.s41) .points span:before{color:var(--gold)}
.look-00 .bx.ad16:is(.s44,.s42,.s24,.s22,.s41) .b-tel span{color:#fff;text-shadow:0 calc(var(--u)*.8) calc(var(--u)*1.6) rgba(0,0,0,.45)}
.look-00 .bx.ad16:is(.s44,.s42,.s24,.s22,.s41) .b-lk a{color:var(--gold)}
.look-00 .bx.ad16:is(.s44,.s42,.s24,.s22,.s41) .foot{border-top:1px solid rgba(255,255,255,.5);color:#fff}
.look-00 .bx.ad16:is(.s44,.s42,.s24,.s22,.s41) .since{color:var(--gold)}
.look-00 .bx.ad16:is(.s44,.s42,.s24,.s22,.s41) .b-st{color:var(--gold)}
.look-00 .bx.ad16:is(.s44,.s42,.s24,.s22,.s41) .offer{color:var(--gold)}
.look-00 .bx.ad16:is(.s44,.s42,.s24,.s22,.s41) .offer.flimg{color:var(--gold);filter:none}
.look-00 .bx.ad16:is(.s44,.s42,.s24,.s22,.s41) .offer.flimg span{color:#fff}
/* the small ones: black on white, double rule, italic name, number in a black band at the foot */
.look-00 .bx.ad16:is(.s11,.s12,.s21){--box:#fffdf2;border:3px double #111;border-radius:0;color:#111}
.look-00 .bx.ad16:is(.s11,.s12,.s21).has-bd{border-style:solid;border-color:transparent}
.look-00 .bx.ad16:is(.s11,.s12,.s21) .b-top{background:none;color:#111;margin:0;padding:0;text-shadow:none;text-align:center}
.look-00 .bx.ad16:is(.s11,.s12,.s21) h3{font-family:Georgia,'Times New Roman',serif;font-style:italic;font-weight:700;text-transform:none}
.look-00 .bx.ad16:is(.s11,.s12,.s21) .bxart{background:#111}
.look-00 .bx.ad16:is(.s11,.s12,.s21) .b-tel span{background:#111;color:#fff;padding:calc(var(--u)*2) calc(var(--u)*1)}
.look-00 .bx.ad16:is(.s11,.s12,.s21) .b-lk a{color:#111}
.look-00 .bx.ad16:is(.s11,.s12,.s21) .b-tp span{background:none;padding:0;margin:0}
.look-00 .bx.ad16:is(.s11,.s12,.s21) .b-tp span+span:before{content:" \2022  "}

/* Decade pictures (3 Oct): drawings that keep their own colours (1950s yellow, 1990s red) and the 2000s photographs are not masks */
.bx .bxart.bximg,.bx .bxart.bxphoto{-webkit-mask-image:none!important;mask-image:none!important}
.bx .bxart.bxphoto{border-radius:calc(var(--u)*2);box-shadow:0 0 0 1px rgba(0,0,0,.12)}

/* 1950s, from Peter's General Telephone advert and the c.1960 San Francisco page: built on the 1970s letterpress (the page carries
   both classes), then: white adverts in black ink, condensed capitals, the big adverts headed by a grey SCREENED panel with the
   name reversed out in white, starred lists, and yellow used once, on the telephone number, as the one spot of colour. */
.look-60 .bx.ad16{--box:#fff;--spot:#111;border:1.5px solid #111!important;border-radius:0!important;outline:0!important}
.look-60 .bx.ad16 h3,.look-60 .bx.ad16[class*="ns"] h3{font-family:'Archivo Narrow',Arial,sans-serif!important;font-style:normal!important;font-weight:700!important;text-transform:uppercase!important;letter-spacing:.02em;background:none!important;color:inherit!important;border:0!important;border-radius:0!important;text-decoration:none!important;padding:0!important}
.look-60 .bx.ad16 .b-top{background:none;color:#111;margin:0;padding:0;text-shadow:none}
.look-60 .bx.ad16:is(.s44,.s42,.s24,.s22,.s41) .b-top{background:radial-gradient(circle,#2e2e2e 40%,transparent 43%) 0 0/calc(var(--u)*1.5) calc(var(--u)*1.5),#8c8c8c;color:#fff;margin:calc(var(--u)*-4) calc(var(--u)*-4) 0;padding:calc(var(--u)*4) calc(var(--u)*5);text-shadow:0 1px 0 #000}
.look-60 .bx.ad16:is(.s44,.s42,.s24,.s22,.s41) .b-top .b-hd{color:#fff}
.look-60 .bx .strap{font-family:Georgia,'Times New Roman',serif;font-style:italic;font-weight:700}
.look-60 .bx .b-tel span{background:#f2d100;color:#111;border:1.5px solid #111!important;padding:calc(var(--u)*1.5) calc(var(--u)*3);font-family:'Archivo Narrow',Arial,sans-serif;font-weight:700}
.look-60 .bx .b-tp span{background:none;color:#111;padding:0;margin:0}
.look-60 .bx .b-tp span:before{content:"\2605  ";font-size:.8em}
.look-60 .bx .points span:before{content:"\2605  "}
.look-60 .yphead{font-family:'Archivo Narrow',Arial,sans-serif;text-transform:uppercase;letter-spacing:.04em}
.look-60 .bx .b-tp span{margin-right:.55em}.look-60 .bx .b-tp span+span:before{content:"\2605  "}

/* gap fillers that point to a kind of therapy (3 Oct): a cartoon with a punny headline, or in the 2000s a calm photograph */
.lfil.pun .spot,.lfil.pic .spot{width:calc(var(--u)*58)!important;height:calc(var(--u)*58)!important}
.lfil .artimg.spot{background:currentColor;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center}
.lfil .fph{background-size:cover;background-position:center;border-radius:calc(var(--u)*3);box-shadow:0 calc(var(--u)*1) calc(var(--u)*3) rgba(0,0,0,.2)}
.lfil.pun a,.lfil.pic a{font-style:normal;font-weight:700}

/* ===== The decade slider (3 Oct 2026): one telephone per era, drag or tap to move through the years. Shown in every paper look. ===== */
.dslider{position:fixed;left:50%;bottom:10px;transform:translateX(-50%);z-index:60;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-radius:22px;box-shadow:0 14px 36px -12px rgba(0,0,0,.45),0 0 0 1px rgba(0,0,0,.08);padding:8px 14px 6px;width:min(520px,calc(100vw - 20px));box-sizing:border-box;font-family:'Plus Jakarta Sans',Arial,sans-serif}
.dslider .dtrack{display:flex;justify-content:space-between;gap:4px}
.dslider .dstop{flex:1 1 0;display:flex;flex-direction:column;align-items:center;gap:1px;text-decoration:none;color:#6d665b;font:700 11px/1 'Plus Jakarta Sans',Arial,sans-serif;opacity:.6;transition:opacity .2s,transform .2s}
.dslider .dstop img{width:36px;height:36px;object-fit:contain;transition:transform .25s}
.dslider .dstop.on{opacity:1;color:#26231f}
.dslider .dstop.on img{transform:scale(1.35) translateY(-3px)}
.dslider .dstop:hover{opacity:1}
.dslider input[type=range]{width:100%;margin:4px 0 0;accent-color:#26231f;cursor:pointer}
@media (max-width:420px){.dslider .dstop img{width:28px;height:28px}.dslider{padding:6px 8px 4px}}

/* ===== 2020s ===== */
.look-20{--ink:#26231f;--box:#fff;--spot:#26231f;--nm:Fraunces,Georgia,serif;--nmw:700;--nmcase:none;--bd:'Plus Jakarta Sans',system-ui,sans-serif;--tl:'Plus Jakarta Sans',system-ui,sans-serif;--card:#fff;--soft:color-mix(in srgb,var(--ad,#8fae9b) 14%,#fff)}
.look-20 .yp{gap:calc(var(--u)*3)}
.look-20 .yphead{border:0;font:700 13px 'Plus Jakarta Sans',system-ui,sans-serif;text-transform:none;letter-spacing:0;color:#8a8174;padding:4px 6px}
.look-20 .yphead span{font:700 18px Fraunces,Georgia,serif;color:var(--ink)}
.look-20 .bx.ad16{--box:var(--card);border:0!important;border-image:none!important;outline:0!important;border-radius:calc(var(--u)*6)!important;background:linear-gradient(165deg,color-mix(in srgb,var(--ad,#8fae9b) 16%,var(--card)) 0%,var(--card) 55%)!important;box-shadow:0 calc(var(--u)*2) calc(var(--u)*10) calc(var(--u)*-2) rgba(60,45,25,.18),0 0 0 1px rgba(60,45,25,.07);color:var(--ink);transition:transform .25s ease,box-shadow .25s ease;overflow:hidden}
.look-20 .bx.ad16:hover{transform:translateY(-4px);box-shadow:0 18px 40px -14px rgba(60,45,25,.35),0 0 0 1px rgba(60,45,25,.08)}
.look-20 .bx .b-bg,.look-20 .bx .b-ph{display:none!important}
.look-20 .bx.ad16 .b-top{background:none!important;color:var(--ink)!important;margin:0!important;padding:0!important;text-shadow:none!important;text-align:left}
.look-20 .bx.ad16 h3,.look-20 .bx.ad16[class*="ns"] h3{font-family:Fraunces,Georgia,serif!important;font-weight:700!important;font-style:normal!important;text-transform:none!important;letter-spacing:-.01em;background:none!important;color:var(--ink)!important;border:0!important;border-radius:0!important;padding:0!important;text-decoration:none!important;text-align:left!important}
.look-20 .bx .b-hd{color:#7a7266;font-weight:600;text-align:left!important;margin-top:calc(var(--u)*1)!important}
.look-20 .bx .b-st{border:0!important;color:#5f8a70;font-weight:700;text-transform:none;letter-spacing:0}
.look-20 .bx .b-tp span{display:inline-block;background:color-mix(in srgb,var(--ad,#8fae9b) 18%,#fff);color:var(--ink);border-radius:999px;padding:calc(var(--u)*1.2) calc(var(--u)*3);margin:0 calc(var(--u)*1.2) calc(var(--u)*1.2) 0;font-weight:600}
.look-20 .bx .b-tp span+span:before{content:none!important}
.look-20 .bx .strap{font-family:Fraunces,Georgia,serif;font-style:italic;font-weight:500;color:color-mix(in srgb,var(--ad,#8fae9b) 70%,#26231f)}
.look-20 .bx .points{border:0!important}
.look-20 .bx .points span:before{content:"\2713  ";color:#5f8a70}
.look-20 .bx .foot{border-top:1px solid rgba(60,45,25,.1)!important;color:#7a7266;text-transform:none!important;letter-spacing:0!important}
/* the number is a big friendly button with the 3D handset */
.look-20 .bx .b-tel span{display:inline-flex;align-items:center;gap:.35em;background:var(--ink);color:#fff!important;border:0!important;border-radius:999px;padding:calc(var(--u)*1.8) calc(var(--u)*4.5) calc(var(--u)*1.8) calc(var(--u)*2);font-family:'Plus Jakarta Sans',system-ui,sans-serif!important;font-weight:800;letter-spacing:0;text-shadow:none!important;box-shadow:0 6px 16px -8px rgba(0,0,0,.5)}
.look-20 .bx .b-tel span:before{content:"";width:1.25em;height:1.25em;flex:none;background:url(/art/3d/icons/call.png) center/contain no-repeat}
.look-20 .bx .b-lk a{display:inline-flex;align-items:center;gap:.3em;background:#fff;border:1px solid rgba(60,45,25,.12);border-radius:999px;padding:.25em .8em .25em .4em;color:var(--ink)!important;text-decoration:none;font-weight:700}
.look-20 .bx .b-lk a:before{content:"";width:1.4em;height:1.4em;flex:none;background:url(/art/3d/icons/website.png) center/contain no-repeat}
.look-20 .bx .b-lk a[href*="book.php"]:before{background-image:url(/art/3d/icons/book.png)}
.look-20 .bx .b-lk a[href*="shop.php"]:before{background-image:url(/art/3d/icons/shop.png)}
/* what paper never could: checked, stars, next free time, video */
.look-20 .bx .b-now{display:flex;flex-wrap:wrap;gap:calc(var(--u)*1.5);margin-top:calc(var(--u)*2.5)}
.look-20 .bx .b-now>*{display:inline-flex;align-items:center;gap:.3em;background:rgba(255,255,255,.85);border:1px solid rgba(60,45,25,.1);border-radius:999px;padding:.2em .7em .2em .3em;font:700 calc(var(--u)*4.6)/1.2 'Plus Jakarta Sans',system-ui,sans-serif;color:var(--ink);text-decoration:none}
.look-20 .bx .b-now .nx{background:#e9f2ec;border-color:#bcd5c4}
.look-20 .i3d{width:1.5em;height:1.5em;object-fit:contain;flex:none}
/* flash and seals go soft too */
.look-20 .bx .b-fl .offer{filter:none!important}
.look-20 .bx .since{border-color:rgba(60,45,25,.25)!important;color:#7a7266}
/* free lines: a calm white panel, no dashes */
.look-20 .bx.ls,.look-20 .bx.fil{background:var(--card);border-radius:calc(var(--u)*6);box-shadow:0 0 0 1px rgba(60,45,25,.07)}
.look-20 .le .l2>i{border-bottom:1px dotted rgba(60,45,25,.25)}
.look-20 .le .l2>b{font-family:'Plus Jakarta Sans',system-ui,sans-serif;font-weight:800}
.look-20 .le.c .l1 a{font-weight:800}
.look-20 .lfil{border:0!important}
.look-20 .lfil b{font-family:Fraunces,Georgia,serif;font-weight:700}
.look-20 .lfil.ppl .fph{border-radius:50%;width:calc(var(--u)*62)!important;height:calc(var(--u)*62)!important;box-shadow:0 0 0 calc(var(--u)*1.5) #fff,0 10px 24px -10px rgba(0,0,0,.4)}
@media (prefers-color-scheme:dark){
  .look-20{--ink:#f1ece3;--card:#26231f}
  .look-20 .bx .b-hd,.look-20 .bx .foot,.look-20 .yphead{color:#a99f90}
  .look-20 .bx .b-tel span{background:#f1ece3;color:#1e1c19!important}
  .look-20 .bx .b-lk a,.look-20 .bx .b-now>*{background:#2f2b26;border-color:#3d372f}
  .look-20 .bx .b-now .nx{background:#24342a;border-color:#3b5444}
  .look-20 .bx .b-tp span{background:color-mix(in srgb,var(--ad,#8fae9b) 30%,#26231f)}
  .dslider{background:rgba(38,35,31,.92)}.dslider .dstop{color:#a99f90}.dslider .dstop.on{color:#f1ece3}.dslider input[type=range]{accent-color:#f1ece3}
}
/* 2020s fixes: no shouting capitals, the number button stays inside its card, old ink drawings take a soft tint, the drawn
   starbursts and bubbles become a calm pill with the 3D gift, the 'since' seal sits straight */
.look-20 .bx.ad16 *{text-transform:none!important}
.look-20 .bx .points{text-align:left;font-weight:600}
.look-20 .bx .b-tel{min-width:0;max-width:100%}
.look-20 .bx .b-tel span{max-width:100%;box-sizing:border-box;font-size:.78em;white-space:nowrap}
.look-20 .bx .bxart{background:color-mix(in srgb,var(--ad,#8fae9b) 65%,#26231f)}
.look-20 .bx .offer,.look-20 .bx .offer.flimg{aspect-ratio:auto!important;width:auto!important;max-width:100%;transform:none!important;display:inline-flex;align-items:center;gap:.45em;background:#fff1e6;border:1px solid #f2c9a8!important;border-radius:999px;padding:.35em 1em .35em .35em!important;container-type:normal;color:#26231f}
.look-20 .bx .offer:before,.look-20 .bx .offer.flimg:before{content:""!important;display:block!important;position:static!important;inset:auto!important;width:1.7em;height:1.7em;flex:none;background:url(/art/3d/icons/free-gift.png) center/contain no-repeat!important;-webkit-mask:none!important;mask:none!important}
.look-20 .bx .offer span,.look-20 .bx .offer.flimg span{max-width:none!important;font:800 calc(var(--u)*5.2*var(--g))/1.15 'Plus Jakarta Sans',system-ui,sans-serif!important;letter-spacing:0;color:#26231f!important}
.look-20 .bx .since{transform:none;outline:0;border:1px solid rgba(60,45,25,.18);background:#fff;color:#7a7266;font-family:'Plus Jakarta Sans',system-ui,sans-serif}
@media (prefers-color-scheme:dark){.look-20 .bx .offer,.look-20 .bx .offer.flimg{background:#3a2c22;border-color:#5a4232!important}.look-20 .bx .offer span{color:#f1ece3!important}.look-20 .bx .since{background:#26231f}}
.look-20 .bx .b-tel span{font-size:calc(var(--u)*7)!important}
.look-20 .bx:is(.s22,.s42,.s24) .b-tel span{font-size:calc(var(--u)*11)!important}
.look-20 .bx.s44 .b-tel span{font-size:calc(var(--u)*18)!important}
.look-20 .bx.s41 .b-tel span{font-size:calc(var(--u)*10)!important}
.look-20 .bx.s11 .b-tel span{font-size:calc(var(--u)*5.5)!important}
.look-20 .bx .offer span,.look-20 .bx .offer.flimg span{transform:none!important;rotate:none!important}

/* the slider never sits on top of the last adverts: room below the page for it, and a slimmer bar */
body:has(.dslider){padding-bottom:110px}
.dslider{padding:6px 12px 4px}
.dslider .dstop img{width:30px;height:30px}
.dslider .dstop.on img{transform:scale(1.25) translateY(-2px)}
/* on a phone the page stacks, so the practice's black line is ABOVE the hand: point up at it */
@media(max-width:699px){.bx.fil.you .spot{transform:scaleX(-1) rotate(-90deg)}}

/* the rep's mock-up: the drafted advert is marked as what they COULD have, not what they have */
.bx.could{position:relative;outline:calc(var(--u)*.9) dashed #d21f1f;outline-offset:calc(var(--u)*1.5);padding-top:calc(var(--u)*11)}
.bx.could .could-tag{position:absolute;top:0;left:0;right:0;background:#d21f1f;color:#fff;text-align:center;font:800 calc(var(--u)*4.4)/1 Archivo,Arial,sans-serif;letter-spacing:.04em;text-transform:uppercase;padding:calc(var(--u)*2) calc(var(--u)*2);z-index:5}

/* the slider, clearer on a computer (Peter, 4 Oct): bigger phones, darker years, the others only lightly faded */
.dslider .dhint{text-align:center;font:700 12px/1.2 'Plus Jakarta Sans',Arial,sans-serif;color:#26231f;margin:0 0 4px}
.dslider .dstop{opacity:.82;color:#3d3830}
.dslider .dstop:hover{opacity:1;transform:translateY(-2px)}
@media (min-width:800px){
  .dslider{width:min(680px,calc(100vw - 40px));padding:10px 22px 8px;bottom:14px}
  .dslider .dhint{font-size:14px}
  .dslider .dstop{font-size:14px}
  .dslider .dstop img{width:54px;height:54px}
  .dslider .dstop.on img{transform:scale(1.2) translateY(-4px)}
  body:has(.dslider){padding-bottom:150px}
}
@media (prefers-color-scheme:dark){.dslider .dhint{color:#f1ece3}}

/* the advertiser's chosen lettering for their name wins over the decade's default (font library, 4 Oct 2026) */
.ypwrap .bx.ad16.hasf h3,.ypwrap .bx.ad16.hasf h3 a,.ypwrap .bx.ad16.hasf[class*="ns"] h3{font-family:var(--nmf)!important;font-weight:var(--nmfw,400)!important;font-style:normal!important;letter-spacing:0!important}

/* 2026 Quarter page (Peter, 4 Oct): the gift pill shares the picture's cell, under the picture rather than on it; the pitch stops on a
   whole line (one line fewer, a touch smaller) instead of being cut through the middle of a line */
.look-20 .bx.s22.has-art.has-fl{grid-template-areas:"top top" "art txt" "art txt" "tel tel" "ft ft"}
.look-20 .bx.s22.has-art.has-fl .b-fl{grid-area:art;align-self:end;justify-self:start;z-index:2}
.look-20 .bx.s22.has-art.has-fl .b-art .bxart{bottom:calc(var(--u)*17)}
.look-20 .bx.s22{--pl:4}
.look-20 .bx .b-txt p{font-size:calc(var(--u)*5.2*var(--g))}
.look-20 .bx .b-now{margin-top:calc(var(--u)*2)}
/* Quarter pages (Peter, 4 Oct): the flash keeps a row of its own and the picture shrinks above it, instead of the flash spilling up
   over the picture when the box is short of room. The drawn frame is sized by height so it always fits that row. */
.bx.s22.has-art.has-fl .b-fl{min-height:calc(var(--u)*46);max-height:calc(var(--u)*62);align-self:stretch;overflow:visible}
.bx.s22.has-art.has-fl .offer.flimg{width:auto;height:calc(var(--u)*44);max-width:100%}
.bx.s22.has-art.has-fl .b-art{min-height:calc(var(--u)*30)}
/* a Quarter with a picture AND a flash has no room for the selling-points line as well (it shows on Half and Full) */
.bx.s22.has-art.has-fl .points{display:none}
.bx.s22.has-art.has-fl{--pl:4}
/* 2026: same arrangement as the other decades (picture, then the gift pill under it in its own row) */
.look-20 .bx.s22.has-art.has-fl{grid-template-areas:"top top" "art txt" "fl txt" "tel tel" "ft ft"}
.look-20 .bx.s22.has-art.has-fl .b-fl{grid-area:fl;align-self:center;justify-self:center}
.look-20 .bx.s22.has-art.has-fl .b-art .bxart{bottom:0}
.look-20 .bx.s22.has-art.has-fl .b-fl{min-height:0}
/* 1950s headings: four settings instead of the grey screen on every advert (Peter, 4 Oct: "the same head on all the 50s ones") */
.look-60 .bx.ad16.ns1:is(.s44,.s42,.s24,.s22,.s41) .b-top{background:#111;color:#fff;text-shadow:none}
.look-60 .bx.ad16.ns2:is(.s44,.s42,.s24,.s22,.s41) .b-top{background:none;color:#111;text-shadow:none;border-bottom:calc(var(--u)*2) solid #111;margin:0;padding:0 0 calc(var(--u)*3)}
.look-60 .bx.ad16.ns2:is(.s44,.s42,.s24,.s22,.s41) .b-top .b-hd{color:#111}
.look-60 .bx.ad16.ns3:is(.s44,.s42,.s24,.s22,.s41) .b-top{background:#f2d100;color:#111;text-shadow:none;border-bottom:calc(var(--u)*1) solid #111}
.look-60 .bx.ad16.ns3:is(.s44,.s42,.s24,.s22,.s41) .b-top .b-hd{color:#111}
.look-60 .bx.ad16.ns3 .b-tel span{background:#fff}
/* a chosen lettering keeps its own case */
.ypwrap .bx.ad16.hasf h3{text-transform:none!important}
/* ...and the picture row has no fixed minimum when the flash shares the column, so the advert never runs past its box */
.ypwrap .bx.s22.has-art.has-fl{grid-template-rows:auto minmax(0,1fr) auto auto auto}
.ypwrap .bx.s22.has-art.has-fl .b-art{min-height:0}

/* corners chosen by the advertiser, over whatever the decade sets (a picture border keeps its own square frame) */
.ypwrap .bx.ad16.rc0:not(.has-bd){border-radius:0!important}
.ypwrap .bx.ad16.rc1:not(.has-bd){border-radius:calc(var(--u)*4)!important;overflow:hidden}
.ypwrap .bx.ad16.rc2:not(.has-bd){border-radius:calc(var(--u)*9)!important;overflow:hidden}
.ypwrap .bx.ad16.rc1 .b-top,.ypwrap .bx.ad16.rc2 .b-top{border-radius:calc(var(--u)*3) calc(var(--u)*3) 0 0}
/* 2026: the gift pill stays a slim line under the picture, never sized like the drawn flash frames (Peter, 4 Oct) */
.look-20 .bx.s22.has-art.has-fl .b-fl{min-height:0!important;max-height:none;align-self:center}
.look-20 .bx.s22.has-art.has-fl .offer,.look-20 .bx.s22.has-art.has-fl .offer.flimg{height:auto!important;width:auto!important;padding:.25em .8em .25em .3em!important}
.look-20 .bx.s22.has-art.has-fl .offer span{font-size:calc(var(--u)*4.4*var(--g))!important}
.look-20 .bx.s22.has-art.has-fl .offer:before{width:1.4em!important;height:1.4em!important}

/* 1960s (from Peter's c.1960 San Francisco page): black ink only on the yellow paper. Grey screened name panels with the name reversed out in
   white, starred lists, the number reversed white out of a black band. No white boxes and no second colour (4 Oct 2026: the yellow came
   from a magazine advert FOR the directory, not from the book itself). */

/* 1950s: plainest of all. Black ink straight onto the yellow paper, condensed show-card capitals, a single heavy rule round the advert,
   the number set big and black, drawings in black line. */
.look-50 .bx.ad16{--box:transparent;--spot:#111;border:calc(var(--u)*1.2) solid #111!important;border-radius:0!important;outline:0!important}
.look-50 .bx.ad16 h3,.look-50 .bx.ad16[class*="ns"] h3{font-family:'Archivo Narrow',Arial,sans-serif!important;font-style:normal!important;font-weight:700!important;text-transform:uppercase!important;letter-spacing:.01em;background:none!important;color:#111!important;border:0!important;border-radius:0!important;text-decoration:none!important;padding:0!important}
.look-50 .bx.ad16 .b-top{background:none!important;color:#111!important;margin:0!important;padding:0 0 calc(var(--u)*2)!important;text-shadow:none!important;border-bottom:calc(var(--u)*.6) solid #111;text-align:center}
.look-50 .bx.ad16 .b-top .b-hd{color:#111;font-style:italic}
.look-50 .bx .b-tel span{background:none!important;color:#111!important;border:0!important;font-family:'Archivo Narrow',Arial,sans-serif;font-weight:700;letter-spacing:.01em;padding:0!important}
.look-50 .bx .b-tel span:before{content:"Telephone ";font-size:.5em;font-weight:600;letter-spacing:.06em;vertical-align:middle}
.look-50 .bx .b-tp span{background:none;color:#111;padding:0;margin:0}
.look-50 .bx .b-tp span+span:before{content:" \2022  "}
.look-50 .bx .bxart{background:#111}
.look-50 .bx.ad16.ns1 .b-top{border-bottom:calc(var(--u)*1.6) double #111}
.look-50 .bx.ad16.ns2 h3{font-family:Georgia,'Times New Roman',serif!important;text-transform:none!important;font-style:italic!important}
.look-50 .bx.ad16.ns3{border-width:calc(var(--u)*.6)!important;outline:calc(var(--u)*.6) solid #111!important;outline-offset:calc(var(--u)*1.2)}
.look-50 .yphead{font-family:'Archivo Narrow',Arial,sans-serif;text-transform:uppercase;letter-spacing:.04em}
.ypwrap.look-50 .bx.ad16.hasf h3{text-transform:none!important}

/* 1995 (Peter, 4 Oct: "95 has red no blue"): blue and red both, as on the 1989 page. Blue for the blue, plum and grey colour choices,
   red for green and orange; the red drawings are turned blue on a blue advert. */
.look-90 .bx.ad16:is([style*="8a3b6b"],[style*="3b3b3b"]){--spot:#1d5fa3}
.look-90 .bx.ad16:is([style*="1d5fa3"],[style*="8a3b6b"],[style*="3b3b3b"]) .bxart.bximg{filter:hue-rotate(215deg) saturate(.95)}

/* a free line with no number takes one line, the note small and quiet beside the name */
.le.nonum .l1 small{font:italic 400 .78em var(--bd);opacity:.55;margin-left:.3em}

/* The "more" panel: a Half or Full page shows more, like a website with room to spare (Peter, 4 Oct 2026). Its own row in the layout,
   so nothing else is squeezed; phones show the essentials only. */
.bx .b-more{grid-area:more;display:grid;grid-template-columns:repeat(auto-fit,minmax(calc(var(--u)*70),1fr));gap:calc(var(--u)*3) calc(var(--u)*6);border-top:1px solid currentColor;padding-top:calc(var(--u)*4);font:400 calc(var(--u)*5*var(--g))/1.3 var(--bd)}
.bx .b-more .mc{display:flex;flex-direction:column;gap:calc(var(--u)*.8);min-width:0}
.bx .b-more .mc b{font:800 calc(var(--u)*4*var(--g))/1 var(--tl);text-transform:uppercase;letter-spacing:.06em;opacity:.75}
.bx .b-more .mc span{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}
.bx .b-more .mc.ph span{font-style:italic;opacity:.5;border:1px dashed currentColor;border-radius:calc(var(--u)*2);padding:calc(var(--u)*1.5) calc(var(--u)*2.5)}
@media(min-width:700px){
  .bx.s44{grid-template-rows:auto minmax(0,1fr) auto auto auto auto;grid-template-areas:"top top" "art txt" "art fl" "more more" "tel tel" "ft ft"}
  .bx.s44.no-art{grid-template-areas:"top top" "txt txt" "fl fl" "more more" "tel tel" "ft ft"}
  .bx.s42{grid-template-rows:auto minmax(0,1fr) auto auto auto;grid-template-areas:"top top top" "art txt fl" "art tel tel" "more more more" "ft ft ft"}
  .bx.s42.no-art{grid-template-areas:"top top" "txt fl" "tel tel" "more more" "ft ft"}
}
@media(max-width:699px){.bx .b-more{display:none}}
.bx.fil.open .op1{font-weight:600}
.bx.fil.open .op2{font-size:.85em;opacity:.8;margin-top:calc(var(--u)*3)}
/* the rival down the road: their real line, picked out, and named in the open space */
.le.rv{background:color-mix(in srgb,#d21f1f 14%,transparent);outline:1px dashed #d21f1f;padding:0 calc(var(--u)*1.5)}
.le.rv .l1 a:after{content:"  \2190 your rival";font:italic 700 .8em var(--bd);color:#b3120a}
.bx.fil.open .op0{font-weight:700;font-size:.95em}.bx.fil.open .op0 em{font-style:normal;text-decoration:underline}

/* the rate card: blank boxes at true size with the price inside */
.ratecard .rc-box{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:calc(var(--u)*2);border:2px dashed currentColor;margin:calc(var(--u)*2);padding:calc(var(--u)*4);background:color-mix(in srgb,#fff 45%,transparent)}
.ratecard .rc-box b{font:900 calc(var(--u)*9) var(--nm);text-transform:uppercase;letter-spacing:.02em}
.ratecard .rc-box i{font:900 calc(var(--u)*16)/1 var(--nm);font-style:normal}
.ratecard .rc-box i small{font:600 calc(var(--u)*5) var(--bd)}
.ratecard .rc-box span{font:400 calc(var(--u)*5) var(--bd);max-width:85%}
.ratecard .rc-full b{font-size:calc(var(--u)*18)}.ratecard .rc-full i{font-size:calc(var(--u)*34)}.ratecard .rc-full span{font-size:calc(var(--u)*8)}
.ratecard .rc-half i{font-size:calc(var(--u)*26)}
.ratecard .rc-small b{font-size:calc(var(--u)*6)}.ratecard .rc-small i{font-size:calc(var(--u)*11)}
.ratecard .rc-line{justify-content:flex-start;border-style:solid;border-width:1px}
/* phones (Peter, 5 Oct 2026: "the full page looks smaller than the others"): the rate card stays the true 4x4 page at every width, so each
   size is drawn at its real share of the page; small print gives way before the size and price do */
@media(max-width:699px){
  .ratecard .yp{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;grid-auto-rows:35.4cqw!important;grid-auto-flow:row!important;align-items:stretch!important;justify-items:stretch!important}
  .ratecard .yp>*{grid-column:var(--c) / span var(--w)!important;grid-row:var(--r) / span var(--h)!important;width:auto!important;height:auto!important}
  .ratecard{--u:.25cqw}
  .ratecard .rc-box{margin:3px;padding:4px;gap:2px}
  .ratecard .rc-box b{font-size:max(9px,calc(var(--u)*9))}.ratecard .rc-box i{font-size:max(15px,calc(var(--u)*16))}.ratecard .rc-box i small{font-size:9px}
  .ratecard .rc-full b{font-size:22px}.ratecard .rc-full i{font-size:44px}.ratecard .rc-full span{font-size:12px}.ratecard .rc-half b{font-size:16px}.ratecard .rc-half i{font-size:34px}
  .ratecard .rc-box span{font-size:max(10px,calc(var(--u)*5))}
  .ratecard .rc-small span,.ratecard .rc-double span,.ratecard .rc-quarter span,.ratecard .rc-line span{display:none}
  .ratecard .rc-small b,.ratecard .rc-line b{font-size:9px}.ratecard .rc-small i,.ratecard .rc-line i{font-size:14px}
}
.ratecard .rc-line em{display:block;width:90%;height:calc(var(--u)*7);border-bottom:1px dotted currentColor;opacity:.5}

/* A trainee's advert: a ribbon across the top right corner, every size, every decade (Peter, 4 Oct 2026) */
.bx.ad16{position:relative}
.bx .tr-rib{position:absolute;top:0;right:0;width:calc(var(--u)*42);height:calc(var(--u)*42);overflow:hidden;pointer-events:none;z-index:6}
.bx .tr-rib span{position:absolute;top:calc(var(--u)*9);right:calc(var(--u)*-17);width:calc(var(--u)*68);transform:rotate(45deg);background:var(--rib,#d21f1f);color:#fff;text-align:center;font:800 calc(var(--u)*4)/1 Archivo,Arial,sans-serif;text-transform:uppercase;letter-spacing:.06em;padding:calc(var(--u)*1.8) 0;box-shadow:0 1px 3px rgba(0,0,0,.3)}
.bx.trn .b-top{padding-right:calc(var(--u)*16)}
.look-50 .bx .tr-rib span,.look-60 .bx .tr-rib span,.look-80 .bx .tr-rib span{--rib:#111}
.look-20 .bx .tr-rib span{--rib:#5f8a70;box-shadow:none}
.le small.trn{font:italic 600 .78em var(--bd);color:#b3261e;margin-left:.3em;white-space:nowrap}
.bx.could .tr-rib{top:calc(var(--u)*8.4)}

/* The year picker sits at the TOP, a strip under the header (Peter, 4 Oct 2026: "it gets kind of lost down there") */
.dslider{position:static!important;transform:none!important;left:auto!important;bottom:auto!important;width:auto!important;max-width:none!important;border-radius:0!important;box-shadow:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
  background:#161616!important;border-bottom:3px solid #f4cb2e;margin:-3px 0 0;padding:6px 16px 4px!important;display:flex;align-items:center;justify-content:center;gap:18px;flex-wrap:wrap}
.dslider .dhint{color:#f4cb2e!important;margin:0!important;font-size:13.5px!important;max-width:200px;text-align:left!important;line-height:1.25}
.dslider .dtrack{flex:0 1 560px;min-width:0}
.dslider .dstop{color:#c9c2b3!important;opacity:.75}
.dslider .dstop.on{color:#fff!important;opacity:1}
.dslider .dstop img{width:40px!important;height:40px!important}
.dslider .dstop.on img{transform:scale(1.25) translateY(-2px)!important}
.dslider input[type=range]{display:none}
body:has(.dslider){padding-bottom:0!important}
@media (max-width:640px){
  .dslider{flex-direction:column;gap:2px;padding:6px 6px 4px!important}
  .dslider .dhint{max-width:none;text-align:center!important;font-size:12px!important}
  .dslider .dtrack{flex:none;width:100%}
  .dslider .dstop{font-size:10.5px!important}
  .dslider .dstop img{width:30px!important;height:30px!important}
}

/* a number on the page rings when tapped, and still looks like print */
.le b a.tl{color:inherit;text-decoration:none}.le b a.tl:hover{text-decoration:underline}

/* the year's own telephone beside the number: black-ink drawings, painted in the number's colour so each year tints them (Peter, 5 Oct 2026) */
.phi{display:inline-block;width:1.15em;height:1.15em;vertical-align:-.2em;margin-right:.22em;background:currentColor;-webkit-mask:var(--phi) center/contain no-repeat;mask:var(--phi) center/contain no-repeat}

/* 2026: an invitation ("Ring for a friendly chat") gets the message icon; only a real offer gets the gift. Selling points one per line, tick first. */
.look-20 .bx .offer.cta:before{background-image:url(/art/3d/icons/message.png)!important}
.look-20 .bx .points span{display:block;margin:0 0 .25em}

/* compact page for a short list: boxes as tall as their lines, nothing stretched (Peter, 5 Oct 2026) */
.ypwrap.short .bx.ls{height:auto!important;aspect-ratio:auto!important;min-height:0!important}
.ypwrap.short .yp{grid-template-rows:auto!important}

/* "In the spotlight this week": a free listing's turn in a box, while nobody advertises in the town. Calm green, not the red of a sales mock-up. */
.bx.could.spotl{outline:calc(var(--u)*.6) solid #2f4738;outline-offset:calc(var(--u)*1.2)}
.bx.could.spotl .could-tag{background:#2f4738}
/* a Small advert is narrow, so its label runs to two lines: start the advert below it, not under it (Peter, 13 Oct 2026) */
.ypwrap .bx.ad16.could.s11{padding-top:calc(var(--u)*15)!important}
/* the decade looks set their own top padding on adverts, which let the label sit on the name (1995, 8 Oct 2026): always leave room for it */
.ypwrap .bx.ad16.could{padding-top:calc(var(--u)*11)!important}

/* A filler fills the gap it is given (Peter, 8 Oct 2026: "now we have big gaps"): its drawing or photo takes whatever height is left
   after the words, up to a sensible size, so a tall gap gets a big picture and a short one a small picture, never a blank patch. */
.ypwrap .lsn .lfil{justify-content:center}
.ypwrap .lsn .lfil .spot{flex:1 1 auto!important;height:auto!important;width:auto!important;aspect-ratio:1/1;min-height:calc(var(--u)*18);max-height:calc(var(--u)*140);max-width:96%;align-self:center}
.ypwrap .lsn .lfil.ppl .fph{flex:1 1 auto!important;height:auto!important;width:auto!important;aspect-ratio:1/1;min-height:calc(var(--u)*24);max-height:calc(var(--u)*80);max-width:92%}

/* Curved names (Peter, 6 Oct 2026): Arched, Gently arched, Curved under, Over and under (Listings::arcName). The lettering is
   real text on a curve, in the advert's own font and colour; the box styles of the straight names (oval, band...) don't apply. */
.ypwrap .bx.ad16 h3.arc{background:none!important;border:0!important;border-radius:0!important;padding:0!important;margin:0 0 calc(var(--u)*1.5)!important;line-height:0!important;text-decoration:none!important;box-shadow:none!important}
.ypwrap .bx.ad16 h3.arc a{display:block;color:inherit;text-decoration:none}
.ypwrap .bx.ad16 h3.arc svg{display:block;width:100%;height:auto;overflow:visible}
.ypwrap .bx.ad16 h3.arc text{fill:currentColor;font-family:inherit;font-weight:inherit}
.ypwrap .bx.ad16.ns7 .b-hd{display:none}
/* what sits under an arch tucks up into its hollow, the way the old adverts set it (margins in % follow the advert's width) */
.ypwrap .bx.ad16 h3.arc.a4{margin-bottom:-8%!important}
.ypwrap .bx.ad16.ns4 .b-hd{padding-left:16%!important;padding-right:16%!important;text-align:center!important}
.ypwrap .bx.ad16 h3.arc.a5{margin-bottom:-4%!important}