@font-face{font-family:'Anton';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/anton-400.b9beea08.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;} @font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/barlow-condensed-600.0a7db401.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;} @font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/fonts/barlow-condensed-700.05ba48a1.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;} @font-face{font-family:'Fraunces';font-style:normal;font-weight:400 700;font-display:swap;src:url('/assets/fonts/fraunces-400.48642176.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;} @font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/ibm-plex-mono-400.bb87500e.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;} @font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/ibm-plex-mono-600.ce9a5ca3.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;} @font-face{font-family:'Inter';font-style:normal;font-weight:400 700;font-display:swap;src:url('/assets/fonts/inter-400.f11d729b.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;} :root{ --ink:#111110; --paper:#ffffff; --red:#eda81c; --on-accent:#101010; --grey:#918d86; --line:rgba(255,255,255,.18); --line-d:rgba(11,11,12,.16); --pad:clamp(1.25rem,4vw,3rem); } *{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{ margin:0;background:var(--ink);color:var(--paper); font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; font-size:18px;line-height:1.55;-webkit-font-smoothing:antialiased; } img{max-width:100%;height:auto;display:block} a{color:inherit} /* 1440, not 1240: at 1240 a 1920-wide window left ~340px of dead black each side and the page read as a narrow strip. Paragraphs stay at max-width:60ch below, so this widens the photography and the grids, not the line length. */ .wrap{width:min(1440px,100% - (2 * var(--pad)));margin-inline:auto} /* Anton for display - a genuine heavy condensed grotesque, which is as close to painted signage lettering as an open licence gets. Barlow Condensed 700 carries the smaller signage furniture (nav, tags, field labels) where Anton is too tight to read. Both self-hosted; see assets/fonts. */ h1,h2,h3{ font-family:Anton,"Arial Narrow",Impact,system-ui,sans-serif; font-weight:400;text-transform:uppercase;letter-spacing:.005em;line-height:.94; } .sign{ font-family:"Barlow Condensed","Arial Narrow",Arial,system-ui,sans-serif; font-weight:700;text-transform:uppercase;letter-spacing:.02em;line-height:1.05; } h1,h2,h3{margin:0 0 .5em} h1{font-size:clamp(2.4rem,7vw,5.25rem)} h2{font-size:clamp(1.5rem,2.7vw,2.2rem)} h3{font-size:1.35rem} p{margin:0 0 .9em;max-width:60ch} .lede{font-size:clamp(1.1rem,1.7vw,1.3rem);color:#e7e8ea;max-width:48ch} .skip{position:absolute;left:-9999px} .skip:focus{left:1rem;top:1rem;position:fixed;z-index:99;background:var(--red); color:var(--on-accent);padding:.8rem 1.1rem} a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible, textarea:focus-visible{outline:3px solid var(--red);outline-offset:3px} /* -- draft ---------------------------------------------------------------- */ .draft{background:var(--red);color:var(--on-accent);text-align:center;padding:.55rem 1rem; font-weight:700;font-size:.9rem;letter-spacing:.06em;text-transform:uppercase} /* -- header: a platform sign, not a website nav ---------------------------- */ .hdr{border-bottom:3px solid var(--paper);position:sticky;top:0;z-index:30; background:var(--ink)} .hdr .wrap{display:flex;align-items:stretch;gap:0;flex-wrap:wrap;min-height:96px} .brand{display:flex;align-items:center;padding:.7rem 1.5rem .7rem 0;flex:none} /* the mark is the strongest thing they own - let it carry the header */ .brand img{width:clamp(170px,15vw,260px);height:auto} nav{margin-left:auto;display:flex;flex-wrap:wrap} nav a{ display:inline-flex;align-items:center;padding:1rem 1.1rem;min-height:52px; text-decoration:none;font-size:1.05rem;letter-spacing:.05em; border-left:1px solid var(--line); } nav a[aria-current="page"]{background:var(--red);color:var(--on-accent)} /* -- the vertical sign rail, lifted from their own tower sign -------------- */ .rail{display:none} @media (min-width:1100px){ .rail{ display:flex;position:fixed;left:0;top:0;bottom:0;width:46px;z-index:25; background:var(--red);color:var(--on-accent);align-items:center;justify-content:center; writing-mode:vertical-rl;text-orientation:mixed; letter-spacing:.5em;font-size:.85rem; } body{padding-left:46px} } /* -- hero: photograph behind, headline and the Sale Day board on top ------ */ .hero{position:relative;border-bottom:3px solid var(--paper);overflow:hidden} .hero .shot{position:absolute;inset:0;background:#000} .hero .shot img{width:100%;height:100%;object-fit:cover;opacity:.72} /* A real scrim, not a hopeful opacity. Their stand photograph is busy - white type was landing on a pale ceiling and the red word was landing on a red sign. This darkens the left, where the type lives, and leaves the right of the frame readable as a photograph. */ .hero .shot::after{content:"";position:absolute;inset:0;background: linear-gradient(90deg,rgba(11,11,12,.94) 0%,rgba(11,11,12,.80) 38%, rgba(11,11,12,.42) 70%,rgba(11,11,12,.30) 100%), linear-gradient(0deg,rgba(11,11,12,.55) 0%,rgba(11,11,12,0) 45%)} .hero > .wrap{position:relative;z-index:1;display:grid;gap:clamp(1.25rem,2.5vw,2.25rem); align-items:center;padding-block:clamp(1.5rem,3vw,2.5rem)} @media (min-width:1000px){ .hero > .wrap{grid-template-columns:minmax(0,1fr) minmax(22rem,30rem)} } .hero .say{min-width:0} .hero h1{margin:0 0 .2em;font-size:clamp(2.2rem,5.5vw,4rem); text-shadow:0 2px 24px rgba(0,0,0,.85)} .hero .lede{margin:0;text-shadow:0 1px 16px rgba(0,0,0,.9)} /* the board sits on a photograph here, so it needs to be solid */ .hero .board{background:rgba(11,11,12,.94);backdrop-filter:blur(2px)} .hero h1 em{font-style:normal;color:var(--red)} /* -- numbered section heads, the way a yard is signed ---------------------- */ /* One boundary = one gap. Sections pay only on the top, so consecutive sections cannot stack two paddings into a 300px void. */ section{padding-block:0;padding-top:clamp(1.5rem,2.6vw,2.25rem)} section:last-of-type{padding-bottom:clamp(1.5rem,2.6vw,2.25rem)} .head{border-top:3px solid var(--paper);padding-top:.8rem;margin-bottom:1.1rem} .head h2{margin:0} /* -- Sale Day as a platform indicator board -------------------------------- */ .board{border:3px solid var(--paper);background:#141416} .board .top{background:var(--paper);color:var(--ink);padding:.4rem 1.25rem; display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap; font-size:1rem;letter-spacing:.1em} .board .rows{padding:clamp(.8rem,1.5vw,1.1rem) clamp(1rem,2.2vw,1.4rem)} .board .row{display:grid;grid-template-columns:6.5rem 1fr;gap:.75rem; padding:.4rem 0;border-bottom:1px dashed var(--line);align-items:baseline} .board .row:last-child{border-bottom:0} .board .k{color:var(--red);font-size:.95rem;letter-spacing:.12em} .board .v{font-size:clamp(1rem,1.5vw,1.2rem)} .board .when{font-family:Anton,"Arial Narrow",Impact,sans-serif;font-weight:400; font-size:clamp(1.45rem,2.5vw,2rem);line-height:1.05;letter-spacing:.005em} .board .none{padding:clamp(1.25rem,3vw,2rem);color:var(--grey)} /* -- routes onward: asymmetric, photographic, not three equal boxes -------- */ /* Full-bleed sections. `section` carries no horizontal padding, so a child that skips .wrap already spans the full CONTENT width - which is what we want, and is NOT the same as 100vw: the sign rail is position:fixed at 46px with a matching body padding-left, so any vw-based bleed slides under the rail on the left and overflows by the scrollbar on the right. Omitting the wrapper avoids both. */ .bleed{padding-inline:0} /* The strip meets the hero's 3px bottom rule at the top; this closes it off at the bottom so it reads as a band rather than running into the copy below. */ .bleed .routes{border-bottom:3px solid var(--paper)} .routes{display:grid;gap:3px;background:var(--paper); grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr))} .route{position:relative;background:var(--ink);min-height:13rem;display:flex; flex-direction:column;justify-content:flex-end;padding:1.5rem; text-decoration:none;overflow:hidden} .route img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover; opacity:.55} /* a scrim, so the label is readable over any photograph rather than only the dark ones - white type straight onto a photo is a coin toss */ .route::after{content:"";position:absolute;inset:0; background:linear-gradient(180deg,rgba(11,11,12,.15) 35%,rgba(11,11,12,.88) 100%)} .route span,.route h3{position:relative;z-index:1} .route h3{margin:0;font-size:clamp(1.5rem,3vw,2.2rem)} .route span{color:#e7e8ea;margin-bottom:.35rem;font-size:.85rem; letter-spacing:.04em;text-transform:none;font-weight:400;max-width:26ch} .route:hover img,.route:focus-within img{opacity:.6} /* -- stock: hard tiles ----------------------------------------------------- */ .chips{display:flex;flex-wrap:wrap;gap:0;margin:0 0 2rem;padding:0; border:1px solid var(--line)} .chip{list-style:none} .chip button{font:inherit;font-size:.95rem;font-weight:700;letter-spacing:.06em; text-transform:uppercase;cursor:pointer;background:transparent;color:inherit; border:0;border-right:1px solid var(--line);padding:.85rem 1.1rem;min-height:48px} .chip button[aria-pressed="true"]{background:var(--red);color:var(--on-accent)} /* background was var(--line): with auto-fill, a single item left the rest of the row as empty tracks and the grid's grey background filled them - a big grey box beside one card. Transparent instead, and each card carries its own 1px line so the separation survives. */ .grid{display:grid;gap:3px;background:transparent; grid-template-columns:repeat(auto-fill,minmax(min(100%,17rem),1fr))} .item{background:var(--ink);display:flex;flex-direction:column; box-shadow:0 0 0 1px var(--line)} .item[hidden]{display:none} .item .shot{position:relative;aspect-ratio:1;background:#161618;overflow:hidden} .item .shot img{width:100%;height:100%;object-fit:cover} .item .ph{position:absolute;inset:0;display:grid;place-items:center; color:var(--grey);font-size:.85rem;letter-spacing:.1em} /* signal aspect: clear / caution / danger. See ASPECTS in build.py. */ .aspect{position:absolute;top:0;left:0;display:inline-flex;align-items:center; gap:.45rem;background:rgba(11,11,12,.86);color:#fff;padding:.35rem .7rem; font-size:.75rem;letter-spacing:.1em;font-weight:700;text-transform:uppercase} .aspect i{width:.7rem;height:.7rem;border-radius:50%;display:block;flex:none; box-shadow:0 0 0 1px rgba(255,255,255,.35), 0 0 8px currentColor} .aspect.clear i{background:#25c265;color:#25c265} .aspect.caution i{background:#e8a33d;color:#e8a33d} .aspect.danger i{background:#e03a3a;color:#e03a3a} .legend{display:flex;flex-wrap:wrap;gap:1.25rem;margin:0 0 1.25rem;padding:0; color:var(--grey);font-size:.85rem} .legend li{list-style:none;display:flex;align-items:center;gap:.45rem} .legend i{width:.7rem;height:.7rem;border-radius:50%;display:block; box-shadow:0 0 0 1px rgba(255,255,255,.3)} .item .b{padding:1.15rem;display:flex;flex-direction:column;gap:.6rem;flex:1} .item h3{margin:0;font-size:1.2rem} .tags{display:flex;flex-wrap:wrap;gap:.3rem;margin:0;padding:0} .tags li{list-style:none;font-size:.75rem;font-weight:700;letter-spacing:.08em; padding:.2rem .45rem;border:1px solid var(--line);text-transform:uppercase} .tags li.dcc{background:var(--red);border-color:var(--red);color:var(--on-accent)} .slip{margin:0;font-size:.8rem;color:var(--grey);letter-spacing:.04em} .price{margin:0;font-size:1.9rem;line-height:1} .enq{margin-top:auto;text-decoration:none;font-size:.9rem;letter-spacing:.1em; font-weight:700;color:var(--red);text-transform:uppercase} .empty{border:3px dashed var(--line);padding:clamp(2rem,6vw,4rem);text-align:center} .empty p{margin-inline:auto} /* -- forms ----------------------------------------------------------------- */ form{max-width:40rem} .field{margin:0 0 1.5rem} label{display:block;font-weight:700;margin-bottom:.4rem;letter-spacing:.04em} .hint{display:block;font-weight:400;color:var(--grey);font-size:.92rem; margin-bottom:.45rem;letter-spacing:0} input[type=text],input[type=email],input[type=tel],textarea,select{ font:inherit;width:100%;padding:.85rem;min-height:50px;background:#141416; color:var(--paper);border:1px solid var(--paper);border-radius:0} textarea{min-height:8.5rem;resize:vertical} fieldset{border:1px solid var(--line);padding:.85rem 1.1rem 1rem;margin:0 0 1.25rem} legend{font-weight:700;letter-spacing:.06em;padding-inline:.5rem} .opts{display:grid;gap:.1rem .75rem; grid-template-columns:repeat(auto-fit,minmax(min(100%,10rem),1fr))} .opt{display:flex;align-items:center;gap:.7rem;min-height:44px;font-weight:400; letter-spacing:0;white-space:nowrap} .opt input{width:1.35rem;height:1.35rem;flex:none;accent-color:#eda81c} button.send{font:inherit;font-weight:700;font-size:1.05rem;letter-spacing:.1em; text-transform:uppercase;cursor:pointer;background:var(--red);color:var(--on-accent); border:0;padding:1.05rem 2rem;min-height:56px} .note{color:var(--grey);font-size:.95rem} /* -- pull quote in their own words ----------------------------------------- */ .quote{border-top:3px solid var(--red);border-bottom:3px solid var(--red); padding:clamp(1.1rem,2.5vw,1.9rem) 0;margin:0} .quote p{font-size:clamp(1.35rem,3.2vw,2.3rem);margin:0;max-width:24ch;line-height:1.05} .quote cite{display:block;margin-top:.6rem;font-style:normal;color:var(--grey); font-size:.85rem;letter-spacing:.1em} footer{border-top:3px solid var(--paper);margin-top:clamp(1.5rem,2.6vw,2.25rem); padding-block:2rem;font-size:.95rem;color:var(--grey)} footer a{color:var(--paper)} footer{text-align:center} footer .cols{display:flex;flex-wrap:wrap;justify-content:center; gap:1.5rem clamp(2rem,6vw,5rem);margin-bottom:1.5rem} footer .cols > div{min-width:9rem} footer h3{font-size:.8rem;letter-spacing:.14em;color:var(--red);margin:0 0 .4em} footer p{margin:0 0 .4em;max-width:none} footer .base{border-top:1px solid var(--line);padding-top:1rem; display:flex;flex-direction:column;gap:.3rem;align-items:center} @media print{ .hdr,nav,.rail,form,.chips,.hero .shot{display:none} body{background:#fff;color:#000;padding-left:0;font-size:12pt} .board{border-color:#000}.board .top{background:#000;color:#fff} .board .k{color:#000}.item{border:1px solid #000} } /* Motion, opt-in and reversible. Anything that moves is decoration; the page must be complete and readable with all of it switched off, which is what the no-preference guard guarantees. Written by hand rather than pulling in AOS or GSAP - both are heavy for an audience on old phones. */ .reveal{opacity:1} @media (prefers-reduced-motion: no-preference){ .reveal{opacity:0;transform:translateY(16px); transition:opacity .55s ease,transform .55s cubic-bezier(.2,.7,.3,1)} .reveal.in{opacity:1;transform:none} .item,.route img,.card{transition:transform .35s cubic-bezier(.2,.7,.3,1), box-shadow .35s ease,opacity .35s ease} .item:hover{transform:translateY(-3px)} .route:hover img,.route:focus-within img{transform:scale(1.04)} .route img{will-change:transform} } /* no-JS must not leave the page invisible */ .no-js .reveal{opacity:1;transform:none} .ico{width:1.05em;height:1.05em;flex:none;vertical-align:-.15em;opacity:.9} .k .ico,dt .ico{margin-right:.4rem} /* The phone menu button. Hidden everywhere until the phone breakpoint asks for it, and labelled rather than left as three bare lines. */ .menubtn{display:none;align-items:center;gap:.55rem;margin-left:auto; background:none;border:1px solid var(--line);color:inherit;cursor:pointer; font:inherit;font-size:.95rem;letter-spacing:.06em;text-transform:uppercase; padding:.6rem .85rem;min-height:46px;border-radius:4px} .menubtn .bars{display:inline-flex;flex-direction:column;gap:3px;width:18px} .menubtn .bars i{display:block;height:2px;background:currentColor;border-radius:2px} .menubtn[aria-expanded="true"]{background:var(--gold,#e8a33d);color:#000; border-color:transparent} /* The owners paste their Facebook wording into an event's note - usually a short emoji list. It gets its own strip under the rows so it is clearly their words rather than another field, and it keeps the card's padding. */ .board .bnote,.docket .bnote{padding:.9rem 1.1rem;border-top:1px solid var(--line)} .board .bnote p,.docket .bnote p{margin:0 0 .6em;font-size:.95rem;line-height:1.5} .board .bnote p:last-child,.docket .bnote p:last-child{margin-bottom:0} /* ---- phones --------------------------------------------------------------- `!!` THIS WAS A SIDEWAYS-SCROLLING NAV AND IT WAS THE WRONG CALL. Reported from a real phone on launch day, 2026-09-16: "menu is cut off". The reasoning for scrolling was sound in isolation - wrapping made the sticky header ~180px of permanent furniture, and a wrapped flex row with per-item borders leaves orphaned border segments. But measured on a 375px screen it put **Links, Sell to Us and Contact** past the right edge with no visual cue that anything was there. Technically scrollable, invisibly so. Two of the three hidden items are the ones the site exists for: Contact, and Sell to Us, which is their supply chain. And the audience is explicitly the opposite of the one a swipe-to-reveal menu suits - the client's own words are that they have lots of older customers who can browse a website but are not on Facebook. A menu you have to discover by swiping fails exactly them. So: wrap after all, and pay for it properly instead of hiding the cost. - The items stretch to fill each row (`flex:1 1 auto`), so a wrapped row has no ragged end and no orphaned border segments - the objection above. - The header stops being sticky on phones, so two rows cost height ONCE as you scroll past rather than permanently - the other objection. Everything is visible, nothing has to be found. */ @media (max-width:820px){ .hdr{position:static} .hdr .wrap{min-height:0;gap:0} .brand{padding:.6rem 0} .brand img{width:150px} nav{margin-left:0;width:100%;flex-wrap:wrap;overflow-x:visible;gap:0; border-top:1px solid var(--line)} /* `flex:1 1 auto` alone sized each item to its own text, which packed five onto the first row and left SELL TO US and CONTACT stretched across the second - lopsided, and it read as a mistake. A basis of 22% means four fit per row and no more, so seven land as a tidy 4 + 3 with both rows full. */ nav a{flex:1 1 22%;min-width:0;justify-content:center;white-space:nowrap; padding:.7rem .5rem;min-height:46px;font-size:.92rem;border-radius:0} /* The button only appears, and the nav only collapses, once the script has marked the body as `js`. Without JavaScript the full menu stays on the page as a wrapped 4 + 3 grid - which is also exactly what the button reveals when it is open, so both paths show the same thing. */ body.js .menubtn{display:inline-flex} body.js nav{display:none} body.js nav.open{display:flex} nav a:first-child{border-left:0} /* The footer stacked into a centred pile on a phone: three headings and three values down the middle, with a 238px email link in the thick of it. Centring reads as deliberate across a row and as jumble down a column. */ footer{text-align:left} footer .cols{display:grid;grid-template-columns:1fr;gap:1.4rem; justify-content:stretch;margin-bottom:1.4rem} footer .cols > div{min-width:0} footer .base{align-items:flex-start;text-align:left} footer a{overflow-wrap:anywhere} .chips{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch; scrollbar-width:none} .chips::-webkit-scrollbar{display:none} .chip button{white-space:nowrap} /* one card per row on a phone is correct, but a full-width square photo is a lot of scrolling for a list you are meant to skim */ .item .shot{aspect-ratio:4/3} } /* preview-only: sample stock and dead forms must declare themselves */ .egflag{position:absolute;top:0;right:0;background:#b3261e;color:#fff; padding:.3rem .6rem;font-size:.72rem;font-weight:700;letter-spacing:.09em; text-transform:uppercase;z-index:2} .egnote{border:2px dashed currentColor;padding:.9rem 1.1rem;margin:0 0 1.25rem; max-width:60ch;font-size:.95rem;opacity:.92} .draftform{border-left:4px solid #b3261e;padding:.6rem 0 .6rem .9rem; margin:0 0 1rem;font-size:.95rem;opacity:.92;max-width:52ch} /* Shown only when the enquiry Function bounced the visitor back with ?error=. Deliberately loud: it is the only thing telling them the message did not go. */ .formerror{border-left:4px solid #b3261e;background:rgba(179,38,30,.10); padding:.75rem .95rem;margin:0 0 1.25rem;font-size:1rem;font-weight:500; max-width:52ch;border-radius:0 4px 4px 0} /* lightbox trigger */ a.zoom{display:block;position:relative;cursor:zoom-in;width:100%;height:100%} a.zoom img{width:100%;height:100%;object-fit:cover} .routes.albums .route{min-height:15rem} .route.album img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .route.album{position:relative;overflow:hidden;min-height:13rem;display:flex; flex-direction:column;justify-content:flex-end;padding:1.5rem;color:#fff} .route.album::after{content:"";position:absolute;inset:0; background:linear-gradient(180deg,rgba(0,0,0,.05) 30%,rgba(0,0,0,.82) 100%)} .route.album > *{position:relative;z-index:1} .route.album h3,.route.album p,.route.album .go{color:#fff} .route.album p{color:#e7e8ea} .crumb{margin:0 0 .6rem;font-size:.95rem} .crumb a{text-decoration:none;opacity:.85} .photos{display:grid;gap:6px; grid-template-columns:repeat(auto-fill,minmax(min(100%,16rem),1fr))} .photos .shot{margin:0;position:relative;aspect-ratio:4/3;overflow:hidden;background:#000} .photos .shot img{width:100%;height:100%;object-fit:cover} .photos figcaption{position:absolute;left:0;right:0;bottom:0;padding:.45rem .7rem; font-size:.82rem;color:#fff;background:linear-gradient(0deg,rgba(0,0,0,.75),rgba(0,0,0,0))} /* A directory, not a paragraph. The 60ch cap that suits prose left a short name like "AMRA" (55px) alone on a full-width row with a metre of rule and dead space beyond it. Flow the names into columns instead: auto-fill so a group of three sits in a row rather than a stack, min(100%,17rem) so the longest name ("Toodyay Miniature Railway") still fits one line and a narrow phone collapses to a single column. Cap the whole block so on a very wide screen it does not stretch into four sparse columns. */ .linklist{margin:0 0 1.75rem;padding:0;max-width:64rem; display:grid;gap:0 clamp(1.5rem,3vw,3rem); grid-template-columns:repeat(auto-fill,minmax(min(100%,17rem),1fr))} .linklist li{list-style:none;padding:.7rem 0;border-bottom:1px solid var(--line)} .linklist li a{font-weight:700;text-decoration:none;border-bottom:1px solid currentColor} .linklist li span{display:block;margin-top:.2rem;opacity:.8;font-size:.95rem} /* Contact: reach-info and the message form side by side, so neither is a narrow column alone on a wide page. Stacks under 820px. */ .reach{display:grid;gap:clamp(1.75rem,4vw,3.5rem);align-items:start;margin-top:.4rem} .reach form{max-width:none} .reach-info{margin-bottom:2rem} .reach-info p{max-width:none} .c-photo{margin:0 0 1.5rem} .c-photo img{width:100%;height:auto;display:block} @media (min-width:820px){ .reach{grid-template-columns:minmax(0,1fr) minmax(0,34rem)} .reach-right{order:2} } .about{display:grid;gap:clamp(1rem,3vw,2rem);align-items:start; grid-template-columns:1fr} @media (min-width:760px){.about{grid-template-columns:minmax(0,22rem) minmax(0,1fr)} .about.nophoto{grid-template-columns:1fr}} .about .us{margin:0} .about .us img{width:100%;height:auto} /*! PhotoSwipe main CSS by Dmytro Semenov | photoswipe.com */ .pswp { --pswp-bg: #000; --pswp-placeholder-bg: #222; --pswp-root-z-index: 100000; --pswp-preloader-color: rgba(79, 79, 79, 0.4); --pswp-preloader-color-secondary: rgba(255, 255, 255, 0.9); /* defined via js: --pswp-transition-duration: 333ms; */ --pswp-icon-color: #fff; --pswp-icon-color-secondary: #4f4f4f; --pswp-icon-stroke-color: #4f4f4f; --pswp-icon-stroke-width: 2px; --pswp-error-text-color: var(--pswp-icon-color); } /* Styles for basic PhotoSwipe (pswp) functionality (sliding area, open/close transitions) */ .pswp { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: var(--pswp-root-z-index); display: none; touch-action: none; outline: 0; opacity: 0.003; contain: layout style size; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } /* Prevents focus outline on the root element, (it may be focused initially) */ .pswp:focus { outline: 0; } .pswp * { box-sizing: border-box; } .pswp img { max-width: none; } .pswp--open { display: block; } .pswp, .pswp__bg { transform: translateZ(0); will-change: opacity; } .pswp__bg { opacity: 0.005; background: var(--pswp-bg); } .pswp, .pswp__scroll-wrap { overflow: hidden; } .pswp__scroll-wrap, .pswp__bg, .pswp__container, .pswp__item, .pswp__content, .pswp__img, .pswp__zoom-wrap { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .pswp__img, .pswp__zoom-wrap { width: auto; height: auto; } .pswp--click-to-zoom.pswp--zoom-allowed .pswp__img { cursor: -webkit-zoom-in; cursor: -moz-zoom-in; cursor: zoom-in; } .pswp--click-to-zoom.pswp--zoomed-in .pswp__img { cursor: move; cursor: -webkit-grab; cursor: -moz-grab; cursor: grab; } .pswp--click-to-zoom.pswp--zoomed-in .pswp__img:active { cursor: -webkit-grabbing; cursor: -moz-grabbing; cursor: grabbing; } /* :active to override grabbing cursor */ .pswp--no-mouse-drag.pswp--zoomed-in .pswp__img, .pswp--no-mouse-drag.pswp--zoomed-in .pswp__img:active, .pswp__img { cursor: -webkit-zoom-out; cursor: -moz-zoom-out; cursor: zoom-out; } /* Prevent selection and tap highlights */ .pswp__container, .pswp__img, .pswp__button, .pswp__counter { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .pswp__item { /* z-index for fade transition */ z-index: 1; overflow: hidden; } .pswp__hidden { display: none !important; } /* Allow to click through pswp__content element, but not its children */ .pswp__content { pointer-events: none; } .pswp__content > * { pointer-events: auto; } /* PhotoSwipe UI */ /* Error message appears when image is not loaded (JS option errorMsg controls markup) */ .pswp__error-msg-container { display: grid; } .pswp__error-msg { margin: auto; font-size: 1em; line-height: 1; color: var(--pswp-error-text-color); } /* class pswp__hide-on-close is applied to elements that should hide (for example fade out) when PhotoSwipe is closed and show (for example fade in) when PhotoSwipe is opened */ .pswp .pswp__hide-on-close { opacity: 0.005; will-change: opacity; transition: opacity var(--pswp-transition-duration) cubic-bezier(0.4, 0, 0.22, 1); z-index: 10; /* always overlap slide content */ pointer-events: none; /* hidden elements should not be clickable */ } /* class pswp--ui-visible is added when opening or closing transition starts */ .pswp--ui-visible .pswp__hide-on-close { opacity: 1; pointer-events: auto; } /*