/* About Us (11 Sep 2026). Brand tokens as the rest of the prototype. */
@font-face{font-family:"Graphik";src:local("Graphik Regular"),local("Graphik-Regular");font-weight:400}
@font-face{font-family:"Graphik";src:local("Graphik Medium"),local("Graphik-Medium");font-weight:500}
@font-face{font-family:"Solina";src:local("Solina Book"),local("Solina-Book");font-weight:300}
:root{--sand:#F2ECE9;--ink:#000;--blue:#1847E8;--orange:#F36F23;--pink:#FF3CA0;--dgreen:#C3E1CC;--green:#0F4A2C;--paper:#FBF8F5;   /* --green: V2 dark green, sampled - see page.css */
  --head:"Graphik","Inter",Arial,sans-serif;--body:"Solina","Figtree",Arial,sans-serif;--nav:72px;--pad:40px;--ease:cubic-bezier(.2,.8,.2,1)}
@view-transition{navigation:auto}                                          /* Tier 3 view transitions - see page.css for the why */
@media (prefers-reduced-motion:reduce){@view-transition{navigation:none}}
/* NO WIDE-SCREEN CAP: --pad stays put at every width and the page runs full-bleed to 3440px and beyond (Nuo,
   13 Sep 2026, reversing his own instruction of that morning). page.css carries the reasoning and the measured cost. */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--sand);color:var(--ink);font-family:var(--body);font-weight:400;font-size:17px;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{display:block}
button{font:inherit;cursor:pointer;color:inherit}
.caps{font-family:var(--head);font-weight:400;letter-spacing:-0.02em;line-height:1.02}
.k{font-family:var(--head);text-transform:uppercase;font-size:11px;letter-spacing:.08em;color:#3f3c39}
.pill{font-family:var(--head);font-size:14px;letter-spacing:-0.01em;padding:12px 20px;border:2px solid var(--ink);border-radius:999px;background:transparent;color:var(--ink);display:inline-flex;align-items:center;gap:8px;transition:background .2s,color .2s}
/* outlines only, no fill at rest or on hover - V2 slide 79 (13 Sep 2026); page.css says why .fill keeps its name */
.pill.fill{background:transparent;border-color:var(--blue);color:var(--blue)}
.pill.light{border-color:#fff;color:#fff}
@media (hover:hover){.pill:hover{background:transparent;border-color:var(--blue);color:var(--blue)}
.pill.fill:hover{border-color:var(--ink);color:var(--ink)}}
.pill.sm{padding:8px 14px;font-size:12px}
section{padding:0 var(--pad)}
h2.caps{font-size:clamp(28px,2.8vw,40px);letter-spacing:-0.02em}
.hd{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:32px;flex-wrap:wrap} /* wrap: at 360 "ART AT DAISY GREEN" + "TAKE THE TOUR" ran 13px past the screen and the whole page scrolled sideways (measured 25 Sep 2026) */
.hd p{font-size:clamp(16px,1.2vw,19px);color:#2b2926;max-width:46ch}
.reveal{opacity:0;transform:translateY(28px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.in{opacity:1;transform:none}

/* nav */
.nav{position:fixed;top:0;left:0;right:0;height:var(--nav);z-index:50;display:flex;align-items:center;justify-content:space-between;padding:0 var(--pad);transition:background .35s}
.nav .logo{height:24px;width:auto}.nav .logo.dark{display:none}
.nav ul{display:flex;gap:28px;list-style:none;font-family:var(--head);text-transform:uppercase;font-size:13px;letter-spacing:.02em;color:#fff;white-space:nowrap}
.nav ul .here{border-bottom:2px solid currentColor;padding-bottom:2px}
.nav .book{font-family:var(--head);font-size:14px;padding:12px 20px;border:2px solid #fff;border-radius:999px;color:#fff;background:transparent;white-space:nowrap;transition:all .25s}
.nav.solid{background:var(--sand);box-shadow:0 1px 0 rgba(0,0,0,.08)}
.nav.solid .logo.light{display:none}.nav.solid .logo.dark{display:block}
.nav.solid ul{color:var(--ink)}.nav.solid .book{border-color:var(--blue);background:transparent;color:var(--blue)}

/* chapters rail: appears once the hero has gone, shows where you are */
.chapters{position:fixed;top:var(--nav);left:0;right:0;z-index:45;display:flex;justify-content:center;gap:6px;padding:8px var(--pad);opacity:0;visibility:hidden;transform:translateY(-16px);transition:opacity .35s,transform .35s var(--ease),visibility 0s .35s;pointer-events:none}
.chapters.on{opacity:1;visibility:visible;transform:none;pointer-events:auto;transition:opacity .35s,transform .35s var(--ease),visibility 0s}
.chapters a{font-family:var(--head);text-transform:uppercase;font-size:11px;letter-spacing:.06em;padding:8px 14px;border-radius:999px;background:rgba(242,236,233,.85);backdrop-filter:blur(8px);border:1px solid rgba(0,0,0,.08);transition:background .2s,color .2s}
.chapters a.here{background:var(--ink);color:var(--sand);border-color:var(--ink)}

/* ---- hero ---- */
.hero{position:relative;height:100svh;min-height:640px;overflow:hidden;background:#0d1b1e;color:#fff;padding:0}
.hero img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%;animation:drift 40s ease-in-out infinite alternate;transform-origin:50% 60%}
/* ONE SLOW DRIFT FOR EVERY HERO PHOTOGRAPH (Nuo, 13 Oct 2026: "the hero image zooms in rapidly at the start, can we stop that? Or let it zoom in very slowly and smoothly? ... make everything consistent!"): from rest (scale 1, exactly as first painted) to 1.03 and back, 40s each way, ease-in-out - the Christmas 30 Sep cap of 1.03 is now everyone's. The rapid zoom was motion.js setting scale 1.08 on the image a moment after load; that is gone. */
@keyframes drift{from{transform:scale(1)}to{transform:scale(1.03)}}
.hero .shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.3),rgba(0,0,0,0) 40%,rgba(0,0,0,.55) 100%)}
.hero .copy{position:absolute;left:var(--pad);right:var(--pad);bottom:64px}
.hero .k{color:rgba(255,255,255,.8);margin-bottom:18px}
.hero h1{font-size:clamp(44px,6.5vw,96px);letter-spacing:-0.02em;line-height:1.02}
.hero h1 .l{display:block;overflow:hidden}
.hero h1 .l span{display:inline-block;transform:translateY(112%);animation:rise 1s var(--ease) forwards}
.hero h1 .l:nth-child(2) span{animation-delay:.12s}.hero h1 .l:nth-child(3) span{animation-delay:.24s}
@keyframes rise{to{transform:none}}
.hero .row{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-top:26px;opacity:0;animation:fade 1s .6s var(--ease) forwards}
@keyframes fade{to{opacity:1}}
.hero .row p{font-size:clamp(16px,1.3vw,20px);max-width:44ch;color:rgba(255,255,255,.9)}
.hero .cue{position:absolute;left:50%;bottom:20px;transform:translateX(-50%);width:22px;height:22px;animation:bob 2s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,8px)}}

/* ---- who we are: the letter ---- */
.who{padding:110px var(--pad) 90px;display:grid;grid-template-columns:1fr 1.1fr;gap:64px;align-items:start}
.who .photo{position:relative;border-radius:16px;overflow:hidden;aspect-ratio:4/5;background:#ddd;box-shadow:0 30px 60px rgba(0,0,0,.16)}
.who .photo img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.05);transform:scale(1.03);transition:transform 1.2s var(--ease)}
@media (hover:hover){.who .photo:hover img{transform:scale(1)}}
.who .photo .fl{position:absolute;right:18px;top:18px;width:30px;height:30px;animation:spin 14s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.who .letter{position:relative;padding-top:8px}
.who .letter h2{margin-bottom:26px}
.who .letter p{font-size:clamp(18px,1.45vw,23px);line-height:1.45;color:#1b1917;margin-bottom:1.1em;hyphens:auto;-webkit-hyphens:auto}
.who .letter p:first-of-type::first-letter{font-family:var(--head);font-size:3.3em;float:left;line-height:.8;padding:6px 10px 0 0;color:var(--blue)}
.who .sign{margin-top:26px;display:flex;align-items:baseline;gap:14px}
.who .sign b{font-family:var(--head);font-weight:500;font-size:clamp(26px,2.4vw,38px);letter-spacing:-0.02em;line-height:1}
.who .sign span{font-family:var(--head);text-transform:uppercase;font-size:11px;letter-spacing:.08em;color:#3f3c39}
/* the line under the signature draws itself */
.who .sign::after{content:"";flex:1;height:2px;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform 1s var(--ease) .3s}
.who .letter.in .sign::after{transform:scaleX(1)}

/* numbers */
.nums{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;padding:0 var(--pad) 100px}
.num{border-top:2px solid var(--ink);padding-top:14px}
.num b{display:block;font-family:var(--head);font-weight:400;font-size:clamp(32px,3.2vw,56px);letter-spacing:-0.02em;line-height:1.02;font-variant-numeric:tabular-nums}
.num span{font-family:var(--head);text-transform:uppercase;font-size:11px;letter-spacing:.08em;color:#3f3c39;display:block;margin-top:8px}

/* ---- our story: the photobook ---- */
.story{background:var(--ink);color:var(--sand);padding:96px var(--pad) 110px;position:relative;overflow:hidden}
.story .hd p{color:rgba(242,236,233,.75)}
.story .k{color:rgba(242,236,233,.7)}
.stage{position:relative;padding:20px 0 0}
/* the book: a spread of two pages; StPageFlip sizes it, the ratio keeps the box honest before it loads */
.bookbox{position:relative;width:min(100%,1180px);margin:0 auto}
.flipbook{width:100%;aspect-ratio:2/1.35}
.flipbook.scroll{aspect-ratio:auto;display:flex;flex-direction:column;gap:14px;max-height:80vh;overflow-y:auto}
.pg{position:relative;background:var(--paper);color:var(--ink);overflow:hidden;container-type:size}
.pg.cover{background:#1c3a2a;color:var(--sand)}
.pg.cover .in{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;padding:8%}
.pg.cover .big{font-family:var(--head);font-weight:400;letter-spacing:-0.02em;line-height:1.02;font-size:clamp(28px,4.2cqw,64px)}
/* the cover flower: a square, whatever the flex column does to it – on a phone it came out taller than it was wide
   (Nuo, 10 Sep 2026: "looks weird"); a touch bigger so the six petals read as the flower */
.pg.cover .fl{width:16%;max-width:84px;aspect-ratio:1/1;height:auto;object-fit:contain;flex:0 0 auto;align-self:flex-start}
.pg.cover small{font-family:var(--head);text-transform:uppercase;font-size:clamp(10px,1.3cqw,12px);letter-spacing:.1em;opacity:.8}   /* clamp floors raised to the 10/11px floors on a 350px page */
.pg.photo img{position:absolute;inset:6%;width:88%;height:88%;object-fit:cover;box-shadow:0 10px 30px rgba(0,0,0,.18)}
.pg.photo .tape{position:absolute;left:50%;top:3.5%;width:16%;height:3.5%;background:rgba(255,255,255,.55);transform:translateX(-50%) rotate(-2deg);box-shadow:0 1px 2px rgba(0,0,0,.1)}
.pg.text .in{position:absolute;inset:0;padding:10% 9% 9%;display:flex;flex-direction:column;overflow:hidden}
.pg.text .n{font-family:var(--head);text-transform:uppercase;font-size:clamp(11px,1.6cqw,12px);letter-spacing:.12em;color:var(--blue);margin-bottom:4%}
.pg.text h3{font-family:var(--head);font-weight:400;letter-spacing:-0.02em;line-height:1.02;font-size:clamp(18px,4cqw,38px);margin-bottom:4%}
/* larger and justified (Nuo, 11 Sep); fitText() in about.js steps the size down only when a long post overruns */
.pg.text .body{font-size:clamp(13px,3.1cqw,24px)}
.pg.text p{line-height:1.45;color:#2b2926;margin-bottom:.75em;text-align:justify;hyphens:auto;-webkit-hyphens:auto;overflow-wrap:normal}
.pg.text .folio{position:absolute;bottom:5%;right:8%;font-family:var(--head);font-size:clamp(10px,1.4cqw,12px);color:#9a958f}
.pg.back .in{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:10%;gap:6%}
.pg.back p{font-size:clamp(12px,2cqw,18px);color:#2b2926;max-width:30ch}
.pg.back .pill{font-size:clamp(10px,1.6cqw,14px)}
.stage .arrow{position:absolute;top:50%;transform:translateY(-50%);width:52px;height:52px;border-radius:50%;border:1.5px solid rgba(255,255,255,.6);background:rgba(255,255,255,.06);color:#fff;font-size:22px;display:grid;place-items:center;z-index:5;transition:background .2s}
@media (hover:hover){.stage .arrow:hover{background:rgba(255,255,255,.18)}}
.stage .arrow.prev{left:-6px}.stage .arrow.next{right:-6px}
.stage .bar{display:flex;justify-content:space-between;align-items:center;margin-top:18px;font-family:var(--head);text-transform:uppercase;font-size:11px;letter-spacing:.08em;color:rgba(242,236,233,.75)}
.stage .bar a{text-decoration:underline;text-underline-offset:3px}
.stf__parent{margin:0 auto}

/* ---- timeline: a line that draws as you scroll, stops that light up ---- */
.tl{padding:100px var(--pad) 90px;position:relative}
.tl .track{position:relative;margin-top:40px}
.tl .line{position:absolute;left:0;right:0;top:11px;height:2px;background:rgba(0,0,0,.12)}
.tl .line i{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--ink);transition:width .2s linear}
.tl .stops{position:relative;display:grid;grid-template-columns:repeat(8,1fr);gap:18px}   /* relative: the line now lives inside it */
/* MORE THAN EIGHT STOPS SCROLL SIDEWAYS (11 Sep 2026). The eight-column grid was sized to the eight stops it had; with
   twenty (opening years and awards added from the Wikipedia draft) it would wrap into three rows of type under a line
   that spans only the first. A timeline is a horizontal thing, so: fixed 220px columns in one row, the track scrolls,
   the line spans the whole row because it is positioned inside .stops (width:max-content), and it stays visible at
   every width - the ≤1100px rule that hides the line is for the wrapping grid, which this layout is not.
   These rules carry three classes so they beat the two-class media-query rules whatever the width. */
.tl .track.scroll{overflow-x:auto;overflow-y:hidden;padding-bottom:14px;scrollbar-width:thin;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
.tl .track.scroll .stops{grid-auto-flow:column;grid-auto-columns:220px;grid-template-columns:none;row-gap:0;width:max-content;min-width:100%}
.tl .track.scroll .stop{scroll-snap-align:start}
.tl .track.scroll .line{display:block}
.tl .stop{position:relative;padding-top:34px;opacity:.28;transition:opacity .5s}
.tl .stop.lit{opacity:1}
.tl .stop::before{content:"";position:absolute;left:0;top:4px;width:16px;height:16px;border-radius:50%;background:var(--sand);border:2px solid var(--ink);transition:background .3s,transform .3s}
.tl .stop.lit::before{background:var(--ink);transform:scale(1.15)}
.tl .stop.now::before{background:var(--blue);border-color:var(--blue)}
.tl .y{font-family:var(--head);font-size:clamp(22px,2vw,28px);letter-spacing:-0.02em;line-height:1}
.tl .t{font-family:var(--head);text-transform:uppercase;font-size:12px;letter-spacing:.04em;margin:10px 0 8px}
.tl .d{font-size:14px;line-height:1.45;color:#2b2926;hyphens:auto;-webkit-hyphens:auto}
/* justified everywhere, never a split word (Nuo, 10 Sep 2026) */
.hd p,.gcard p,.lam p,.pcard p,.scard .d,.pledge .small,.drawer .ours p{hyphens:auto;-webkit-hyphens:auto}
.tl .d a{text-decoration:underline;text-underline-offset:2px}

/* ---- art: a mosaic as on Private Hire (Nuo, 11 Sep) – dense grid, no frames, rounded tiles; artist and
   room slide up on hover; a click opens the artist ---- */
.art{padding:96px var(--pad) 110px}
.wall{display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:190px;grid-auto-flow:dense;gap:10px}
.frame{position:relative;margin:0;overflow:hidden;border-radius:10px;background:#ddd;cursor:pointer;opacity:0;transform:translateY(18px);transition:opacity .6s var(--ease),transform .6s var(--ease);transition-delay:var(--d,0ms)}
.frame.in{opacity:1;transform:none}
.frame.big{grid-column:span 2;grid-row:span 2}.frame.wide{grid-column:span 2}.frame.tall{grid-row:span 2}
.frame img{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.02);transition:transform .9s var(--ease)}
@media (hover:hover){.frame:hover img{transform:scale(1.08)}}
.frame figcaption{position:absolute;left:0;right:0;bottom:0;padding:26px 14px 12px;background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.7));color:#fff;font-family:var(--head);text-transform:uppercase;font-size:11px;letter-spacing:.06em;display:flex;justify-content:space-between;gap:10px;opacity:0;transform:translateY(8px);transition:opacity .3s,transform .3s}
@media (hover:hover){.frame:hover figcaption{opacity:1;transform:none}}
.frame figcaption span{opacity:.75;white-space:nowrap}
/* the artists: one flowing line of names in the display face; the portrait floats beside the cursor */
/* .frame.off and .more (the wall's collapse and its button) moved to ../wall.js on 11 Sep 2026 - it carries its own
   .dgw-off and .dgmore, including the [hidden] rule that author display:flex needs (learnt here first) */
.frame:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
.names{position:relative;margin-top:40px;padding-top:28px;border-top:2px solid var(--ink);display:block;text-align:justify;text-align-last:justify;font-size:clamp(20px,2.6vw,44px);line-height:1.15}   /* one row on a desktop, spread to the full width; about.js finds the size (Nuo, 11 Sep 2026) */
/* white-space:nowrap (11 Sep 2026, Nuo: "this is still not on one line"): a two-word name could break INSIDE itself -
   "Rosalind" on the first line, "Davis" on the second - and fitNames() never saw it, because an inline element's
   bounding box starts on its first line whatever its second is doing. A name is now one unbreakable word, so a wrap
   moves the whole name down and the fit can see it. */
.aname{display:inline;white-space:nowrap;background:none;border:0;padding:0;font-family:var(--head);letter-spacing:-0.02em;font-size:inherit;line-height:inherit;color:var(--ink);transition:color .2s;cursor:pointer}
.names .dot{font-style:normal;color:#b8b1ab}                               /* the divider is a word of its own – see about.js – so the justified gaps either side of it match */
@media (hover:hover){.names:hover .aname{color:#b8b1ab}
.names .aname:hover{color:var(--ink)}}
.peek{position:absolute;width:220px;height:280px;object-fit:cover;border-radius:12px;box-shadow:0 30px 60px rgba(0,0,0,.3);pointer-events:none;opacity:0;transform:scale(.9) rotate(-3deg);transition:opacity .25s,transform .35s var(--ease);z-index:5}
.peek.on{opacity:1;transform:none}
/* the drawer: one artist */
.drawer{position:fixed;inset:0;z-index:100;display:none;background:rgba(0,0,0,.6);opacity:0;transition:opacity .3s}
.drawer.on{display:block}.drawer.in{opacity:1}
.drawer .panel{position:absolute;right:0;top:0;bottom:0;width:min(560px,100%);background:var(--sand);color:var(--ink);overflow-y:auto;transform:translateX(100%);transition:transform .45s var(--ease);padding:0 0 40px}
.drawer.in .panel{transform:none}
.drawer .pic{width:100%;aspect-ratio:4/3;object-fit:cover;background:#ddd}
.drawer .body{padding:28px 32px}
.drawer h3{font-family:var(--head);font-weight:400;letter-spacing:-0.02em;line-height:1.02;font-size:clamp(22px,2vw,28px);margin:6px 0 6px}
.drawer .disc{font-family:var(--head);text-transform:uppercase;font-size:11px;letter-spacing:.08em;color:#3f3c39;margin-bottom:18px}
.drawer p{font-size:17px;line-height:1.5;color:#2b2926;margin-bottom:14px}
.drawer .ours{padding:16px 18px;background:#fff;border-radius:12px;border-left:3px solid var(--blue)}
.drawer .ours .k{margin-bottom:6px;color:var(--blue)}
.drawer .sites{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.drawer .sites a{display:inline-flex;align-items:center;gap:6px;font-family:var(--head);font-size:12px;padding:8px 12px;border:1.5px solid var(--ink);border-radius:999px}
.drawer .sites a img{width:12px;height:12px}
/* the close is FIXED, not absolute inside the scrolling panel: on a phone the panel is full-width (nothing beside it
   to tap) and the button used to scroll away with the bio, leaving no way out but scrolling back up */
.drawer .x{position:fixed;top:16px;right:16px;width:44px;height:44px;border-radius:50%;background:rgba(0,0,0,.5);border:1.5px solid rgba(255,255,255,.7);color:#fff;font-size:20px;display:grid;place-items:center;z-index:2}
body.locked{overflow:hidden}
.scard .what{background:rgba(0,0,0,.35)}                                   /* its own ground: the shade is .05 at the top, where the pill sits over bright photographs */
.pg.text .folio{color:#6f6a64}                                              /* #9a958f on the page was 2.9:1 */

/* ---- sourcing ---- */
.src{padding:100px var(--pad) 90px}
.sup{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.scard{position:relative;border-radius:14px;overflow:hidden;background:#111;color:#fff;aspect-ratio:4/3;transition:transform .5s var(--ease),box-shadow .5s;box-shadow:0 14px 30px rgba(0,0,0,.12)}
.scard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
@media (hover:hover){.scard:hover{transform:translateY(-6px);box-shadow:0 30px 60px rgba(0,0,0,.22)}
.scard:hover img{transform:scale(1.05)}}
.scard .sh{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.05),rgba(0,0,0,.8))}
.scard .what{position:absolute;left:18px;top:16px;font-family:var(--head);text-transform:uppercase;font-size:11px;letter-spacing:.1em;padding:6px 10px;border:1.5px solid rgba(255,255,255,.7);border-radius:999px}
.scard .body{position:absolute;left:18px;right:18px;bottom:16px}
.scard .name{font-family:var(--head);font-weight:400;letter-spacing:-0.02em;font-size:clamp(22px,2vw,28px);line-height:1.02}
.scard .d{font-size:14px;color:rgba(255,255,255,.85);margin-top:8px;max-height:0;overflow:hidden;transition:max-height .5s var(--ease)}
@media (hover:hover){.scard:hover .d{max-height:120px}}
/* long lines: two for the big text, one for the small (Nuo, 11 Sep) */
.pledge{margin-top:48px;border-radius:24px;background:var(--dgreen);color:var(--green);padding:44px 48px;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"big bc" "small bc";gap:0 48px;align-items:center}   /* minmax(0,…): the nowrap headline must overflow its column, not widen it, for the fit to measure */
.pledge .big{grid-area:big}
.pledge .small{grid-area:small}
.pledge .bc{grid-area:bc;align-self:center}
.pledge .big{font-family:var(--head);font-weight:400;letter-spacing:-0.02em;line-height:1.06;font-size:clamp(20px,2.05vw,32px);max-width:none;white-space:nowrap}   /* one line on a desktop; about.js shrinks the size to fit its own column and lets it wrap below 24px (Nuo, 11 Sep 2026). DO NOT add text-wrap:balance here - it is a shorthand that also sets text-wrap-mode:wrap, which overrides this nowrap and loses the one line entirely. about.js sets it inline, only on the wrapped branch */
.pledge .small{font-size:16px;margin-top:14px;color:#1e3f2a;max-width:none;text-wrap:balance}   /* nowrap overflowed the card between 861 and ~1,200px */
.pledge .bc{display:flex;flex-direction:column;align-items:center;gap:12px}
.pledge .bc img{height:120px;width:auto}
/* .pledge .bc a.pill green / ink-on-hover RETIRED 3 Oct 2026 (Nuo: every button black, blue on hover) */

/* ---- charity ---- */
.give{padding:0 var(--pad) 110px}
.gg{display:grid;grid-template-columns:1.2fr 1fr;gap:22px}
.gcard{position:relative;border-radius:20px;overflow:hidden;background:#111;color:#fff;min-height:420px;box-shadow:0 20px 40px rgba(0,0,0,.14)}
.gcard img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.75;transition:transform 1.2s var(--ease)}
@media (hover:hover){.gcard:hover img.bg{transform:scale(1.04)}}
.gcard .sh{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.2),rgba(0,0,0,.85))}
.gcard .body{position:absolute;left:28px;right:28px;bottom:26px}
.gcard .tag{display:inline-flex;align-items:center;gap:8px;font-family:var(--head);text-transform:uppercase;font-size:11px;letter-spacing:.1em;padding:6px 12px;border-radius:999px;border:1.5px solid rgba(255,255,255,.7);margin-bottom:14px}
.gcard .tag i{width:8px;height:8px;border-radius:50%;background:var(--dgreen);animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.5);opacity:.5}}
.gcard h3{font-family:var(--head);font-weight:400;letter-spacing:-0.02em;line-height:1.02;font-size:clamp(22px,2vw,28px)}
.gcard .amt{font-family:var(--head);font-size:clamp(32px,3.2vw,56px);letter-spacing:-0.02em;line-height:1.02;font-variant-numeric:tabular-nums}
.gcard p{font-size:15px;line-height:1.45;color:rgba(255,255,255,.88);margin-top:12px;max-width:52ch}
/* the two charities' "in aid of" lock-ups, transparent, big, top right (Nuo, 11 Sep) */
.gcard .logos{position:absolute;top:22px;right:22px;display:flex;gap:18px;align-items:flex-start;z-index:2}
.gcard .logos img{height:64px;width:auto}
.gcard .pill{margin-top:16px}
/* Dolly's face stays clear: text bottom-left, a small coin top-right (Nuo, 11 Sep) */
.gcard.pound img.bg{object-position:50% 20%}
.gcard.pound .body{right:28px}
.gcard.pound .body p{max-width:none}
.gcard.pound .coin{position:absolute;right:24px;top:24px;width:72px;height:72px;border-radius:50%;background:#f5d67a;color:#3b2a06;display:grid;place-items:center;font-family:var(--head);font-size:34px;letter-spacing:-0.05em;box-shadow:inset 0 0 0 5px #e0b94e,0 12px 26px rgba(0,0,0,.4);animation:coin 6s ease-in-out infinite}
@keyframes coin{0%,100%{transform:rotateY(0)}50%{transform:rotateY(180deg)}}
/* ink type on the pink: white 16px on #FF3CA0 measured 3.28:1, under the 4.5 for body text */
.lam{margin-top:22px;border-radius:20px;background:#FDF5F7;color:var(--ink);padding:40px 48px;display:grid;grid-template-columns:auto 1fr auto;gap:40px;align-items:center}   /* the Radio Lamington page's blush, not the hot pink (Nuo, 11 Sep 2026) */
.lam b{font-family:var(--head);font-weight:400;font-size:clamp(32px,3.2vw,56px);letter-spacing:-0.02em;line-height:1.02;font-variant-numeric:tabular-nums}
.lam p{font-size:16px;line-height:1.45}   /* fills its column; the 56ch cap left the middle of the card empty (Nuo, 11 Sep 2026) */
.lam .k{color:rgba(0,0,0,.7);margin-bottom:6px}
/* the figure and what it counts, on one baseline (Nuo, 14 Sep 2026). flex-wrap so the phrase drops under the
   number when the column is too narrow for both rather than forcing the card wider; the kicker takes a whole
   row of its own above them. */
.lam .fig{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 12px}
.lam .fig .k{flex:0 0 100%}
.lam .ctx{font-size:14px;line-height:1.25;color:rgba(0,0,0,.72);max-width:16ch}
/* .lam a.pill raspberry hover RETIRED 3 Oct 2026 (Nuo: every button black, blue on hover) */
.lam .rl{display:flex;flex-direction:column;align-items:center;gap:14px}
.lam .rl img{height:72px;width:auto;max-width:220px;object-fit:contain}
.past{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:22px}
.pcard{border-top:2px solid var(--ink);padding-top:14px}
.pcard .top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;min-height:44px;margin-bottom:6px}
.pcard h4{font-family:var(--head);font-weight:400;letter-spacing:-0.02em;font-size:18px;line-height:1}
.pcard p{font-size:14px;color:#2b2926;margin-top:8px}
.pcard .top img{height:44px;width:auto;max-width:150px;object-fit:contain;margin-top:-4px}   /* logo top right, text full width (Nuo, 11 Sep) */

/* ---- follow us (about-social.js, 11 Sep 2026; "Follow Along" until 13 Sep; feeds in the cards 13 Sep): the closing band ----
   Full-bleed black, one line of display type, then THREE CARDS in a row - Instagram, TikTok, LinkedIn - each with the
   platform's mark and name and a Follow pill in its top row, the handle under that in display type, and under the
   handle a SNAPSHOT OF THAT ACCOUNT'S FEED: pinned posts first, then the most recent. Instagram and TikTok draw a 3x2
   grid of 3:4 tiles - the shape of both profile grids (310x414 on instagram.com, measured 13 Sep 2026) - LinkedIn draws
   three post rows, because it is a text-led platform. Hover lifts a card and floods it with its ink (pink, blue,
   orange; the tiles stay photographic); hover a tile and it lifts, its clip plays, its caption slides up. On a desktop
   with motion allowed one tile per card is "live" at a time (.live, set by about.js): its clip plays, or its still
   pushes in slowly. Reduced-motion and touch get a still grid. The band runs straight into the black footer, which
   is the point: the page ends on black, on the handles.
   The merged mosaic that sat between the headline and the cards from 11 Sep (six columns, three parallax lanes,
   scroll-driven) went on 13 Sep 2026 - it never had posts, and Nuo chose per-platform feeds over it. */
.follow{background:#000;color:var(--sand);padding:110px var(--pad) 40px;margin-top:40px;overflow:hidden}
.follow .fhd{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;margin-bottom:44px}
.follow h2.big{font-size:clamp(48px,7vw,112px);letter-spacing:-0.035em;line-height:.95;margin:0;text-wrap:balance}
.follow .sub{max-width:40ch;font-size:clamp(15px,1.1vw,18px);line-height:1.5;color:rgba(242,236,233,.72);margin:0 0 10px;text-align:right}
/* THE CARDS (11 Sep 2026; three since 13 Sep - Instagram, TikTok, LinkedIn). Dark cards on the black; the top row is
   the platform's mark and name at the left and the Follow pill at the right (Nuo, 13 Sep: "move the follow button to
   the top right of each card"), the display line in display type under it, the feed under that. Hover lifts the card
   and floods it with the platform's ink - Instagram the brand's Neon Pink, TikTok its Neon Blue, LinkedIn the Neon
   Orange (Nuo, 13 Sep: the page's third accent, so the three cards take the three neons; not LinkedIn's own blue,
   which is TikTok's here). The card was one <a> until the feed arrived; a link cannot hold links, so it is a <div>
   and .top and .h are the links to the account.
   THE EMPTY SPACE (Nuo, 13 Sep: "don't have so much empty space below the words instagram, tiktok and linkedin") was
   min-height:240px with the handle pushed to the floor by margin-top:auto. The feed fills it now; a card WITHOUT a
   feed (no .has-feed) keeps the old shape, so the LinkedIn card holds until its posts land.
   THE DISPLAY LINE IS SIZED FOR A THIRD-WIDTH TILE. "@daisygreencollection" measures 10.2x its font-size in Graphik
   Medium (canvas measureText, 13 Sep 2026; Arial, the last fallback, is 3% wider). A third-width tile's inner width
   is (viewport - 127) / 3 - 56: 382px at 1440, 269px at 1101. At the old clamp(28px,3.4vw,56px) the line needed
   500px at 1440 and `word-break:break-all` cut it mid-word. 2.2vw x 10.2 = 22.4% of the viewport: 323px at 1440,
   247px at 1101 (254 in Arial) - fits with 22px to spare at the narrowest three-column width. Under 1100 the tiles
   stack (one column) rather than squeeze - measured in a same-origin iframe at 1440, 1101, 1024, 900 and 390.
   `overflow-wrap:anywhere` is the safety net, not the plan.
   THE PILL IN THE TOP ROW IS ONE STEP SMALLER than the page's .pill (12px 20px, 14px = 48px tall): 9px 16px at 13px
   is 41px tall and 85px wide. It was set that way on 13 Sep 2026 so that 48px did not read as the card's subject
   beside 12px caps and an 18px mark. THE MARK AND THE CAPS GREW ON 15 SEP AND THE PILL DELIBERATELY DID NOT (Nuo,
   15 Sep 2026: "make the instagram, tiktok and linkedin logos and titles larger", pill left at 41px when asked) - so
   the pill is now MORE subordinate than the 13 Sep note describes, which is the intent and not drift. Do not "restore
   the balance" by growing it back: the headroom below is what pays for the larger mark. */
.follow .ftiles{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:16px;align-items:stretch}
/* THE REVEAL STAGGER RIDES ON `transform` AND THE HOVER LIFT ON `translate`. A transition-delay on the element would
   delay the hover too (a delay applies to every transitioned property), so the reveal's opacity/transform carry the
   --d delay and the lift is the separate `translate` property, which composes with the transform and has its own
   timing - the same individual-transform-property rule the rest of the prototype uses. */
.follow .ftile{position:relative;display:flex;flex-direction:column;gap:14px;min-height:240px;padding:26px 28px 28px;border-radius:18px;background:#161412;color:var(--sand);text-decoration:none;overflow:hidden;transition:opacity .7s var(--ease) var(--d,0s),transform .7s var(--ease) var(--d,0s),translate .5s var(--ease),background .5s var(--ease),box-shadow .5s var(--ease)}
.follow .ftile .top{display:flex;justify-content:space-between;align-items:center;gap:12px;color:inherit;text-decoration:none}
.follow .ftile .k{display:inline-flex;align-items:center;gap:10px;color:var(--sand);opacity:.75;font-family:var(--head);text-transform:uppercase;font-size:15px;letter-spacing:.14em;transition:opacity .3s}
/* the mark: footer.js's .dgi (15px, opacity .8) - larger here beside the caps, full ink, and NO invert: the
   artwork is white and this ground is black (footer.js inverts it only on the sand).
   24px AND 15px SINCE 15 SEP 2026, from 18px and 12px, on Nuo's instruction. What the size is bounded by is the TOP
   ROW AT 1101px, the narrowest three-column width, where a card's inner width is (1101-127)/3-56 = 269px: mark 24 +
   gap 10 + "INSTAGRAM" at 15px/.14em (~103px) + the row's 12px gap + the 85px pill = ~234px, 35px spare. At 28/17 it
   is ~251px and there is nothing left; that is the ceiling, and it is why the pill must not grow with them.
   The marks are 128px PNGs (social-tiktok.png 113x128, hence object-fit:contain on a square box - TikTok's mark draws
   ~21px wide at 24px tall, by design), so 24px is a 5.3x source and cannot go soft. */
.follow .ftile .ico{display:inline-flex;align-items:center;flex:0 0 auto}
.follow .ftile .ico:empty{display:none}
.follow .ftile .ico .dgi{width:24px;height:24px;opacity:1;filter:none}
.follow .ftile .h{display:block;font-size:clamp(22px,2.2vw,40px);letter-spacing:-0.035em;line-height:.95;overflow-wrap:anywhere;margin-top:auto;color:inherit;text-decoration:none}
.follow .ftile.has-feed .h{margin-top:6px;margin-bottom:6px}
.follow .ftile .go{display:block;flex:0 0 auto}
.follow .ftile .pill.light{padding:9px 16px;font-size:13px;border-color:rgba(242,236,233,.55);color:var(--sand);transition:background .3s,color .3s,border-color .3s}
@media (hover:hover){.follow .ftile:hover{translate:0 -6px;box-shadow:0 30px 60px rgba(0,0,0,.55)}
.follow .ftile.instagram:hover{background:var(--pink)}
.follow .ftile.tiktok:hover{background:var(--blue)}
.follow .ftile.linkedin:hover{background:var(--orange)}
.follow .ftile:hover .k{opacity:1}
.follow .ftile:hover .pill.light{background:var(--sand);color:#000;border-color:var(--sand)}}
.follow .ftile .top:focus-visible,.follow .ftile .h:focus-visible{outline:3px solid var(--sand);outline-offset:3px;border-radius:6px}
/* THE FEED. The grid: three across, 3:4 tiles, an 8px gutter - at 1920 a tile is ~177px wide, at 1101 (the narrowest
   three-column width) ~86px, which is why the cards stack under 1100 and the grid becomes one row of six there. The
   tile is the picture (or the clip's poster) filling its box, radiused a step under the card; a pin marker top-left
   when pinned and the kind's glyph top-right (a clip, stacked squares) - as the platforms draw their own grids, so the
   snapshot reads as the feed and not as a gallery. Hover: the tile lifts, the picture pushes in, a gradient and the
   caption rise from the foot. .live is the ambient state set by about.js: the same push-in, slowly, and the clip
   playing. .nomedia is a tile whose export has not landed: the caption on the dark ground, always visible. */
.follow .feed{margin-top:auto}
.follow .feed.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.follow .post{position:relative;display:block;aspect-ratio:3/4;border-radius:10px;overflow:hidden;background:#221f1c;color:var(--sand);text-decoration:none;transition:opacity .6s var(--ease) var(--d,0s),transform .6s var(--ease) var(--d,0s),translate .4s var(--ease),box-shadow .5s var(--ease)}
.follow .post .media{position:absolute;inset:0;display:block}
.follow .post .media img,.follow .post .media video{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.001);transition:transform 1s var(--ease)}
@media (hover:hover){.follow .post:hover .media img,.follow .post:hover .media video,.follow .post:focus-visible .media img,.follow .post:focus-visible .media video{transform:scale(1.08)}}
.follow .post.live .media img{transform:scale(1.09);transition:transform 4.6s linear}
.follow .post.live .media video{transform:scale(1.03);transition:transform 1.4s var(--ease)}
.follow .post::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 40%,rgba(0,0,0,.72) 100%);opacity:0;transition:opacity .4s}
.follow .post.nomedia::after{opacity:1}@media (hover:hover){.follow .post:hover::after,.follow .post:focus-visible::after{opacity:1}
.follow .post:hover,.follow .post:focus-visible{translate:0 -4px;box-shadow:0 18px 40px rgba(0,0,0,.55);z-index:2}}
.follow .post:focus-visible{outline:3px solid var(--sand);outline-offset:2px}
.follow .post .pin,.follow .lpost .pin{position:absolute;top:8px;left:8px;z-index:1;display:inline-flex;align-items:center;gap:4px;padding:4px 7px 4px 5px;border-radius:999px;background:rgba(0,0,0,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);font-family:var(--head);font-weight:500;text-transform:uppercase;font-size:10px;letter-spacing:.1em;line-height:1;color:var(--sand)}
.follow .post .pin svg,.follow .lpost .pin svg{width:11px;height:11px;fill:currentColor;display:block}
.follow .post .kind{position:absolute;top:8px;right:8px;z-index:1;width:22px;height:22px;display:inline-flex;align-items:center;justify-content:center;color:var(--sand);filter:drop-shadow(0 1px 3px rgba(0,0,0,.6))}
.follow .post .kind svg{width:14px;height:14px;fill:currentColor;display:block}
.follow .post .cap{position:absolute;left:10px;right:10px;bottom:9px;z-index:1;display:flex;flex-direction:column;gap:3px;transform:translateY(8px);opacity:0;transition:opacity .35s var(--ease),transform .45s var(--ease)}
@media (hover:hover){.follow .post:hover .cap,.follow .post:focus-visible .cap{opacity:1;transform:none}}
.follow .post .t{font-family:var(--head);font-weight:400;letter-spacing:-0.01em;font-size:13px;line-height:1.25;text-wrap:pretty;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
/* no picture yet: the caption stands in, in the tile's own type; the gradient stays on so it reads as a card */
.follow .post.nomedia .media{display:none}
.follow .post.nomedia{background:#1d1a17 radial-gradient(120% 90% at 100% 0%,rgba(242,236,233,.08),rgba(242,236,233,0) 60%)}
.follow .post.nomedia .cap{opacity:1;transform:none}
.follow .post.nomedia .t{-webkit-line-clamp:4}
/* THE LINKEDIN ROWS: the picture at the left (4:3), the post's opening line at the right, an arrow that steps in on
   hover; hairlines between rows. A row without a picture drops its media box and lets the text take the width.

   THE ROWS ARE EXACTLY AS TALL AS THE GRID BESIDE THEM, BY CONSTRUCTION (Nuo, 13 Sep 2026: "make sure the 3 LinkedIn
   posts have the same height as the 6 preview cards ... so there is no empty space"). Three attempts, and only this
   one cannot drift: (1) margin-top:auto put 634px of black under the handle; (2) flex:1 rows filled the card - until
   the rows' own content grew taller than the grid and the spare height moved to the Instagram and TikTok cards, which
   is the screenshot he sent. A flex item's CONTENT still sets the card's height whatever its flex-basis, so no flex
   rule can stop the LinkedIn column being the tallest. What can: in the three-column layout the rows list (.rin) is
   ABSOLUTE inside the feed box, so it contributes NOTHING to the card's intrinsic height. The grid cards are then the
   only thing sizing the row of three, the LinkedIn card stretches to them, and the absolute list fills exactly that
   space: three equal rows (flex:1 1 0), the photograph as tall as its row (height:100%, width from the 4:3 ratio - a
   flex row with a definite height, which is why the row is a flex row and not a grid), the text clamped to three
   lines, two under 1400px where a row is ~80-100px. Under 1100 the cards stack and size to their content, so the
   list goes back into flow and the thumbnail back to a fixed width. */
.follow .feed.rows .rin{display:flex;flex-direction:column;border-top:1px solid rgba(242,236,233,.14)}
.follow .lpost{position:relative;display:flex;align-items:center;gap:14px;padding:12px 0;border-bottom:1px solid rgba(242,236,233,.14);color:inherit;text-decoration:none;transition:opacity .6s var(--ease) var(--d,0s),transform .6s var(--ease) var(--d,0s),border-color .4s}
.follow .lpost .media{position:relative;display:block;flex:0 0 auto;width:min(36%,220px);aspect-ratio:4/3;border-radius:8px;overflow:hidden;background:#221f1c}
@media (min-width:1101px){
  .follow .ftile .feed.rows{position:relative;flex:1 1 0;min-height:0}
  .follow .feed.rows .rin{position:absolute;inset:0}
  .follow .lpost{flex:1 1 0;min-height:0;overflow:hidden}
  .follow .lpost .media{height:100%;width:auto;max-width:45%}
}
@media (max-width:1400px) and (min-width:1101px){.follow .lpost{padding:10px 0;gap:12px}.follow .lpost .t{-webkit-line-clamp:2;font-size:14px}}
.follow .lpost .media img,.follow .lpost .media video{width:100%;height:100%;object-fit:cover;display:block;transition:transform .9s var(--ease)}
@media (hover:hover){.follow .lpost:hover .media img{transform:scale(1.06)}}
.follow .lpost .media .kind{position:absolute;right:6px;bottom:6px;width:20px;height:20px;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;background:rgba(0,0,0,.55);color:var(--sand)}
.follow .lpost .media .kind svg{width:11px;height:11px;fill:currentColor;display:block}
.follow .lpost .txt{display:flex;flex-direction:column;gap:6px;min-width:0;flex:1 1 auto}
.follow .lpost .meta{display:flex;align-items:center;gap:6px 10px;min-width:0}
.follow .lpost .pin{position:static;background:rgba(242,236,233,.12);backdrop-filter:none;-webkit-backdrop-filter:none}
/* a repost: "Reposted from <author>", as LinkedIn labels a share - small caps, muted, beside the pin */
.follow .lpost .rp{font-family:var(--head);text-transform:uppercase;font-size:10px;letter-spacing:.1em;line-height:1.3;color:rgba(242,236,233,.6);min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (hover:hover){.follow .ftile:hover .lpost .rp{color:rgba(242,236,233,.85)}}
.follow .lpost .t{font-family:var(--head);font-weight:400;font-size:15px;line-height:1.35;letter-spacing:-0.01em;text-wrap:pretty;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;color:rgba(242,236,233,.92)}
.follow .lpost .go{flex:0 0 auto;font-size:18px;line-height:1;opacity:.5;transform:translateX(-4px);transition:opacity .3s,transform .4s var(--ease)}
@media (hover:hover){.follow .lpost:hover .go,.follow .lpost:focus-visible .go{opacity:1;transform:none}}
.follow .lpost:focus-visible{outline:3px solid var(--sand);outline-offset:2px;border-radius:8px}
.follow .lpost.nomedia .media{display:none}
.follow .lpost.nomedia .t{font-size:clamp(17px,1.15vw,21px);line-height:1.25;-webkit-line-clamp:3}   /* no picture (a repost, or an export not yet landed): the line carries the row */
/* on the flooded card the hairlines go dark so they still read against the ink */
@media (hover:hover){.follow .ftile:hover .feed.rows .rin,.follow .ftile:hover .lpost{border-color:rgba(0,0,0,.18)}
.follow .ftile:hover .lpost .t{color:var(--sand)}}
/* the post dialog: the platform's own embed, made on open and removed on close. Sized for Instagram's 540px card;
   TikTok's is narrower and centres. */
dialog#post{position:fixed;inset:0;margin:auto;border:0;padding:0;border-radius:16px;width:min(600px,94vw);max-height:92vh;max-height:92dvh;overflow:hidden;background:#000;color:var(--sand);box-shadow:0 30px 80px rgba(0,0,0,.5)}
dialog#post::backdrop{background:rgba(0,0,0,.72)}
dialog#post .hd{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;border-bottom:1px solid rgba(242,236,233,.14)}
dialog#post .hd b{font-family:var(--head);font-weight:500;text-transform:uppercase;font-size:12px;letter-spacing:.12em;opacity:.8}
dialog#post .acts{display:flex;align-items:center;gap:8px}
dialog#post .pill.light{border-color:rgba(242,236,233,.5);color:var(--sand);padding:7px 14px;font-size:12px}
dialog#post .x{border:0;background:transparent;font-size:24px;line-height:1;padding:4px 8px;cursor:pointer;color:inherit}
dialog#post .frame{height:min(760px,78vh);height:min(760px,78dvh);background:#000}
dialog#post .frame iframe{width:100%;height:100%;border:0;display:block;background:#000}

/* ---- press (11 Sep 2026): the outlets' own words, gathered in the seventh chapter ----
   .pq is one attributed line - a blockquote that is a link to its entry on /press/, the outlet and year as a small
   caps caption - in Solina at the letter's size, never caps, never a logo (a publication's wordmark is its trademark).
   The Press chapter puts up to six of them in three columns and nothing else: the awards line (.paw) that sat under
   them until 13 Sep 2026 became a row of cards for a few hours and then moved to the home page (Nuo); the woven quote
   at the foot of Who we are, Art and Charity went the same morning. Quietly Confident: the outlets speak, the heading
   is one word. */
.pq{margin:0;padding:22px 0 0;border-top:1px solid rgba(0,0,0,.14);max-width:60ch}
.pq blockquote{margin:0;font-size:clamp(19px,1.5vw,23px);line-height:1.3;letter-spacing:-0.01em;text-wrap:pretty;hyphens:auto;-webkit-hyphens:auto}
.pq blockquote a{color:var(--ink);transition:color .2s}@media (hover:hover){.pq blockquote a:hover{color:var(--blue)}}
.pq figcaption{margin-top:10px;font-family:var(--head);text-transform:uppercase;font-size:11px;letter-spacing:.08em;color:#3f3c39}
.pr{padding:100px var(--pad) 90px;border-top:1px solid rgba(0,0,0,.1)}
.pr .pqs{display:grid;grid-template-columns:repeat(3,1fr);gap:28px 40px}
.pr .pqs .pq{max-width:none}

/* the footer's rules live in footer.js only (11 Sep 2026) - a per-page copy sat here and in four other stylesheets */

@media (max-width:1100px){.wall{grid-template-columns:repeat(4,1fr);grid-auto-rows:160px}.tl .stops{grid-template-columns:repeat(4,1fr);row-gap:40px}.tl .line{display:none}
  /* the three cards stack under 1100: a third-width tile is under 260px inside here and the handle no longer fits on one
     line. A stacked card is full width, so its six tiles go in ONE ROW of six (~150px each at 1024) rather than a 3x2
     grid of ~300px tiles that would make each card 700px tall. */
  .follow .ftiles{grid-template-columns:1fr}.follow .ftile{min-height:170px}.follow .ftile .h{font-size:clamp(26px,3.4vw,36px)}
  .follow .feed.grid{grid-template-columns:repeat(6,1fr)}}
@media (max-width:860px){
  :root{--nav:60px;--pad:20px}body{font-size:16px}   /* one step down the scale on a phone */
  .nav ul{display:none}.nav .book{padding:10px 16px;font-size:13px}
  .chapters{display:none}                                                  /* the floating chapter pills hide too much of a phone (Nuo, 10 Sep) */
  .hero{min-height:560px}.hero .row{flex-direction:column;align-items:flex-start}
  .who{grid-template-columns:1fr;gap:28px;padding:64px var(--pad) 48px}.who .letter p{font-size:16px}
  .tl .d,.gcard p,.lam p,.pcard p,.drawer p,.scard .d{font-size:14px}     /* justified type one size down on a phone */
  .nums{grid-template-columns:1fr 1fr;padding-bottom:64px}
  .story{padding:64px var(--pad) 72px}
  .flipbook{aspect-ratio:3/4.2}.flipbook.scroll{max-height:80dvh}
  .stage .arrow{width:40px;height:40px}.stage .arrow.prev{left:-4px}.stage .arrow.next{right:-4px}
  .tl{padding:64px var(--pad) 48px}.tl .stops{grid-template-columns:1fr 1fr;row-gap:28px}
  .art{padding:64px var(--pad) 72px}.wall{grid-template-columns:repeat(2,1fr);grid-auto-rows:120px;gap:8px}.frame.big{grid-column:span 2;grid-row:span 2}.frame.wide{grid-column:span 2;grid-row:span 1}.frame.tall{grid-row:span 2}
  .frame figcaption{opacity:1;transform:none;font-size:11px;letter-spacing:.03em;flex-direction:column;gap:2px}   /* artist and room are names: the 11px floor (was 9) */
  .frame figcaption span{white-space:normal}
  .names{font-size:20px;text-align-last:justify}.peek{display:none}       /* the last line spreads too (Nuo, 11 Sep 2026) */
  .aname{display:inline-block;padding:6px 0}                                 /* a 14px inline name was a 16px tap box */
  .src{padding:64px var(--pad) 48px}
  /* one supplier a row: two 169x127px cards could not hold a 20px name, six lines of description and the pill */
  .sup{grid-template-columns:1fr;gap:12px}.scard{aspect-ratio:16/10}.scard .d{max-height:none}
  /* B CORP CARD, PHONE (Nuo, 14 Sep 2026, third pass - this is the one). Three rows:
         big   big      the headline across the whole card
         small bc       the small print at full width minus the mark
         act   bc       the link in the card's bottom-left corner
     The mark spans the last two rows, so its height is the small print PLUS the link and it reads as the anchor of
     that corner rather than as a stamp floating beside a paragraph.
     Pass one put the mark beside both paragraphs and squeezed the headline to six lines; pass two freed the
     headline but left the mark small. Both are his calls and both were measured; the heights are in the handover.

     TWO MECHANICS THAT ARE NOT OBVIOUS AND WILL BREAK IF EDITED CASUALLY:
     - `.bc{display:contents}` dissolves the wrapper so the mark and the link become grid items in their own right.
       Without it they are one item and cannot sit in two different corners - and the alternative, splitting them
       in the markup, would force the desktop layout to be rebuilt as well. .bc carries no background or border,
       so it loses nothing by not generating a box.
     - THE MARK IS SIZED BY WIDTH AND ANCHORED TO THE BOTTOM, NOT STRETCHED. align-self:stretch with height:100%
       was tried first and the mark came out 172px against a text-plus-pill height of 142: a grid item's automatic
       minimum is its min-content size, and for an <img> that is the file's own height, so a mark spanning two auto
       rows inflates those rows rather than shrinking into them - min-height:0 removes the automatic minimum but
       the intrinsic contribution still sizes the span. A width instead makes the height fall out of the aspect
       ratio and leaves the rows to the text, which is what "fit the height of the small text plus the button"
       actually means. 92px of width is ~144px of height against the 142px the text and pill set. */
  .pledge{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"big big" "small bc" "act bc";gap:12px 16px;align-items:start;padding:24px;border-radius:18px}
  .pledge .big{white-space:normal;font-size:21px;line-height:1.12}
  .pledge .small{white-space:normal;font-size:13.5px;margin-top:0;line-height:1.4}
  .pledge .bc{display:contents}
  /* bottom-right corner of the card (Nuo, 14 Sep 2026). width:min(92px,26vw) and NO percentage max-width: a
     percentage here resolves against the auto-sized `bc` track, which is itself sized from this item, and the
     circularity collapsed the mark to 29px wide. vw has no such dependency. */
  .pledge .bc img{grid-area:bc;align-self:end;justify-self:end;width:min(92px,26vw);height:auto}
  .pledge .bc a.pill{grid-area:act;justify-self:start;align-self:end;padding:9px 14px;font-size:12.5px;white-space:nowrap}
  .pcard .top img{height:36px;max-width:100px}
  .gg{grid-template-columns:1fr}.gcard{min-height:400px}.gcard.pound .body{right:20px}.gcard.pound .coin{width:56px;height:56px;font-size:26px}
  .gcard .logos img{height:40px}                                             /* two 64px lock-ups plus the copy overran a 360px card */
  .lam{grid-template-columns:1fr;gap:16px;padding:28px}
  /* PHONE (Nuo, 14 Sep 2026): the logo in the bottom-left corner of the card and the link in the bottom-right,
     instead of the centred column stack - it is the last row of the card, so the two sit on the card's own
     bottom edge and the card loses a row of height. */
  .lam .rl{flex-direction:row;justify-content:space-between;align-items:center;gap:12px}
  .lam .rl img{height:52px;max-width:150px}
  .lam .ctx{font-size:13px;max-width:15ch}
  .past{grid-template-columns:1fr}
  .tl .track.scroll .stops{grid-auto-columns:200px}                          /* a 200px stop on a 390px screen: two in view, the third peeking */
  .pq blockquote{font-size:18px}
  .pr{padding:64px var(--pad) 48px}.pr .pqs{grid-template-columns:1fr;gap:20px}
  .nums .num b{font-size:clamp(30px,9vw,40px)}                               /* "~100,000" at 40px is wider than a 163px column */
  /* follow us on a phone: the headline stacked over its line, the cards one column */
  .follow{padding:64px var(--pad) 32px;margin-top:24px}.follow .fhd{flex-direction:column;align-items:flex-start;gap:12px;margin-bottom:24px}
  .follow h2.big{font-size:clamp(40px,13vw,56px)}.follow .sub{text-align:left;font-size:15px}
  /* the cards on a phone, one column: the handle must fit the tile's inner width (390 - 2x20 pad - 2x20 tile padding = 310px) on one
     line. 7vw at 390 = 27.3px -> 279px in Graphik, 288 in Arial; the old 8vw was 31.2px -> 319px, over the tile. Measured 13 Sep 2026. */
  .follow .ftiles{grid-template-columns:1fr;gap:12px}.follow .ftile{min-height:150px;padding:20px 20px 22px;border-radius:14px}.follow .ftile .h{font-size:clamp(22px,7vw,30px)}
  /* the feed on a phone: back to 3x2 - the 310px inner width gives ~99x132px tiles, an Instagram phone grid's size - and
     NO captions: a hover caption on a 99px tile would be three words over a picture, and a tap opens the real post.
     .nomedia keeps its caption (it is the whole tile). */
  .follow .feed.grid{grid-template-columns:repeat(3,1fr);gap:6px}.follow .post{border-radius:8px}
  .follow .post .pin{top:6px;left:6px;padding:3px 6px 3px 4px}.follow .post .kind{top:5px;right:5px}
  .follow .lpost{gap:12px;padding:10px 0}.follow .lpost .media{width:80px}.follow .lpost .t{font-size:13px}
  dialog#post{width:100vw;max-width:100vw;border-radius:16px 16px 0 0;margin:auto 0 0}dialog#post .frame{height:min(720px,80dvh)}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .hero img.bg,.hero h1 .l span,.hero .cue,.gcard .tag i,.gcard.pound .coin,.who .fl{animation:none}
  .hero h1 .l span{transform:none}
  .reveal,.frame{opacity:1;transform:none;transition:none}
  .tl .line i,.tl .stop{transition:none}
  /* the feed: no push-in, no lift; about.js also never sets .live under this preference */
  .follow .post .media img,.follow .post .media video,.follow .lpost .media img{transition:none;transform:none}
  .follow .post:hover,.follow .ftile:hover{translate:none}
}

/* == PRUE PASS 23 SEP 2026 == - the shared rules that every first-parse stylesheet carries (the same text in each; the
   harness audit_prototype_caps.js asserts the marker is in at least one first-parse sheet of every page).
   1. ALL CAPS HEADINGS. Prue, 22 Sep 2026: "I like the capital font a lot more than the other font... wherever we can
      get more caps"; "I reckon all this should be caps". REVERSES the 11 Sep Title Case decision (page.css TYPE note:
      "dense caps everywhere is the strongest corporate-chain signal"). Her judgement, recorded with the argument it
      overruled in _Supporting/docs/2026-09-23-prototype-prue-tom-pass.md. Typed copy stays Title Case and the
      transform sets the caps (brand-voice rule 9). Body, buttons, table headers, tile taglines are untouched; the
      expander labels (Menu, What's On, FAQ) are headings and take it. Tracking -0.03em between the deck's print -7%
      and the old -0.02em; per-element rules with more specificity keep their own.
   2. BOOK IS A BUTTON, NOT A CAPSULE. Prue, 22 Sep: "book a table... it's too circular"; "maybe this can just be
      Book". Label "Book" everywhere; 8px corners on the Book controls only - the deck's web button (slide 79) is
      still a pill and every other pill keeps its 999px.
   3. GREEN PAGES LINK. Nuo, 23 Sep, twice. First "something more visible like pastel green", built as dark green text on
      a Dust Green band; then, on seeing it: "do not show link to green pages like this! Make it look the same as other
      links, only when the mouse hovers over it the font should become pastel green". So: AT REST IDENTICAL to its
      neighbours; ON HOVER (and keyboard focus) the text and the underline bar go Dust Green #C3E1CC. Dust Green as text
      on the solid Sandstone bar is 1.2:1 - his ruling, for a transient hover state, recorded. The footer and the phone
      drawer do the same (footer.js). The nav's per-link bar colour is inline (DG_NAVBAR), so the ::after rule below
      carries an attribute selector to outrank it.
   4. ACCENT SWITCH - RETIRED 12 Oct 2026 (Nuo, audit decision 12). The ?accent=blue|neon|dark trial of 23 Sep and its
      html[data-accent] rules are gone; no pick was recorded, so every page keeps the accent its own sheet sets. */
h1,h2,h3,.caps,.xp>summary h2,.xp>summary h3{text-transform:uppercase}
h1,h2,h3,.caps{letter-spacing:-0.03em}
.nav .book,button.book,.card .bk:not(.walk),.mapcard .mcbk,.pill[data-book]{border-radius:8px}
.nav ul li a[href*="green-pages"]:hover,.nav ul li a[href*="green-pages"]:focus-visible{color:#C3E1CC}
.nav ul li a[href*="green-pages"]::after{background:#C3E1CC}
/* 5. PASTEL SURFACES - BUILT AND REVERTED THE SAME AFTERNOON (23 Sep 2026). Section grounds in Dust Green / Dust Blue / Dust
      Orange / Dust Pink / Peggy Jean Green went on the home page and five section pages at 15:00; Nuo, on the live page: "I
      fucking hate the pastel background colours here! revert back to the same background colour for the entire page!" So:
      one ground, Sandstone, everywhere. The idea is Prue's liking for the pastel range; if it comes back it is a per-page
      class and a rule here, not a redesign. */

/* == E9 ONE BUTTON (Nuo, 24 Sep 2026, elegance pass) == every button in copy on the prototype is the same object: outline,
   8px corners, 13px caps in the head face, a 1.5px rule, no fill. Colour is the context's through currentColor (ink on
   Sandstone, white on a photograph); the tinted and filled variants (.fill .blue .sand .light) lose their tint. Floating
   chrome - the Map fab, dialog close buttons, the tour's Close - is not a button in copy and keeps its shape. The same
   text sits in every first-parse stylesheet, cards.css and collection.css; audit_prototype_caps.js checks each carries it. */
.pill,.nav .book,button.book,.card .bk:not(.walk),.mapcard .mcbk,.place .go,.place .bk,.ev .go,.enq .chips button,.chips button,.guide button,.railnav button{border-radius:8px;font-family:var(--head);font-size:13px;letter-spacing:.06em;text-transform:uppercase;font-weight:400;border-width:1.5px;border-style:solid;background:transparent;box-shadow:none}
.pill.fill,.pill.blue,.pill.sand,.pill.light,.pill.dark,.nav .book,.card .bk:not(.walk),.place .go,.place .bk{color:inherit;border-color:currentColor;background:transparent}
.nav .book{color:#fff;border-color:currentColor}.nav.solid .book{color:var(--ink,#000);border-color:currentColor}   /* the bar's Book: white over a photograph, ink on the Sandstone bar - the one place inherit is wrong (the bar's own colour is ink while its links are white) */
@media (hover:hover){.pill:hover,.nav .book:hover,.card .bk:not(.walk):hover{background:transparent;color:inherit;border-color:currentColor;opacity:.7}}
/* == BUTTONS: BLACK, BLUE ON HOVER 3 OCT 2026 == Nuo: "on all the pages, make all the buttons show as black font with black border, turn
   them blue when the mouse hovers over them; except the art page on black: white, neon green on hover; and the christmas page on
   black: white, neon orange on hover". REVERSES the 2 Oct orange-accent block (kept above as the record). Shape, size, caps and no
   fill stand (E9). Light ground: ink rule and label; on hover Neon Orange #F36F23 (Nuo, 3 Oct 2026, 11:45 - was Neon Blue from that morning). A button over a photograph, on a card or on a dark
   bar stays white. art.css and christmas.css set --btn / --btn-hover on body for their black grounds. */
body .pill:not(.light),body .pill.fill,body .pill.blue,body .pill.dark,body .panel.dg .pill,body button.book,body .nav.solid .book,body .mapcard .mcbk,body .ev .go,body .enq .chips button,body .chips button,body .guide button,body .railnav button,body .cats .mchip,body .cats .cpill:not(.here){color:var(--btn,#000);border-color:var(--btn,#000)}   /* `body` prefix: out-ranks a page's own two-class pill rules (About's .pledge .bc a.pill, .lam a.pill) so one rule holds everywhere */
.nav:not(.solid) .book,.place .go,.place .bk,.hero .pill,.card .bk:not(.walk),.pill.light{color:#fff;border-color:currentColor}
@media (hover:hover){body .pill:hover,body .nav.solid .book:hover,body button.book:hover,body .cats .mchip:hover,body .cats .cpill:not(.here):hover,body .gbtn:hover{color:var(--btn-hover,#F36F23);border-color:var(--btn-hover,#F36F23);opacity:1;background:transparent}
.nav:not(.solid) .book:hover,.place .go:hover,.place .bk:hover,.hero .pill:hover,.card .bk:not(.walk):hover,.pill.light:hover{color:var(--btn-hover,#F36F23);border-color:var(--btn-hover,#F36F23)}}
/* == SOCIAL HANDLES 27 SEP 2026 == Nuo: "REDUCE FONT SIZE for the socials handles, never let them display over more than 1 line,
   both on desktop and mobile!" One line, never wrapped: 1/16 of the card's width (the 21 characters of @DAISYGREENCOLLECTION
   are ~14.2em in Graphik caps, so 16 leaves ~11% for the real face), capped at 28px - it was 40px on a wide screen. Last in the
   file so it beats the two phone rules above. about.js fitHandles() shrinks all three together if the device still overflows. */
.follow .ftile{container-type:inline-size}
.follow .ftile .h{font-size:min(28px,calc(100cqi / 16));white-space:nowrap;overflow-wrap:normal;letter-spacing:-0.02em}
/* the Radio Lamington band takes that page's lighter blush (#FDF5F7, 27 Sep 2026; was #F9E1E7) */

/* == THE TAGLINE 30 SEP 2026 == index.html's .hero .hline, the same rules (about.js has the ruling). */
.hero .hline{position:absolute;left:var(--pad);right:var(--pad);bottom:64px;z-index:3;margin:0;text-align:center;font-family:var(--head);font-weight:400;text-transform:uppercase;font-size:clamp(18px,1.6vw,24px);letter-spacing:.06em;line-height:1.3;color:#fff;text-wrap:balance}
.hero .hline .tg-w{white-space:nowrap}
.hero .hline.tg-arm .tg-l{opacity:0}
.hero .hline.tg-in .tg-l{animation:tgIn .5s ease var(--d) backwards}
@keyframes tgIn{from{opacity:0}to{opacity:1}}
/* (the tagline's colour wave and its halo were deleted 12 Oct 2026 - Prue does not like the glow; the letters still arrive white) */
@media (max-width:860px){.hero .hline{bottom:56px;font-size:18px;letter-spacing:.04em}}


/* == LESS BLACK 1 OCT 2026 == Prue, 30 Sep 2026: "the big black sections ... could be more like sandstone and white or a creamy
   colour and white so it looks less heavy"; "keep the footer black". Nuo, 1 Oct. The photobook sits on white, the follow band on
   the page's sandstone; their type turns to ink. The footer is not touched. */
.story{background:#fff;color:var(--ink)}
.story .hd p,.story .k,.stage .bar{color:#3f3c39}
.stage .arrow{border-color:rgba(0,0,0,.45);background:rgba(0,0,0,.03);color:var(--ink)}
@media (hover:hover){.stage .arrow:hover{background:rgba(0,0,0,.08)}}
.follow{background:var(--sand);color:var(--ink)}
.follow .sub{color:#3f3c39}
.follow .ftile{background:#fff;color:var(--ink)}
.follow .ftile .k{color:var(--ink)}
.follow .ftile .ico .dgi{filter:invert(1)}   /* the marks are white artwork; on white they take ink (footer.js's own rule on the sand) */
.follow .ftile .pill.light{border-color:var(--ink);color:var(--ink)}
@media (hover:hover){.follow .ftile:hover{color:var(--sand);box-shadow:0 30px 60px rgba(0,0,0,.18)}
.follow .ftile:hover .k,.follow .ftile:hover .pill.light{color:var(--sand);border-color:rgba(242,236,233,.7);background:transparent}   /* FOLLOW on a hovered neon tile: Sandstone outline and text, no fill (Nuo, 2 Oct 2026: "fix the follow button ... when mouse hovers" - line 341 filled it Sandstone and this line coloured the text Sandstone: a white box with no words) */
.follow .ftile:hover .ico .dgi{filter:none}}
/* LINKEDIN'S ROWS ON THE WHITE TILE (Nuo, 2 Oct 2026: "text in linkedin cards are not visible on light background!!!"). The row
   rules above were written for the black tile - Sandstone text at .6, Sandstone hairlines - and the 2 Oct light tile kept them.
   At rest the text is ink and the rules dark; on the hovered orange tile they turn Sandstone as before. */
.follow .lpost .t{color:var(--ink)}
.follow .lpost .rp{color:#5a5754}
.follow .lpost .go{color:var(--ink)}
.follow .feed.rows .rin,.follow .lpost{border-color:rgba(0,0,0,.12)}
.follow .lpost .pin{background:rgba(0,0,0,.08);color:var(--ink)}
@media (hover:hover){.follow .ftile:hover .lpost .t,.follow .ftile:hover .lpost .go,.follow .ftile:hover .lpost .pin{color:var(--sand)}.follow .ftile:hover .lpost .rp{color:rgba(242,236,233,.85)}.follow .ftile:hover .lpost .pin{background:rgba(0,0,0,.25)}}
/* SIX SUPPLIERS ON ONE LINE (Nuo, 2 Oct 2026: "show these 6 cards side by side on one line") from 1101px; three across below it,
   one on a phone (the rules above). */
@media (min-width:1101px){.sup{grid-template-columns:repeat(6,1fr);gap:16px}}
/* SIX ACROSS, ONE LINE EACH (Nuo, 2 Oct 2026: "reduce font size of the text inside these 6 cards, the text need to fit on one line
   only"). At six across a card is ~273px at 1800 and ~210px at 1440; "Fruit and Vegetables" is the widest tag and "The Roasting
   Party" the widest name. The name is sized to the CARD with a container query (cards.css's fitQuals pattern, in CSS): 7.2cqw holds
   The Roasting Party on one line down to ~190px, floored at 15px; the tag drops to 10px caps. nowrap on both so a miss would
   overflow and be seen rather than wrap. */
@media (min-width:1101px){
  .scard{container-type:inline-size}
  .scard .name{font-size:clamp(15px,7.2cqw,24px);white-space:nowrap;letter-spacing:-0.02em}
  .scard .what{font-size:10px;white-space:nowrap;letter-spacing:.08em}   /* the tag (.what) */
}
/* == FOUR EXPANDERS 2 OCT 2026 == about.js explains. The rows carry the gutter and the rule; the sections inside lose their own
   side and top padding (the summary is now the heading). The Follow band on the sand keeps its tiles. */
.xp .art,.xp .src,.xp .give,.xp .follow{padding-left:0;padding-right:0;padding-top:8px;margin-top:0}
.xp .art{padding-bottom:40px}.xp .src{padding-bottom:40px}.xp .give{padding-bottom:40px}.xp .follow{padding-bottom:24px}
.xp .art .hd{justify-content:flex-end}
.about-rows{margin-top:40px}
/* == SOURCING AS THE CHARITY ROW'S TWO COLUMNS 2 OCT 2026 == (Nuo, with a marked-up screenshot: "show the 6 sourcing cards on 2 rows, 3
   side by side, match the width of the dolly parton card; for the card with B Corp logo, put it to the right ... match the width of
   the great plate robbery card"). .srcrow is the same grid as .gg below it (1.2fr 1fr, 22px) so the edges line up; the six cards sit
   3x2 in the left column and the pledge fills the right one. Replaces the 16:30 six-across row. */
@media (min-width:861px){
  .srcrow{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:22px;align-items:stretch}   /* minmax(0,..): a bare fr lets the pledge's text set a min-content floor (measured 608/1190 instead of 1.2:1) */
  .srcrow .pledge .big,.srcrow .pledge .small{min-width:0;overflow-wrap:anywhere}
  .srcrow .sup{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
  .srcrow .pledge{margin-top:0;display:flex;flex-direction:column;justify-content:center;gap:18px;padding:36px 36px}
  .srcrow .pledge .big{font-size:clamp(22px,1.7vw,30px);white-space:normal;text-wrap:balance}   /* the row-wide nowrap of line 222 is for the full-width band; in a column it wraps */
  .srcrow .pledge .small{max-width:none}
  .srcrow .pledge{align-items:flex-start;text-align:left}
  .srcrow .pledge .bc{display:flex;flex-direction:column;align-items:flex-start;gap:14px;margin-top:8px}
  .srcrow .pledge .bc img{height:84px;width:auto}
}
@media (min-width:1101px){.sup{grid-template-columns:repeat(3,minmax(0,1fr))}}   /* the 16:30 six-across rule is superseded */
@media (max-width:860px){.srcrow .pledge{margin-top:24px}}
/* == SOURCING 3/4 : 1/4, 12 OCT 2026 == (Nuo, with a marked-up screenshot: "use 3/4 of page for the 6 supplier cards and 1/4 of page
   for the green card with B Corp logo / use full width of the B Corp card for the text, move B Corp logo to the bottom right of that
   card, bottom aligned with the link / make the B corp card the same height as the 6 supplier cards"; interviewed: the Charity row
   keeps its 1.2 : 1, so the two rows' edges no longer line up - his choice; text from the top, the link bottom left and the logo
   bottom right on one bottom line; when tight the text shrinks (about.js fitPledgeHeight); phones unchanged).
   contain:size takes the pledge's content out of the row's height, so the row is the six cards' and the pledge stretches to it. */
@media (min-width:861px){
  .srcrow{grid-template-columns:minmax(0,3fr) minmax(0,1fr)}
  .srcrow .pledge{contain:size;overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto 1fr;grid-template-areas:"big big" "small small" "act bc";gap:14px 16px;align-items:start;padding:32px 30px 28px}
  .srcrow .pledge .big,.srcrow .pledge .small{text-wrap:wrap;max-width:none;width:auto;margin-top:0}   /* the full width of the card: no balance, which shortened every line */
  .srcrow .pledge .bc{display:contents}
  .srcrow .pledge .bc img{grid-area:bc;align-self:end;justify-self:end;height:84px;width:auto;margin:0}
  .srcrow .pledge .bc a.pill{grid-area:act;align-self:end;justify-self:start;white-space:nowrap}
  /* the third row is 1fr with an AUTO floor, so words that do not fit push the grid past the card (scrollHeight), which is what
     fitPledgeHeight measures; a minmax(0,1fr) row let the link and logo ride up over the small print with nothing overflowing */
  /* .stack: set by about.js when even the 18px floor cannot fit (measured: below about 1,000px wide) - the card drops under the
     six at full width, its own height, link left and logo right */
  .srcrow.stack{grid-template-columns:minmax(0,1fr)}
  .srcrow.stack .pledge{contain:none;grid-template-rows:auto auto auto}
}

.chapters[hidden]{display:none!important}   /* the chapter pills are deleted (Nuo, 13 Oct 2026) */

/* == PASTEL ON HOVER 15 OCT 2026 == (Nuo, evening: "use pastel colours instead of neon when mouse hovers over a card"; asked, the
   Follow Us cards only). Each card floods its pastel twin instead of the neon: Instagram Dust Pink #F9C6CF (was Neon Pink), TikTok
   Dust Blue #A9D8EA (was Neon Blue), LinkedIn Dust Orange #F3CBA6 (was Neon Orange) - the V2 pastel range, brand-palette-from-
   deck.md. On a pastel the words stay INK: the 2 Oct Sandstone-on-neon text and outline would be white on near-white, so every
   hovered-card colour rule above is restated here in ink, and the platform marks keep their ink inversion. */
@media (hover:hover){
  /* LIGHTER STILL (Prue's review, 19 Oct 2026: "more pared back colourings ... even lighter"): each pastel taken halfway to
     white - was #F9C6CF, #A9D8EA, #F3CBA6 */
  .follow .ftile.instagram:hover{background:#FCE3E7}
  .follow .ftile.tiktok:hover{background:#D4ECF5}
  .follow .ftile.linkedin:hover{background:#F9E5D3}
  .follow .ftile:hover{color:var(--ink)}
  .follow .ftile:hover .k,.follow .ftile:hover .pill.light{color:var(--ink);border-color:var(--ink);background:transparent}
  .follow .ftile:hover .ico .dgi{filter:invert(1)}
  .follow .ftile:hover .lpost .t,.follow .ftile:hover .lpost .go,.follow .ftile:hover .lpost .pin{color:var(--ink)}
  .follow .ftile:hover .lpost .rp{color:#5a5754}
  .follow .ftile:hover .lpost .pin{background:rgba(0,0,0,.08)}
  .follow .ftile:hover .feed.rows .rin,.follow .ftile:hover .lpost{border-color:rgba(0,0,0,.12)}
}

/* ABOUT, IMPRESSIVE AND ELEGANT (Nuo, 6 Nov 2026, "Do all"; about.js) */
.ab-lead{padding:110px var(--pad) 50px;text-align:center;max-width:1100px;margin:0 auto}
.ab-lead .big{font-family:var(--head);font-weight:400;font-size:clamp(26px,3.2vw,48px);line-height:1.2;letter-spacing:-0.01em;margin:0 0 22px}
.ab-lead .by{font-family:var(--head);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:rgba(0,0,0,.55)}
.ab-founders{padding:10px var(--pad) 90px;max-width:1100px;margin:0 auto}
.ab-founders img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:50% 30%;display:block}
.ab-founders .cap{margin-top:12px;font-family:var(--head);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:rgba(0,0,0,.55)}
.ab-ch{padding:0 var(--pad) 40px;display:flex;flex-direction:column;gap:80px}
.ab-ch .ch{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.ab-ch .ch.flip figure{order:2}
.ab-ch figure{margin:0;aspect-ratio:4/5;overflow:hidden;background:#e6ddd7}
.ab-ch figure img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.4s cubic-bezier(.2,.8,.2,1)}
@media (hover:hover){.ab-ch .ch:hover figure img{transform:scale(1.03)}}
.ab-ch h2{font-size:clamp(26px,2.6vw,40px);margin:0 0 20px}
.ab-ch p{font-size:clamp(16px,1.2vw,19px);line-height:1.6;margin:0 0 16px;max-width:none}
.ab-vals{padding:100px var(--pad) 40px;text-align:center}
.ab-vals h2{margin:0 0 48px}
.ab-vals .vrow{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:24px}
.ab-vals .v{display:flex;flex-direction:column;align-items:center;gap:10px}
.ab-vals .v b{font-family:var(--head);font-weight:400;font-size:clamp(64px,8vw,120px);line-height:1;color:#0F4A2C;transition:color .3s,transform .5s cubic-bezier(.3,1.5,.4,1)}
.ab-vals .v .n{font-family:var(--head);text-transform:uppercase;letter-spacing:.1em;font-size:14px}
.ab-vals .v .d{font-size:14px;line-height:1.45;color:#4a4643;max-width:22ch}
@media (hover:hover){.ab-vals .v:hover b{color:#F36F23;transform:translateY(-6px) rotate(-4deg)}}
.ab-vals .v.reveal b{transform:translateY(30px);opacity:0;transition:transform .8s cubic-bezier(.2,1.2,.3,1) var(--d,0ms),opacity .6s var(--d,0ms),color .3s}
.ab-vals .v.reveal.in b{transform:none;opacity:1}
.ab-tl{padding:90px var(--pad) 30px}
.ab-tl h2{margin:0 0 36px}
.ab-tl .tlrow{position:relative;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(170px,1fr);gap:16px;overflow-x:auto;scrollbar-width:none;padding-top:4px}
.ab-tl .tlrow::-webkit-scrollbar{display:none}
.ab-tl .tlrow::before{content:"";position:absolute;left:0;right:0;top:34px;height:1px;background:rgba(0,0,0,.18)}
.ab-tl .st{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:10px;background:none;border:0;padding:0;text-align:left;cursor:pointer;font:inherit;color:inherit}
.ab-tl .y{font-family:var(--head);font-size:15px;letter-spacing:.06em}
.ab-tl .dot{width:11px;height:11px;border-radius:50%;background:#F36F23;margin:2px 0 6px}
.ab-tl .st img{width:100%;aspect-ratio:1/1;object-fit:cover;display:block;filter:grayscale(.3);transition:filter .3s}
.ab-tl .t{font-family:var(--head);font-size:13px;letter-spacing:.06em;text-transform:uppercase;line-height:1.3}
@media (hover:hover){.ab-tl .st:hover img{filter:none}.ab-tl .st:hover .t{color:#F36F23}}
.ab-tl .tlnote{margin:18px 0 0;font-size:13px;color:rgba(0,0,0,.55)}
.ab-aw{padding:80px var(--pad) 40px;text-align:center}
.ab-aw h2{margin:0 0 20px}
.ab-aw .aw4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.ab-aw .aw4 a{display:flex;flex-direction:column;align-items:center;gap:12px;padding:40px clamp(12px,2vw,30px);color:var(--ink,#000);text-decoration:none;transition:background .4s}
.ab-aw .lg{height:110px;width:100%;display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:12px;container-type:inline-size}   /* the two Tripadvisor marks one height as on Scarlett's card, Great Taste slightly smaller (Nuo, 7 Nov 2026, as on the landing page): 3.63 = roundel 0.98 + lock-up 2.65 widths per unit of height */
.ab-aw img{display:block;max-width:100%;mix-blend-mode:multiply}
.ab-aw img.st{width:min(200px,90%);height:auto}.ab-aw img.ta{height:min(80px,calc((100cqw - 12px) / 3.63));width:auto;max-width:none}.ab-aw img.liv{width:min(240px,100%);height:auto;margin:-34px 0}.ab-aw img.gt{height:82px;width:auto}
.ab-aw .iss{font-family:var(--head);font-size:12px;letter-spacing:.18em;text-transform:uppercase}
.ab-aw .pz{font-size:15px;line-height:1.45;color:#2b2926}
.ab-aw .yr{font-family:var(--head);font-size:12px;letter-spacing:.08em;color:rgba(0,0,0,.5)}
@media (hover:hover){.ab-aw .aw4 a:hover{background:rgba(255,255,255,.45)}}
.ab-more{padding:70px var(--pad) 20px}
.ab-more .mgrid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}   /* six since Careers joined (7 Nov 2026) */
@media (min-width:861px) and (max-width:1439px){.ab-more .mgrid{grid-template-columns:repeat(3,minmax(0,1fr))}html body .ab-more .mgrid a.mbox{aspect-ratio:3/2}}   /* six across left SUSTAINABILITY edge to edge at 1024px: two rows of three there */
.ab-more a.mbox{position:relative;display:block;aspect-ratio:4/5;overflow:hidden;background:#141414;color:#fff;text-decoration:none}
.ab-more a.mbox img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.2,.8,.2,1)}
.ab-more a.mbox::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.32);transition:background .35s}
.ab-more a.mbox h2{position:absolute;inset:0;z-index:1;display:flex;align-items:center;justify-content:center;margin:0;padding:0 10px;text-align:center;font-family:var(--head);font-weight:400;font-size:clamp(16px,1.5vw,24px);letter-spacing:.06em;text-transform:uppercase;color:#FFFFFF}
@media (hover:hover){.ab-more a.mbox:hover::after{background:rgba(0,0,0,.55)}.ab-more a.mbox:hover img{transform:scale(1.04)}}
.follow .ftiles.one{grid-template-columns:minmax(0,1fr)!important;max-width:1100px;margin:0 auto}
.follow .alsoon{display:flex;justify-content:center;gap:28px;margin:22px 0 0;font-family:var(--head);text-transform:uppercase;font-size:12px;letter-spacing:.1em}
.follow .alsoon a{display:inline-flex;align-items:center;gap:8px;color:inherit;text-decoration:none;padding:6px 0}
.follow .alsoon .ico img,.follow .alsoon .ico svg{width:16px;height:16px}
@media (hover:hover){.follow .alsoon a:hover{color:#F36F23}}
@media (max-width:860px){
  .ab-lead{padding:70px var(--pad) 30px}
  .ab-founders{padding-bottom:60px}
  .ab-ch{gap:48px}.ab-ch .ch{grid-template-columns:1fr;gap:20px}.ab-ch .ch.flip figure{order:0}.ab-ch figure{aspect-ratio:4/3}
  .ab-vals{padding-top:70px}.ab-vals .vrow{grid-template-columns:1fr;gap:28px}
  .ab-tl .tlrow{grid-auto-columns:46%}
  .ab-aw .aw4{grid-template-columns:repeat(2,minmax(0,1fr))}.ab-aw .lg{height:80px}.ab-aw img.ta{height:min(52px,calc((100cqw - 12px) / 3.63))}.ab-aw img.gt{height:58px}.ab-aw img.liv{width:min(140px,100%);margin:-20px 0}
  .ab-more .mgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}   /* six tiles, three rows of two: the wide last tile was for an odd five */
}
/* each sentence of a value's line on its own line (Nuo, 6 Nov 2026, 22:47) */
.ab-vals .v .d{max-width:none}.ab-vals .v .dl{display:block;white-space:nowrap}
@media (max-width:360px){.ab-vals .v .dl{white-space:normal}}

/* FOLLOW US: smaller and centred (Nuo, 7 Nov 2026: "use smaller font for FOLLOW US and put it in centre"): the house section-heading
   size (the landing's Discover / Awards, 28-40px), on the page's axis; the sub line, if any, sits under it, centred */
.follow .fhd{flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:12px}
.follow h2.big,.follow .fhd h2.big{font-size:clamp(28px,2.8vw,40px);letter-spacing:.02em;line-height:1.1}
.follow .sub{text-align:center}


/* the small lines centred (Nuo, 7 Nov 2026: "centre align the small text here"): the quote's attribution and the founders' caption */
.ab-lead .by{display:block;text-align:center!important;max-width:none;margin-left:auto;margin-right:auto}
.ab-founders .cap{text-align:center;max-width:none;margin-left:auto;margin-right:auto}   /* a page-wide p max-width had held it at the left */

/* THE EARLY YEARS, EVERY POST, AND ITS POP-UP (Nuo, 7 Nov 2026, interviewed: Our Story folded in; a tap opens the post) */
.ab-tl .tlwrap{position:relative}
.ab-tl .tlrow{scroll-snap-type:x mandatory;scroll-behavior:smooth}
.ab-tl .st{scroll-snap-align:start}
.ab-tl .tlarr{position:absolute;top:calc(34px + 30%);z-index:2;width:48px;height:48px;border-radius:50%;border:1px solid #000;background:rgba(242,236,233,.92);font-size:22px;line-height:1;cursor:pointer;color:#000}
.ab-tl .tlarr.prev{left:-12px}.ab-tl .tlarr.next{right:-12px}
.ab-tl .tlarr:disabled{opacity:0;pointer-events:none}
@media (hover:hover){.ab-tl .tlarr:hover{border-color:#F36F23;color:#F36F23}}
@media (max-width:860px){.ab-tl .tlarr{display:none}}
html.eylock{overflow:hidden}
dialog.eyd{margin:auto;inset:0;position:fixed;padding:0;border:0;background:transparent;max-width:min(1100px,calc(100vw - 32px));width:100%;max-height:calc(100dvh - 32px);color:#1d1b19}
dialog.eyd::backdrop{background:rgba(20,18,16,.72)}
.eyd .eyin{position:relative;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);background:#FBF8F3;max-height:calc(100dvh - 32px);box-shadow:0 20px 60px -20px rgba(0,0,0,.5)}
.eyd .eyp{margin:0;background:#1d1b19;display:flex;align-items:center;justify-content:center;min-height:0}
.eyd .eyp img{display:block;width:100%;height:100%;max-height:calc(100dvh - 32px);object-fit:contain}
.eyd .eyt{padding:clamp(28px,4vw,56px) clamp(22px,3.5vw,48px) 24px;overflow-y:auto;display:flex;flex-direction:column;min-height:0;max-height:calc(100dvh - 32px)}
.eyd .eyn{margin:0 0 10px;font-family:var(--head);font-size:13px;letter-spacing:.08em;color:#0F4A2C;min-height:1em}
.eyd h3{margin:0 0 18px;font-family:var(--head);font-weight:400;text-transform:uppercase;letter-spacing:.04em;font-size:clamp(20px,2vw,28px);line-height:1.2}
.eyd .eyb p{margin:0 0 1em;font-family:var(--head);font-size:clamp(14px,1.05vw,16px);line-height:1.75;max-width:none;text-shadow:0 0 .35px rgba(0,0,0,.5)}
.eyd .eynav{margin-top:auto;padding-top:18px;display:flex;align-items:center;gap:14px;font-family:var(--head);font-size:12px;letter-spacing:.08em;color:rgba(0,0,0,.6)}
.eyd .eynav button{width:44px;height:44px;border-radius:50%;border:1px solid #000;background:transparent;font-size:20px;line-height:1;cursor:pointer;color:#000}
.eyd .eyx{position:absolute;top:10px;right:10px;z-index:2;width:44px;height:44px;border-radius:50%;border:0;background:rgba(251,248,243,.92);font-size:26px;line-height:1;cursor:pointer;color:#000}
@media (hover:hover){.eyd .eynav button:hover,.eyd .eyx:hover{color:#F36F23;border-color:#F36F23}}
@media (max-width:760px){
  .eyd .eyin{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr);overflow:hidden}
  .eyd .eyp img{max-height:42dvh}
  .eyd .eyt{max-height:none}
}
/* TikTok and LinkedIn under the Instagram card, centred at every width (Nuo, 7 Nov 2026: "centre align the tiktok and linkedin links on desktop as well") */
.follow .alsoon{display:flex;flex-wrap:wrap;justify-content:center;text-align:center;margin-left:auto;margin-right:auto}
/* OUR STORY, CENTRED (Nuo, 7 Nov 2026, 14:49: "change the early years to our story, centre align it"): the heading and the line under the strip */
.ab-tl h2,.ab-tl .tlnote{text-align:center}

.ab-more a.mbox video.mfilm{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.2,.8,.2,1)}   /* a card's own film over its still (Sustainability, 8 Nov 2026) */
@media (hover:hover){.ab-more a.mbox:hover video.mfilm{transform:scale(1.04)}}