/* Oz Theatre Screens: the new look, "the lit stage" (idea 5 of the ideas preview; Richard, 24 Oct 2026: "I think I like
   the new look version"; put on the draft 27 Oct 2026, item 251). Loaded after css/style.css and /oz-data/theme.css.
   Only new tokens are set: --bg --bg2 --bg3 --black --line --blue --blue2 --font are never redefined, so Richard's
   Colours tab still drives it. Stays as it is: the header (logo, beam, top contact line, bold menu), the footer's
   content, all of Richard's words, captions and photos (never stretched), Welcome first on the home page, the white
   full-width intro lines, and the blue "Call (07) 5408 3314 for our best price" line on one row.
   THE OLD LOOK: take the <link href="css/new-look.css"> line out of site-src/_header.html and build again (or upload
   backups/preview-ht47k-old-look-2026-10-27.zip). Made from ideas/site/css/refresh.css without its ideas-bar parts. */


/* ===== 2. The heading font: Archivo (SIL Open Font License), self-hosted, latin subset with weight and width axes.
   fonts/archivo-latin.woff2 may not be there yet: then headings fall back to Richard's --font, as today. ===== */
@font-face{font-family:"Archivo";src:url(../fonts/archivo-latin.woff2) format("woff2");font-style:normal;font-weight:100 900;font-stretch:62.5% 125%;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}


/* ===== 3. Tokens (new ones only) ===== */
:root{
  --font-head:"Archivo",var(--font,"Segoe UI"),system-ui,sans-serif;
  /* six steps and a 13px floor */
  --fs-xs:.8125rem; --fs-sm:.875rem; --fs-body:1.0625rem; --fs-lead:clamp(1.125rem,1rem + .4vw,1.25rem);
  --fs-h3:1.25rem; --fs-h2:clamp(1.75rem,1.25rem + 1.6vw,2.5rem); --fs-h1:clamp(2rem,1.3rem + 2.8vw,3.5rem);
  /* colours, one job each: --btn actions, --amber-btn stock only, --silver details, --silver-2 captions and table heads, --gold press only */
  --btn:#006be5; --amber-btn:#9a6418; --silver:#c9d0d9; --silver-2:#9ba4b0; --gold:#e8c46a;
  --hair:rgba(255,255,255,.08);
  --halo:0 0 0 4px rgba(47,143,255,.28);
  --stage-light:rgba(47,143,255,.16);
  --spill:rgba(47,143,255,.35);
  /* spacing */
  --sp-1:8px; --sp-2:16px; --sp-3:24px; --sp-4:32px; --sp-5:48px; --sp-6:72px; --sp-7:96px;
  /* cards on soft shadows instead of outlines */
  --shadow:inset 0 1px 0 rgba(255,255,255,.06),0 18px 40px -24px rgba(0,0,0,.75);
  --shadow-up:inset 0 1px 0 rgba(255,255,255,.08),0 24px 48px -22px rgba(0,0,0,.85);
  /* item 260 (28 Oct 2026): the text inside boxes, cards and panels, white not grey ("grey text in some of the boxes that
     needs to be made white"); captions under photos and the footer keep their light grey */
  --box-text:#eef0f4;
  /* the small blue info mark for notes that are not about stock (a 16 x 18 box: blue circle, white "i") */
  --info-mark:linear-gradient(#fff,#fff) 7px 9px/2px 6px no-repeat,linear-gradient(#fff,#fff) 7px 5px/2px 2px no-repeat,radial-gradient(circle at 8px 10px,var(--blue) 7px,transparent 7.5px) 0 0/16px 18px no-repeat;
}
/* worked out from his Colours-tab accent where the browser can: the button blue a shade deeper so white text passes 4.5:1 */
@supports (color:color-mix(in srgb,red 50%,blue)){
  :root{
    --btn:color-mix(in srgb,var(--blue) 80%,#000);
    --halo:0 0 0 4px color-mix(in srgb,var(--blue) 28%,transparent);
    --stage-light:color-mix(in srgb,var(--blue) 16%,transparent);
    --spill:color-mix(in srgb,var(--blue) 35%,transparent);
  }
}
@media (max-width:600px){:root{--fs-body:1rem}}   /* 16px body text on phones */


/* ===== 4. Text ===== */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{font-size:var(--fs-body);line-height:1.65}
.site-header{font-size:1rem;line-height:1.6}   /* the header stays exactly as it is */

/* item 260 (28 Oct 2026), Richard: "too many different fonts it looks like there's 4". Two fonts now: Archivo at one width
   (100%; it was 100%, 112.5% and 125%) for h1/h2, the small top lines, buttons, pills and table heads, and his Colours-tab
   font (--font) for everything else, the h3/h4 box headings ("Delivery", "Phone") included, in bold */
/* (a) Display: h1 and the band headings. White, the blue second word and the h1 glow kept. */
h1,h2{font-family:var(--font-head)}
h1,h2{font-weight:800;font-stretch:100%;text-transform:uppercase;letter-spacing:.01em;line-height:1.08}
h1{font-size:var(--fs-h1)}
h2{font-size:var(--fs-h2);margin:0 0 20px}   /* item 263: 20px under a band heading, was 32px */
.welcome h1{font-size:var(--fs-h2);margin-bottom:20px}
/* (b) Section: headings inside text, sentence case as written; h3 and h4 in his own font (item 260) */
h3,h4{font-weight:700;font-stretch:100%;letter-spacing:0;line-height:1.25}
h3{font-size:var(--fs-h3)}
.prose h2,.product-body h2,.calc-band h2,.paydetails h2{font-size:1.5rem;font-weight:700;font-stretch:100%;line-height:1.2;letter-spacing:0;text-transform:none;margin-bottom:.6em}
@media (min-width:1300px){.prose h2.one-line{font-size:1.2vw;font-size:min(1.9rem,2.05cqw)}}   /* item 209's one line, a little room for the wider face */
.product-body h3{font-size:var(--fs-h3)}
.picker h4{font-size:1.0625rem}
.order-form h3,.sizes-box h4{font-size:var(--fs-h3)}
/* (c) Eyebrow: kickers, table heads, footer headings and the like */
.kicker,.watch,.goes-title,.news-list time,.site-footer h3,.brands p,.product-buy .ship,.hero2-text .sub,table.spec th{font-family:var(--font-head);font-weight:600;font-stretch:100%;font-size:var(--fs-xs);line-height:1.4;letter-spacing:.2em;text-transform:uppercase}
.kicker,.watch,.goes-title,.news-list time,.site-footer h3,.product-buy .ship,.hero2-text .sub{color:var(--silver)}
.brands p,table.spec th{color:var(--silver-2)}

/* text links: sentence case, blue, 600, no letter-spacing */
.more,.tile .more,.card .more,.format-text .more,table.sizes td.go a,.buy-call{font-family:inherit;font-size:var(--fs-sm);font-weight:600;letter-spacing:0;text-transform:none;color:var(--blue2)}
.more:hover,.card .more:hover,.tile:hover .more,table.sizes td.go a:hover{color:#fff}

/* sizes: nothing under 13px (the header keeps its own) */
.card p,.tile p{font-size:var(--fs-sm)}
.card ul,.card .features{font-size:var(--fs-sm)}
.fig figcaption{font-size:var(--fs-sm);color:var(--silver-2)}
.photo-card figcaption{color:var(--silver-2)}
table.spec{font-size:var(--fs-sm)}
.field small,.video figcaption,.slideshow .count,.stock,.card .new{font-size:var(--fs-xs)}
table.pricelist td:first-child .dim{font-size:var(--fs-xs)}
.card .spec{color:var(--silver);font-size:var(--fs-sm);letter-spacing:0}
.card .new{background:rgba(255,255,255,.12);color:#fff;padding:3px 8px}   /* a label, not an action: not blue */

/* long text upright, never italic */
.review p,.mock3-side .quote{font-style:normal}
.review p::before{color:var(--silver-2)}


/* ===== 5. Spacing: no hairlines between bands (his bg / bg2 alternation is enough). Item 263 (Richard, 28 Oct 2026): "huge
   dead black space vertical zones need to be all removed": the bands were 96px top and bottom (about 2 inches between
   sections); now 36px at most, so sections sit closer than in the old look (64px) ===== */
.band{padding-block:clamp(22px,2.5vw,36px)}
.band.videos-band{padding-block:clamp(20px,2.2vw,32px)}
.band.alt{border-top:0;border-bottom:0}
.videos-band,.welcome{border-top:0}
.hero2,.page-head{border-bottom:0}
.brands{border-top:0;padding:clamp(22px,2.5vw,36px) 20px}
.two{gap:28px 48px}   /* item 263: 28px between the stacked columns on phones */
.cards{gap:24px}


/* ===== 6. Page heads, "the lit stage": the navy at the foot of the header fades into his Charcoal, with the beam's blue
   light falling on the page title. It follows his accent colour. ===== */
.page-head{padding:clamp(22px,2.4vw,34px) 0 clamp(18px,1.8vw,26px);background:radial-gradient(ellipse 55% 130% at 0% 0%,var(--stage-light) 0%,transparent 62%),linear-gradient(180deg,#05080f 0%,var(--black,#000) 100%)}
.page-head h1{font-size:var(--fs-h1);margin:0 0 .3em}
.page-head .kicker{color:var(--silver);font-size:var(--fs-xs);line-height:1.4;margin:0 0 .7em}
.page-head + .band{padding-top:clamp(18px,2vw,28px)}   /* item 263: the first band close under the page title (36px in the old look) */
.page-head p,.page-head .intro p{font-size:var(--fs-lead);line-height:1.55;color:#fff}


/* ===== 7. Buttons: one family ===== */
.btn,a.btn,button.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;min-height:46px;padding:.55em 1.4em;border:1.5px solid var(--btn);border-radius:8px;background:var(--btn);color:#fff;font:600 var(--fs-sm)/1.15 var(--font-head);letter-spacing:.08em;text-transform:uppercase;text-align:center;text-decoration:none;cursor:pointer;transition:box-shadow .15s,background-color .15s,border-color .15s}
.btn:hover{background:var(--btn);border-color:var(--btn);color:#fff;box-shadow:var(--halo)}
.btn:focus-visible{outline:2px solid #fff;outline-offset:3px}
.btn.ghost{background:transparent;border-color:rgba(255,255,255,.3);color:#fff}
.btn.ghost:hover{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.65);box-shadow:none}
/* small and card buttons: 40px tall, 13px */
.btn.small,.card-links .btn.small,.top-ways .btn,.pay-box .payalt .btn{min-height:40px;padding:.5em 1.1em;font-size:var(--fs-xs);letter-spacing:.06em}
.pay-box .payalt .btn{margin:4px 6px 4px 4px}
/* the buttons inside the order forms (style.css gave them the page font) */
.pay-box .paybtn .btn,.pay-box .enquire{font:600 var(--fs-sm)/1.15 var(--font-head);letter-spacing:.08em}
.pay-box .enquire{display:inline-flex}
.buy .btn{display:flex}
p > .btn{margin-top:4px;margin-bottom:4px}
/* amber only for stock: back orders */
.btn.stock-backorder,.btn.backorder,.btn.stock-backorder:hover,.btn.backorder:hover{background:var(--amber-btn);border-color:var(--amber-btn);color:#fff}
.btn.stock-backorder:hover,.btn.backorder:hover{box-shadow:0 0 0 4px rgba(245,158,11,.25)}
.btn.stock-out,.btn.stock-out:hover{background:#4a4a52;border-color:#4a4a52;color:#eceef2;box-shadow:none}
.picker.asking .payalt .enquire{background:var(--btn);border-color:var(--btn);color:#fff}
/* the Order now and Enquire buttons in the price tables */
.cell-btn,table.pricelist a.cell-btn{display:inline-flex;align-items:center;justify-content:center;min-height:40px;margin-top:6px;padding:0 .8em;border:1.5px solid var(--btn);border-radius:8px;background:var(--btn);color:#fff;font:600 var(--fs-xs)/1.1 var(--font-head);letter-spacing:.04em;text-transform:uppercase;white-space:nowrap}
.cell-btn:hover,table.pricelist a.cell-btn:hover{background:var(--btn);border-color:var(--btn);color:#fff;box-shadow:var(--halo)}
.cell-btn.ghost,table.pricelist a.cell-btn.ghost{background:transparent;border-color:rgba(255,255,255,.3);color:#fff}
.cell-btn.ghost:hover,table.pricelist a.cell-btn.ghost:hover{border-color:rgba(255,255,255,.65);box-shadow:none}
/* choice chips (999px only here), the step numbers and the page's jump links */
.seg label > span{display:inline-block;min-height:40px;padding:9px 18px;line-height:1.3;border:1.5px solid rgba(255,255,255,.22);border-radius:999px;color:#e6e9ee;font-weight:600}   /* inline-block, not flex: a flex chip dropped the space in "Black, add $369" */
.seg label:hover > span{border-color:rgba(255,255,255,.5)}
.seg input:checked + span{background:var(--btn);border-color:var(--btn);color:#fff}
.picker .num{background:var(--btn)}
.jump a{display:inline-flex;align-items:center;min-height:40px;padding:0 16px;border:1.5px solid rgba(255,255,255,.22);border-radius:999px;color:#e6e9ee;font:600 var(--fs-xs)/1.2 var(--font-head);letter-spacing:.08em}
.jump a:hover{border-color:var(--blue2);color:#fff}


/* ===== 8. Cards on soft shadows instead of outlines. Radii: 10px cards and photos, 8px buttons and inputs. ===== */
.card,.tile,.product-card,.buy,.review,.photo-card,.order-form{background:var(--bg3);border:0;border-radius:10px;box-shadow:var(--shadow)}
.fig,.slideshow,.product-photo,.throw-calc,.table-wrap{border:0;border-radius:10px;box-shadow:var(--shadow)}
.table-wrap{background:var(--bg3)}
.throw-calc{background:var(--bg3)}
.order-form{padding:clamp(20px,2.4vw,30px)}
.tile,.product-card{transition:transform .15s,box-shadow .15s}
.tile:hover,.product-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-up)}
.product-card .pic{border-radius:8px}
.pshot img{border:0;border-radius:10px}
.video .play,.video iframe,.video-stage iframe{border-radius:10px}
.brand-row{border-radius:10px}
/* the one "note" signal: the blue left edge */
.info-box,.paydetails{border:0;border-left:3px solid var(--blue);border-radius:8px}
/* hairlines inside a card or list, not outlines */
.goes{border-top-color:var(--hair)}
.goes li{border-bottom-color:var(--hair)}
.news-list li{border-top-color:var(--hair)}
.feature-row{border-top-color:var(--hair)}
.dims{border-top-color:var(--hair)}
.dims[open] summary{border-bottom-color:var(--hair)}
.copy{border-top-color:var(--hair)}
.slideshow .caption,.slideshow .slide figcaption{border-top-color:var(--hair)}
@media (prefers-reduced-motion:reduce){.tile,.product-card{transition:none}.tile:hover,.product-card:hover{transform:none}}


/* ===== 9. Tables: hairlines between rows, no zebra, heads in the eyebrow style ===== */
table.spec th,table.spec td{border-bottom-color:var(--hair)}
table.spec th{background:transparent;white-space:normal;padding-top:12px;padding-bottom:12px}
table.pricelist th,table.prices th{font-stretch:100%;letter-spacing:.08em}   /* narrow price columns: the fabric names fit as before */
/* the size tables on The Majestic Screen: narrow heads too, as one line where they fit (the DIY fabric table is gone, item 266;
   its selector out, review F11, 30 Oct 2026) */
table.sizes th,table.dims th{font-stretch:100%;letter-spacing:.08em;text-wrap:balance}
@media (max-width:900px){table.sizes th,table.dims th{white-space:nowrap;letter-spacing:.04em}}   /* phones scroll these tables sideways anyway: one-line heads, as before, not a word per line */
table.spec tbody tr:nth-child(even) td{background:transparent}
table.sizes tbody tr:hover td{background:rgba(255,255,255,.04)}
table.prices .na{color:#6b7280}
/* Screens for Sale: the sizes and prices list's sticky first column needs a solid colour, the card's own */
table.pricelist td:first-child,table.pricelist tbody tr:nth-child(even) td:first-child,table.pricelist th:first-child{background:var(--bg3)}


/* ===== 10. The order and package builders: no boxes inside boxes. "Other ways to order", the summary and the sizes
   table become plain parts of the order card, divided by a hairline. ===== */
.order-form .table-wrap{background:none;box-shadow:none;border-radius:0}
.order-form .other-ways{background:none;border:0;border-top:1px solid var(--hair);border-radius:0;padding:20px 0 4px;margin:24px 0 0 48px}
.order-form .pick-summary{background:none;border:0;border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);border-radius:0;padding:14px 0;margin:4px 0 20px 48px}
.pick-summary .line.total{border-top-color:var(--hair)}
.sizes-box{border-top-color:var(--hair);margin-top:28px;padding-top:22px}
@media (max-width:700px){.order-form .other-ways{margin-left:0}}
@media (max-width:600px){.order-form .pick-summary{margin-left:0}}
.field input,.field textarea,.field select,.picker select{border-radius:8px}
/* notes that were amber but are not about stock: white, with a small blue info mark; the words stay the same */
.pkg-note,.picker.asking .asking-note,.pay-box .opt .call,.pay-box .soon,.tbc{color:#fff}
.pkg-note::before,.asking-note::before,.pay-box .opt .call::before,.pay-box .soon::before,.tbc::before{content:"";display:inline-block;width:16px;height:18px;margin-right:8px;vertical-align:-4px;background:var(--info-mark)}
.paybtn.locked::after{color:#fff;font-size:var(--fs-sm);font-weight:600;line-height:1.45;padding-left:24px;background:var(--info-mark)}


/* ===== 11. Home: the Majestic band. Taller, the photo (Movie01, 1280px, never enlarged) with a soft spill of the beam's
   light instead of the hard fade, the line "Premium cinema screens ..." above the heading as its eyebrow. ===== */
.hero2{overflow:hidden}
.hero2-grid{min-height:clamp(380px,40vw,560px)}
.hero2-photo{max-width:1280px;box-shadow:0 0 120px -20px var(--spill)}
.hero2-photo::after{content:none}
.hero2-text{display:grid;grid-template-columns:auto auto 1fr;align-content:center;column-gap:12px;padding:56px 0 56px 56px}
.hero2-text > *{grid-column:1 / -1;max-width:34em}
.hero2-text > .btn{grid-column:auto;margin-top:1em}
.hero2-text .sub{order:-1;margin:0 0 1em}
.hero2-text h2{font-weight:800;font-stretch:100%;white-space:normal}   /* one Archivo width (item 260) */
.hero2-text p{font-size:var(--fs-body);line-height:1.65}
.mock3-side .big4k,.mock3-side .big4k small,.showcase .big4k,.showcase .big4k small{color:var(--gold)}   /* gold: press only */
.mock3-side img{border-radius:10px}
.mock3-photos img{border:0;border-radius:10px}
@media (max-width:900px){
  .hero2-photo{min-height:56vw}   /* on phones the photo sits on top */
  .hero2-text{padding:24px 0 28px}   /* item 263: was 28px and 40px */
}


/* ===== 12. Product pages and the projector calculator ===== */
.product-photo{border:0}
.throw-calc .result,.throw-calc .bright,.throw-calc .facts,.throw-calc svg.diagram{border:0}
.throw-calc .sl .lock,.throw-calc .views button{border-color:rgba(255,255,255,.2)}
.throw-calc .sl .lock.on,.throw-calc .views button.on{background:var(--btn);border-color:var(--btn)}
.throw-calc .f label,.throw-calc .sl label,.throw-calc .views button,.throw-calc .zoom{font-size:var(--fs-xs)}
.throw-calc .sl .ends,.throw-calc .bright .scale,.throw-calc .bright .zones,.throw-calc .facts .ends,.throw-calc .fact .k,.throw-calc .sl .lock{font-size:var(--fs-xs)}
.throw-calc .bright .gain .small{font-size:var(--fs-xs)}


/* ===== 13. Gallery and footer ===== */
.gallery-grid a{border:0;border-radius:10px}
.site-footer{border-top:0;padding-top:clamp(24px,2.4vw,32px)}   /* item 263: was up to 72px; the footer's content as it was */
.site-footer h3{margin-bottom:1.1em}


/* ===== 14. Phones: 16px body text and form boxes (iPhones do not zoom in), tap targets 40px or more ===== */
@media (max-width:600px){
  .card p,.tile p,.card ul,.card .features{font-size:1rem}
  .more,.card .more,.tile .more{display:inline-flex;align-items:center;min-height:40px}
  .card-links .more{min-height:40px}
  .pick-more a,.mount-more a,.goes li a,.page-head .brochure a{display:inline-block;padding:9px 0}
  table.sizes td a{display:inline-block;padding:10px 0}
  .site-footer li{margin:0}
  .site-footer a{display:inline-block;padding:9px 0}
  .slideshow .arrow{width:44px}
  .gallery-grid a{border-radius:6px}
  .how-to summary{padding:10px 0}
  .throw-calc .sl .lock{min-height:40px}
  /* the calculator's Side view / Front view buttons go under the drawing at 40px, so they never cover it */
  .throw-calc .drawings{display:flex;flex-direction:column}
  .throw-calc .views{position:static;order:2;margin:8px 0 0}
  .throw-calc .views button{min-height:40px;padding:0 14px}
}
/* the 'Save $X' badge keeps the 13px floor */
.save{font-size:max(.78em,var(--fs-xs,.8125rem))}
/* the price tables on Screens for Sale fit their box again: the new button family made the Order now buttons wider, so the
   table scrolled sideways at 1440 (776px in 740) */
.table-wrap table .btn,.table-wrap table.pricelist a.cell-btn{padding-left:8px;padding-right:8px;letter-spacing:0}
.sizes-box table.pricelist th,.sizes-box table.pricelist td{min-width:96px}   /* the columns' 104px no longer fit the roomier card */


/* ===== 15. The parts added to the draft after the new look was designed (27 Oct 2026, items 232-254), in the new look.
   Checked: the new look changes none of the settings those parts make in style.css; these rules only bring them into it. ===== */
/* the home heading "Welcome to Oz Theatre Screens" stays on one line on a computer, as it was (item 253), in the wider font;
   "Why Oz Theatre Screens" beside it takes the same size, so the two match and it stays on one line too */
@media (min-width:901px){.welcome h1,.welcome h2{font-size:clamp(1.125rem,2vw,1.95rem)}}
/* the blue "Call (07) 5408 3314 for our best price" line in the price box on one row (item 194) whichever font Richard picks in
   his Colours tab: the size follows the box's width (Verdana and Georgia ran over it by 30px and 8px). 4.05cqi is the widest,
   Verdana, with no letter-spacing (24.4em of text); about 12px in the 300px box at 1440 */
.side .buy{container-type:inline-size}
.side .buy .call-best{letter-spacing:0;font-size:clamp(.72rem,.95vw,.82rem);font-size:min(clamp(.72rem,.95vw,.82rem),4.05cqi)}
/* "Back orders open: order now" on one line in the same box: the new buttons' wider padding and spacing pushed "now" over */
.side .buy .btn{padding-left:.8em;padding-right:.8em;letter-spacing:.04em}
.btn{text-wrap:balance}   /* a button that must wrap breaks in the middle, not one word alone */
/* What happens next (item 247) and the answers beside the buy button: part of the order card under a hairline, as on the
   ideas preview Richard saw (no box in a box) */
.what-next{background:none;border:0;border-top:1px solid var(--hair);border-radius:0;padding:20px 0 4px;margin-top:22px;color:var(--box-text);font-size:var(--fs-sm);line-height:1.55}   /* white (item 260) */
.what-next h5{margin:0 0 12px;font-family:var(--font-head);font-weight:600;font-stretch:100%;font-size:var(--fs-xs);line-height:1.4;letter-spacing:.2em;text-transform:uppercase;color:var(--box-text)}
.what-next li{margin-bottom:8px}
.what-next li::marker{color:var(--box-text);font-weight:700}   /* item 260: white, in his font */
.what-next .wn-more{font-weight:600;letter-spacing:0;text-transform:none}
.buy-answers{border:0;border-left:3px solid var(--blue);padding:14px 18px;color:var(--box-text);font-size:var(--fs-sm);line-height:1.55}   /* white (item 260) */
.buy-answers p{margin-bottom:10px}
.buy-answers p:last-child{margin-bottom:0}
/* screens packaged over 4 metres (item 243): amber is for stock only in the new look, so his message is a note (the blue edge
   and the small info mark), and the table mark is in his accent colour */
.pay-box .opt .over-note,.over-note{border-left-color:var(--blue);background:rgba(255,255,255,.04);padding-left:36px;position:relative}
.pay-box .opt .over-note::before,.over-note::before{content:"";position:absolute;left:12px;top:10px;width:16px;height:18px;background:var(--info-mark)}
/* the mark keeps the table heads' narrow width: wide, it made the Size column 177px and cut the Optema column at 1440 */
.over-tag{color:var(--blue2);font-family:var(--font-head);font-stretch:100%;letter-spacing:.04em}   /* the one Archivo width anyway (item 260) */
/* Steve Dawson's line on the home page (item 234): gold is for press only */
.press-quote{border-left-color:var(--gold)}


/* ===== 16. Round 18 (Richard's red answers of 28 Oct 2026, items 260, 263, 264, 266, 267): the dead space out, two fonts and
   white text in the boxes ===== */
/* (a) item 263, "at least 5 sections where there's 2 inches of dead black space": no doubled gaps. The first and last things in a
   band, a column or the side column add no margin to the band's own padding; smaller gaps inside the text */
.band .wrap > :first-child,.band .prose > :first-child,.band .two > * > :first-child{margin-top:0}
.band .wrap > :last-child,.band .prose > :last-child,.band .two > * > :last-child,.side > :last-child{margin-bottom:0}
.band > .wrap + .wrap{margin-top:24px}   /* two blocks in one band (the Delivery box over the order form) keep a gap */
.page-head .wrap > :last-child{margin-bottom:0}   /* the title or intro is the last thing in the page head: no margin under it */
.band .wrap > .notice:first-child + *{margin-top:0}   /* the hidden error line before the heading on the after-order pages */
.band .two > *,#starters .pkg-grid:last-child{margin-bottom:0}   /* the order forms beside a side column (Packages) and the last row of banners */
#starters{padding-bottom:clamp(22px,2.5vw,28px)}#starters + .band{padding-top:clamp(22px,2.5vw,30px)}   /* Packages (item 108's 28px and 30px, less on phones) */
.band .prose > :is(ul,ol):last-child > li:last-child{margin-bottom:0}
/* item 284 (31 Oct 2026): Richard's page text sits in its own box (div.pagetext) as the column's first thing; its first and
   last things count as the column's, so the gaps stay as they were */
.band .prose > .pagetext:first-child > :first-child{margin-top:0}
.band .prose > .pagetext:last-child > :last-child{margin-bottom:0}
.band .prose > .pagetext:last-child > :is(ul,ol):last-child > li:last-child{margin-bottom:0}
/* review R21-U1 (31 Oct 2026): a picture he puts in on its own keeps a gap above and below, as a row of pictures does (the
   column's first and last things still lose theirs: the two rules above weigh more) */
.band .prose .pagetext > .fig{margin:1.2em 0}
/* review R21-U8: three or four pictures he puts side by side stay on one line (a row is two across otherwise); on a phone
   they stack, as every row does */
@media (min-width:601px){
  .band .prose .pagetext .fig-row:has(> .fig:nth-child(3)){grid-template-columns:repeat(3,minmax(0,1fr))}
  .band .prose .pagetext .fig-row:has(> .fig:nth-child(4)){grid-template-columns:repeat(4,minmax(0,1fr))}
}
/* item 288 (1 Nov 2026): a picture he puts in from now on (figure.fig.natural) shows at its own size and is never stretched,
   so a small logo stays small; a big one still fits the column. The frame fits the picture, the picture sits in the middle
   when its line underneath is wider, and in a row it sits in the middle of its place. Pictures from before have no
   .natural and keep filling their frame as they did */
.fig.natural{width:-moz-fit-content;width:-webkit-fit-content;width:fit-content;max-width:100%}
.fig.natural img{max-width:100%;height:auto;margin:0 auto}   /* its width: its width and height attributes, so it has its size before it loads */
.fig-row > .fig.natural{justify-self:center}
/* item 290 (1 Nov 2026), Richard: "I need to be able to drag the corner of an image to make it fit and it stays that size ... centre,
   left or right alignment. and then it saves where it sits". In the Pages tab he drags a picture to a width (style="width:320px" on its
   frame, never wider than the column) and picks its side: .at-left and .at-right sit beside the text, as on his old cart, .at-center
   in the middle on its own line; in a row of pictures, that side of its place. Beside the text it takes 60% of the column at most, so the
   text keeps room on smaller windows, and its line under it never widens it. Whatever is not beside the text (a picture he did not touch,
   a row, a video) starts below it and keeps its size: "clear" does nothing with no picture beside the text on the page. A row's columns
   hold a dragged picture in (minmax(0,..): before them, a picture with a width set its column; the others already shrink to fit).
   On a phone there is no room beside it: on its own line. The ::after keeps a picture beside the text inside the box */
.fig.natural[style] img{width:100%}
.band .prose .pagetext > .fig.at-left{float:left;margin:.35em 1.4em .8em 0;max-width:60%}
.band .prose .pagetext > .fig.at-right{float:right;margin:.35em 0 .8em 1.4em;max-width:60%}
.band .prose .pagetext > :is(.fig.at-left,.fig.at-right) figcaption{width:0;min-width:100%}
.band .prose .pagetext > :is(.fig:not(.at-left):not(.at-right),.fig-row,.videos){clear:both}
.band .prose .pagetext > .fig.at-center{margin-left:auto;margin-right:auto}
.band .prose .pagetext .fig-row{grid-template-columns:repeat(2,minmax(0,1fr))}
.fig-row > .fig.at-left{justify-self:start}
.fig-row > .fig.at-right{justify-self:end}
.pagetext > .fig.at-left ~ :is(ul,ol){display:flow-root}
.pagetext::after{content:"";display:block;clear:both}
@media (max-width:600px){
  .band .prose .pagetext > .fig.at-left,.band .prose .pagetext > .fig.at-right{float:none;margin:1.2em 0;max-width:100%}
  .band .prose .pagetext > .fig.at-right{margin-left:auto}
  .band .prose .pagetext .fig-row{grid-template-columns:minmax(0,1fr)}
}
.lead{margin-bottom:1.2em}
.prose h2{margin-top:1.3em}
.product-body h3{margin-top:1.4em}
@media (max-width:900px){.grid-2{gap:28px}}
/* (b) item 260, two fonts: the calculator drawing's labels in his font too (they were Arial) */
.throw-calc svg .lbl{font-family:var(--font,Arial),Arial,sans-serif}
/* (c) item 260, "grey text in some of the boxes that needs to be made white": the text in boxes, cards and panels (info boxes,
   What happens next, the buy box, the order forms and their small print, cards, reviews, table cells) in --box-text */
.card,.buy,.order-form,.info-box,.paydetails,.buy-answers,.what-next,.review,.throw-calc,.press-quote{color:var(--box-text)}
:is(.card,.buy,.order-form,.info-box,.paydetails,.buy-answers,.what-next,.review,.throw-calc,.press-quote) :is(.muted,.was,.spec,.features li,.bb-quote,.bb-quote span,cite,footer){color:var(--box-text)}
.card p:not(.call-best):not(.card-price),.card ul,.card .features,.review p,
table.spec th,table.spec td,table.specs td.note,table.prices .call,table.pricelist td:first-child .dim,table.pricelist td.custom-note,
.field small,.rc-note,.other-ways p,.pick-summary .line,.pick-summary .line.plain span:last-child,.pick-dims,
.pay-box .payalt,.pay-box .opt .ship,.pay-payid .payid-note,.eway-note,.paydetails .or,.seg label > span,
.throw-calc .modes label,.throw-calc .f label,.throw-calc .row.top .f.chk label,.throw-calc .sl label,.throw-calc .sl .ends,.throw-calc .zoom,
.throw-calc .result .small,.throw-calc .bright .scale,.throw-calc .bright .zones,.throw-calc .bright .gain,.throw-calc .bright .gain .small,
.throw-calc .fact .k,.throw-calc .facts .ends,.how-to ol{color:var(--box-text)}
.throw-calc svg .lbl.diag,.throw-calc svg .lbl.small{fill:var(--box-text)}
/* (d) item 260, Screens for Sale: "The 3 boxes, build payment and sizes - there is room for them next to Order and pay box":
   the PayID button and the three section links in one row, all 40px tall, wrapping on phones */
.top-ways{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:14px 0 0}
.top-ways .jump{display:flex;flex-wrap:wrap;gap:8px;margin:0}
.top-ways .btn,.top-ways .jump a{min-height:40px;margin:0;padding:0 16px;font:600 var(--fs-xs)/1.2 var(--font-head);letter-spacing:.08em;text-transform:uppercase}
@media (max-width:600px){.top-ways .btn,.top-ways .jump a{padding:0 12px;letter-spacing:.04em}}   /* on a phone the PayID button keeps to one line */
/* (e) item 264, Gallery: "Large weird looking inverted commas at the start of each review need to go" (style.css), Steve Dawson's
   line out of the cards as one line above them ("Put it under or above the paragraphs so it all fits into place nicely"), and
   the cards in two columns that fill from the top, so a short card leaves no hole (one column on phones) */
#reviews .press-quote{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 14px;margin:0 0 20px}
#reviews .press-quote footer{margin:0}
.review-list{display:block;columns:2;column-gap:20px}
.review-list .review{break-inside:avoid;-webkit-column-break-inside:avoid;margin:0 0 20px}
@media (max-width:900px){.review-list{columns:1}}
.review-list .review:last-child{column-span:all;-webkit-column-span:all}   /* review V2-1, 30 Oct 2026: the short last review (Rob) across both columns under them, so the columns end level */
/* (f) item 267, Contact: "too much dead black space around it. Tighten right up": the phone, email and post card right beside
   the form, both at the top; under the form on phones */
.two.contact-two{grid-template-columns:minmax(0,640px) minmax(0,420px);gap:28px 32px;justify-content:start}   /* review V2-2, 30 Oct 2026: wider, less empty space to the right (was 560 and 360) */
.contact-two form.contact{max-width:none}
@media (max-width:900px){.two.contact-two{grid-template-columns:minmax(0,1fr)}}
/* (g) item 260 (review F4, 30 Oct 2026), Screens for Sale: the sizes and prices are a card of their own under the order box, the
   full width of the page, so no empty column runs beside the price tables; the same card as the order box, its text white */
.sizes-box.on-own{background:var(--bg3);border:0;border-radius:10px;box-shadow:var(--shadow);padding:clamp(20px,2.4vw,30px);margin:0;color:var(--box-text)}
.sizes-box.on-own .table-wrap{background:none;box-shadow:none;border-radius:0}
.sizes-box.on-own .muted{color:var(--box-text)}
/* item 294 (1 Nov 2026, Richard: "sizes and prices needs to go full width also"): the note under its heading runs the card's full width */
/* (h) item 260 (review V1, 30 Oct 2026), "grey text in some of the boxes": on Projectors the order forms and the stock box sit in
   a .prose column, whose grey p and li (style.css) outranked the white of (c) */
.prose :is(.order-form,.info-box) :is(p,li),.prose .stock-note{color:var(--box-text)}
.info-box .prose :is(p,li){color:var(--box-text)}   /* item 302 (1 Nov 2026): the lamps text under Pages, a .prose inside the box */
.prose .order-form .pick-summary{color:#fff}
/* (i) item 260 (review F10, 30 Oct 2026), "it looks like there's 4" fonts: eWAY's own Pay now button in the heading font too (its
   stylesheet sets Helvetica Neue/Arial); its colours and size stay eWAY's */
.pay-box .paybtn .eway-button,.pay-box .paybtn .eway-button *{font-family:var(--font-head) !important}
/* (j) item 260 (review V2, 30 Oct 2026): on a phone the button row is PayID, then Build + Payment, then Sizes (it missed by a hair) */
@media (max-width:400px){.top-ways .jump a{padding:0 10px}}
/* (k) item 261 (review V2-5, 30 Oct 2026): a phone number in the text keeps to one line, so "(07)" is not left at the end of a line;
   the long "Call ... for our best price" lines (.call-link) and the call buttons still wrap */
a[href^="tel:"]:not(.call-link):not(.btn){white-space:nowrap}
.videos-band h2 > span{white-space:nowrap}   /* item 260 (30 Oct 2026): the model name in 'Watch the ...' stays on one line on a phone */
table.pricelist td:first-child{box-shadow:inset 0 -1px 0 rgba(255,255,255,.08)}   /* the row line under the sticky Size column (30 Oct 2026) */