"use strict";var _jsxruntime = require("react/jsx-runtime");Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { newObj[key] = obj[key]; } } } newObj.default = obj; return newObj; } } function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }var _react = require('react'); var _three = require('three'); var THREE = _interopRequireWildcard(_three); var _Quote = require('./components/Quote'); var _Quote2 = _interopRequireDefault(_Quote); var _Split = require('./components/Split'); var _Split2 = _interopRequireDefault(_Split); var _Table = require('./components/Table'); var _Table2 = _interopRequireDefault(_Table); var _Cover = require('./components/Cover'); var _Cover2 = _interopRequireDefault(_Cover); var _Deck = require('./engine/Deck'); var _Deck2 = _interopRequireDefault(_Deck); var _Slide = require('./engine/Slide'); var _Slide2 = _interopRequireDefault(_Slide); /* Patagonia: the manifesto. Every other deck in this gallery sells something. This one states a position, and it borrows the register of the company's own documents: a photograph, a plain sentence, no salesmanship. It is the set's only light WARM ground and its only photographic deck (the other light decks, Anthropic and Airbnb, are cool and typographic), and it is the only deck that runs a pull-quote twice at full weight, or that uses and . HOW THE PHOTOGRAPHS ARE TREATED, which is the deck's central craft problem. Three of the nine slides carry a real picture and none of them is washed out to make room for type. The library's .cover-scrim is a 82 to 94 percent --bg wash, which on this warm paper ground turns a photograph into a grey rumour, and land.webp in particular was already contrast-pushed when it was prepared (see SOURCES.md) so washing it again flattens it twice over. The rule used here instead: NEVER put ink type on top of a picture. Either the type sits on solid paper that overlaps the frame (slides one and three), or the picture gets a half of the stage to itself (slide six), or the picture is dark enough to carry white type under a gradient that DARKENS rather than bleaches it (slide nine, the only dark slide in the deck). Every photograph in this deck should read at a glance as a photograph. THE ONE MOVING OBJECT is a carved relief block of a ridge line, on slide five, and it is the only thing in the file that moves apart from the type. It is here because the gallery's whole argument is that these are live documents rather than exported slides, and every deck now needs one moment a PDF could not do. See ReliefBlock below for what it is made of and why a light paper ground is the hard case for it. It is deliberately NOT the company's Fitz Roy mark: that is a garment-label trademark with no redistributable vector (SOURCES.md), and reconstructing it by eye was rejected as invention when the assets were sourced. This is a generic ridge, it is captioned as generated terrain, and it is named after no peak. ------------------------------------------------------------------ SOURCES. Every figure and every quoted sentence was read out of a first-party Patagonia document, not recalled. Verified 7 August 2026. [A] Patagonia's 2025 Work in Progress Report (154pp, PDF, Vol. 01, published 12 November 2025, patagonia.com/media/pdf/ patagonia-progress-report-2025.pdf). Their first full impact report. - p.7 section title "Nothing We Do Is Sustainable", and the paragraph under it about giving back less than you take. - p.8 "In 2018, we changed our official reason for being to amplify this directive: We're in business to save our home planet." - p.13 to p.16, the "Did We Meet Our 2025 Goals?" scorecard, which is where every cell of the table on slide seven comes from. - p.14 "our GHG emissions have gone up by 2% since FY24." - p.23 "Since it was founded in August 2022, Holdfast Collective has received $180 million from Patagonia." - p.100 FY25 Worn Wear by the numbers (137,106 traded in, 212,000 resold), the Reno repair shop, and "for FY25, we fixed 174,799 items worldwide." - p.105 1% for the Planet, created in 2002 by Chouinard and Craig Mathews of Blue Ribbon Flies, "nearly 5,000 member businesses". - p.4 the founder's letter, quoted on slide eight. [B] Patagonia Works press release, 14 September 2022, "Patagonia's Next Chapter: Earth is Now Our Only Shareholder". The 2% / 98% split, the roughly $100m projection, and Chouinard's quoted sentence, which is reproduced here word for word from that release. Also the governance mechanism on slide five, verbatim: "The Chouinard family will also guide the company's controlling shareholder, the Patagonia Purpose Trust, electing and overseeing Patagonia's board of directors." [C] Patagonia Works press release, 2 March 2026, "Patagonia announces new board chair, members". Every name, seat and date on slide five: Claire Chouinard "is assuming the role of board chair from Charles Conn, who held the role since 2019"; Conn "will remain on the board as a member and close advisor"; and the two arrivals, "Barbara Martin Coppola, former CEO of Decathlon and chief digital officer of Ikea; and Natasha Chand, former vice president of corporate development of Levi Strauss & Co., business unit director of Target and co-founder and CEO of private brands at Amazon". The five directors named in the foot line are the rest of the board as that release lists it. The same release carries Patagonia's current boilerplate, which is where the "more than $240 million" on slide four comes from. [D] Patagonia's own storefront pages, read on patagonia.com.au because patagonia.com itself answers any non-browser client with a ten-byte failover page: /pages/progress-report ("Since 1985, we've donated 1% of all sales to grassroots nonprofits") and /pages/worn-wear ("Repair is a Radical Act", which is their headline, not mine). [E] David Gelles, "Patagonia's profits fund Leonardo DiCaprio's charity", 13 January 2026, davidgelles.substack.com. Gelles covers climate for the New York Times, and he reads the three Holdfast Collective totals on slide five straight off [A]: "Committed a total of $142 million to activism and conservation. Protected 645,385 acres of land. Made 2,055 grants." This is the ONE figure in the deck taken at second hand and the slide says so, because [A] itself could not be re-opened to give a page number: patagonia.com answers every non-browser client with a ten-byte failover page and the report PDF 404s to anything but a real browser session, which is the same wall recorded under [D]. The secondary source is a named reporter quoting and linking the primary document this deck already cites throughout, which is why it is used at all. If the PDF ever becomes fetchable again, re-read pages 20 to 25 and put the page number on the slide. THE 1985 / 2002 TRAP, which is why slide four separates them into two steps. Patagonia began pledging 1% of SALES in 1985, by itself. 1% for the Planet, the separate nonprofit that exists to get other companies to do the same, came seventeen years later. Almost every retelling collapses the two into "Patagonia founded 1% for the Planet in 1985", which is two errors in one clause. THE OTHER PERISHABLE ONE. Patagonia's mission is not the creed most people can quote at it. "Build the best product, cause no unnecessary harm" was retired in 2018; the current sentence is the one on the closing slide, and it was checked against [A] p.8 and against the About boilerplate Patagonia was still printing on its press releases in July 2026 rather than recalled. DELIBERATELY NOT USED. The "$140 million in cash and in-kind donations" figure still sitting on patagonia.com's 1% page is stale: [A] and the company's current press boilerplate both say over $240 million, and where a company contradicts itself the newer document wins. Also cut: the widely repeated "Chouinard gave away $3 billion", which is a journalist's valuation of a private company and not a number Patagonia has ever published; and any Worn Wear repair total older than FY25. ------------------------------------------------------------------ */ /** * The brand's real wordmark, from public/gallery/patagonia/logo.svg. * * An with a hard monochrome filter, NOT a CSS mask. The mask was tried * first and rendered nothing: several of these SVGs paint through and * clip paths, so their alpha channel is empty when used as a mask source even * though the file itself displays perfectly. brightness(0) flattens whatever * the file contains to solid black, which also neutralises the * currentColor-driven files, and invert(1) lifts it to white for the dark * grounds. One treatment, ten brands, no per-file special cases. * * The committed file is the monochrome wordmark and that is on purpose: the * multi-colour Fitz Roy sunset is a garment-label mark with no redistributable * vector, and rebuilding its gradient stops by eye off a product photograph * would be exactly the invention this deck exists to avoid. */ function Wordmark({ height = 26, invert = false }) { return ( _jsxruntime.jsx.call(void 0, 'img', { src: "/gallery/patagonia/logo.svg", alt: "Patagonia logo" , width: Math.round(height * 5.12), height: height, style: { display: "block", height, // Explicit width + alignSelf: inside a column flex the default // align-items:stretch was widening the replaced element and floating // it to the middle of the slide instead of the left gutter. alignSelf: "flex-start", opacity: 0.88, filter: invert ? "brightness(0) invert(1)" : "brightness(0)" },} ) ); } /** * The 3D element: a carved relief block of a ridge line, sitting on the paper. * * WHAT IT IS. A solid rectangular block, the way a survey office models a * valley: the top face is a displaced 340x150 PlaneGeometry, the four cut * faces are stratified strips dropped from the terrain edge to a flat base, * and the whole thing rests on a painted contact shadow so it sits ON the page * rather than floating over it. The height field is a five octave ridged value noise * (1 - |2n-1|, squared, which is what turns rounded hills into crests) pushed * through a gaussian spine so there is ONE ridge running across the frame with * a dominant summit left of centre, rather than a field of bumps. * * A LIGHT GROUND IS THE HARD CASE and it drove every other decision here. On * #f4f1ef paper a low-contrast object simply disappears, so the block is lit * like late light on rock: a single low warm key raking in from the left at * about nineteen degrees, CASTING REAL SHADOWS onto the terrain itself. The * self-shadowing is the whole thing. Without it a displaced plane is a smooth * gradient with no fold visible anywhere, which is the failure HERO-3D.md * describes; with it every gully on the shaded side goes to deep brown and the * ridge reads as relief. The cut faces are darker than the top face on * purpose, so the block has a silhouette against the paper. * * METAL NEEDS SOMETHING TO REFLECT, and so does rock. There is no network in * the sandbox and no HDRI to fetch, so the environment is generated: a 32x256 * canvas painted as a dusk sky (deep blue zenith, a bright warm band at the * horizon, warm dark ground) wrapped as an equirectangular CanvasTexture and * run through PMREMGenerator. That is what puts cool sky light into the snow * and stops the shadowed faces being flat black. * * IT DRIFTS, IT DOES NOT SPIN. The poster, the PDF and the PPTX are stills * captured at an arbitrary frame, so a full rotation would photograph the * block end-on half the time. It swings through about twenty degrees on a * fifty-seven second cycle, which reads as a model being turned on a table and * leaves the ridge broadside to the camera at every instant. * * Colour is by HEIGHT AND SLOPE, not height alone: warm brown at the valley * floor, grey stone up the flanks, bare dark scree wherever the face is too * steep to hold anything, and snow only where it is both high and nearly * flat. That last condition is what stops the summit looking dipped in paint. */ function ReliefBlock() { const host = _react.useRef(null); _react.useEffect.call(void 0, () => { const el = host.current; if (!el) { return; } // ---- the height field ------------------------------------------------ const fract = (v) => v - Math.floor(v); const hash = (i, j) => fract(Math.sin(i * 127.1 + j * 311.7) * 43758.5453); const vnoise = (x, y) => { const xi = Math.floor(x); const yi = Math.floor(y); const xf = x - xi; const yf = y - yi; const u = xf * xf * (3 - 2 * xf); const v = yf * yf * (3 - 2 * yf); const a = hash(xi, yi); const b = hash(xi + 1, yi); const c = hash(xi, yi + 1); const d = hash(xi + 1, yi + 1); return a + (b - a) * u + (c - a) * v + (a - b - c + d) * u * v; }; // Ridged multifractal. The squaring is what sharpens a crest. const ridged = (x, y) => { let amp = 1; let freq = 1; let sum = 0; let norm = 0; for (let o = 0; o < 5; o += 1) { const r = 1 - Math.abs(2 * vnoise(x * freq, y * freq) - 1); sum += r * r * amp; norm += amp; amp *= 0.52; freq *= 2.03; } return sum / norm; }; // The block is WIDER THAN THE FRAME on purpose. The first pass sat a // 15-unit specimen in the middle of the band with paper either side and it // read as a curio on a shelf. Running the slab past both edges makes it a // section of country that the slide is a window onto, and the front cut // face plus the plinth along the bottom are what still say "object". const W = 22; const D = 8.2; const BASE = -0.8; const height = (x, z) => { // The main crest: a meandering axis toward the back of the block. const axis = -0.8 + Math.sin(x * 0.19 + 0.4) * 1.0 + Math.sin(x * 0.46 + 1.9) * 0.4; const dz = (z - axis) / 3.6; const spine = Math.exp(-dz * dz * 1.0); // A lower spur in front of it, so the crest has something to stand behind // and the middle distance is not empty. const axis2 = 2.6 + Math.sin(x * 0.29 + 2.2) * 0.8; const dz2 = (z - axis2) / 2.1; const spur = 0.44 * Math.exp(-dz2 * dz2 * 1.4); // Summit heights vary ALONG the ridge from a low frequency ridged noise // rather than from hand-placed gaussians: five typed-in peaks read as // five typed-in peaks. The seed and the exponent were chosen by printing // the crest profile at 25 stations and reading it, because at 2.1 the // whole ridge came out between 1.4 and 1.7 and photographed as a lumpy // plateau. Squaring hard is what buys the difference between a summit and // its shoulders. const along = ridged(-x * 0.155 + 19.5, 0.5); const massif = 0.24 + 2.6 * Math.pow(along, 2.2); const n = ridged(x * 0.33 + 11.3, z * 0.33 + 4.7); const grain = vnoise(x * 1.3 + 5, z * 1.3 + 2) - 0.5; let h = (spine + spur) * massif * (0.3 + n); h += (spine + spur) * grain * 0.17; // The valley floor. It never reaches zero: the top surface has to meet // the cut faces in a clean line all the way round or the slab looks like // a lump with a foot rather than a block. h += 0.34 + (vnoise(x * 0.42 + 31, z * 0.42 + 17) - 0.38) * 0.5; // Range after this line, measured: 0.27 at the valley floor to 3.19 at // the dominant summit, median 1.10. The colour thresholds below are // written against those numbers, so retune both together. return Math.max(h, 0.1) * 1.5; }; // ---- renderer, camera, generated studio ------------------------------ const scene = new THREE.Scene(); // FRAMED WHOLE, all four corners in shot. The pass before this one had the // camera at fifteen units and the near half of the slab ran off the bottom // of the band, which took the front cut face, the plinth and the contact // shadow with it: the object stopped being an object and became a // photograph of some hills. Back at twenty and a half units the block is a // block again, and the band is almost exactly the aspect ratio of the slab. const camera = new THREE.PerspectiveCamera(17.5, 3, 0.5, 200); camera.position.set(1.0, 5.2, 20.5); camera.lookAt(0, 0.45, -0.2); const renderer = new THREE.WebGLRenderer({ alpha: true, antialias: true }); renderer.setPixelRatio(Math.min(window.devicePixelRatio || 1, 2)); renderer.toneMapping = THREE.ACESFilmicToneMapping; renderer.toneMappingExposure = 1.06; renderer.shadowMap.enabled = true; renderer.shadowMap.type = THREE.PCFSoftShadowMap; renderer.domElement.style.display = "block"; el.appendChild(renderer.domElement); const sky = document.createElement("canvas"); sky.width = 32; sky.height = 256; const sctx = sky.getContext("2d"); if (sctx) { const grad = sctx.createLinearGradient(0, 0, 0, 256); grad.addColorStop(0, "#33456b"); grad.addColorStop(0.26, "#7d93b6"); grad.addColorStop(0.42, "#e8c39a"); grad.addColorStop(0.475, "#fff3df"); grad.addColorStop(0.52, "#f2b483"); grad.addColorStop(0.6, "#7c5f4a"); grad.addColorStop(1, "#2a2019"); sctx.fillStyle = grad; sctx.fillRect(0, 0, 32, 256); } const skyTex = new THREE.CanvasTexture(sky); skyTex.mapping = THREE.EquirectangularReflectionMapping; skyTex.colorSpace = THREE.SRGBColorSpace; const pmrem = new THREE.PMREMGenerator(renderer); const envRT = pmrem.fromEquirectangular(skyTex); scene.environment = envRT.texture; // ---- top surface ------------------------------------------------------ const SEG_X = 340; const SEG_Z = 150; const top = new THREE.PlaneGeometry(W, D, SEG_X, SEG_Z); top.rotateX(-Math.PI / 2); const tp = top.attributes.position ; for (let i = 0; i < tp.count; i += 1) { tp.setY(i, height(tp.getX(i), tp.getZ(i))); } tp.needsUpdate = true; top.computeVertexNormals(); const clamp01 = (v) => (v < 0 ? 0 : v > 1 ? 1 : v); const step = (v, a, b) => { const t = clamp01((v - a) / (b - a)); return t * t * (3 - 2 * t); }; // THE HUE HAS TO TRAVEL, and this is the fix for the first pass, which was // a single brown from the valley floor to the summit and read as a lump of // clay. A warm ground cover at the bottom, cool grey stone at the top and // snow above that gives the object a temperature gradient of its own, so it // does not merely sit darker than the paper, it sits DIFFERENT from it. const grass = new THREE.Color(0x6a6553); const rockLow = new THREE.Color(0x7d6244); const rockMid = new THREE.Color(0x8e7f6c); const rockHigh = new THREE.Color(0x8d9199); const scree = new THREE.Color(0x33281e); const snow = new THREE.Color(0xeef1f6); const swatch = new THREE.Color(); const nrm = top.attributes.normal ; const topCols = new Float32Array(tp.count * 3); for (let i = 0; i < tp.count; i += 1) { const h = tp.getY(i); const flat = nrm.getY(i); swatch.copy(grass).lerp(rockLow, step(h, 0.4, 1.0)); swatch.lerp(rockMid, step(h, 0.9, 1.5)); swatch.lerp(rockHigh, step(h, 1.25, 2.1)); // Too steep to hold soil: go to bare dark scree. Slope, not height, is // what decides this, and doing it on height alone is what makes a // displaced plane look like a painted gradient with no folds in it. swatch.lerp(scree, 1 - step(flat, 0.4, 0.84)); // Snow only where it is BOTH high and nearly flat, which is what stops // the summits looking dipped in paint. // The slope gate is LOOSE on purpose. At step(flat, 0.5, 0.82) the only // faces that qualified were the valley floor, so the summits, which are // the steepest thing in the scene, got no snow at all and the object // stayed one brown from end to end. swatch.lerp(snow, step(h, 1.8, 2.5) * step(flat, 0.26, 0.62)); topCols[i * 3] = swatch.r; topCols[i * 3 + 1] = swatch.g; topCols[i * 3 + 2] = swatch.b; } top.setAttribute("color", new THREE.BufferAttribute(topCols, 3)); const rockMat = new THREE.MeshStandardMaterial({ vertexColors: true, roughness: 0.93, metalness: 0.02, envMapIntensity: 0.88 }); const topMesh = new THREE.Mesh(top, rockMat); topMesh.castShadow = true; topMesh.receiveShadow = true; // ---- the four cut faces ---------------------------------------------- // Built off the same height() so the seam is exact. DoubleSide because the // strips inherit the plane's winding and I would rather not reason about // which two of the four end up inside out: three flips the normal on back // faces anyway, so the shading is right either way. const strataA = new THREE.Color(0x77614a); const strataB = new THREE.Color(0x3b2c1d); const soil = new THREE.Color(0x2b2116); const skirtMat = new THREE.MeshStandardMaterial({ vertexColors: true, roughness: 0.97, metalness: 0.02, envMapIntensity: 0.42, side: THREE.DoubleSide }); // TWENTY-SIX ROWS, NOT ONE. The first version of this took a plane with a // single quad of height, which means the strata were evaluated at exactly // two y values per column and then linearly interpolated between them: the // banding averaged out and the whole plinth photographed as one flat slab // of brown, which was the last thing stopping this reading as a cut block. const skirt = (n, at) => { const ROWS = 44; const g = new THREE.PlaneGeometry(1, 1, n, ROWS); const p = g.attributes.position ; const cols = new Float32Array(p.count * 3); for (let i = 0; i < p.count; i += 1) { const t = p.getX(i) + 0.5; const v = p.getY(i) + 0.5; const [x, z] = at(t); const y = BASE + (height(x, z) - BASE) * v; p.setXYZ(i, x, y, z); // Strata run off ABSOLUTE y, not off the row index, so the bands stay // horizontal across the face the way sediment does instead of following // the skyline up and down. // Frequency measured against the face, not guessed: the cut is only // about one and a half units tall, so at y*3.6 less than one whole band // fitted on it and the plinth still read as a smooth gradient. const band = 0.5 + 0.5 * Math.sin(y * 8.5 + vnoise(x * 0.3, z * 0.3) * 3.0); swatch.copy(strataB).lerp(strataA, 0.14 + band * 0.7); // A dark soil horizon along the top edge, which is the line that says // the ground was cut rather than that it faded out. swatch.lerp(soil, step(v, 0.9, 1.0) * 0.85); cols[i * 3] = swatch.r; cols[i * 3 + 1] = swatch.g; cols[i * 3 + 2] = swatch.b; } p.needsUpdate = true; g.setAttribute("color", new THREE.BufferAttribute(cols, 3)); g.computeVertexNormals(); const mesh = new THREE.Mesh(g, skirtMat); mesh.castShadow = true; mesh.receiveShadow = true; return mesh; }; const front = skirt(SEG_X, (t) => [-W / 2 + t * W, D / 2]); const back = skirt(SEG_X, (t) => [-W / 2 + t * W, -D / 2]); const left = skirt(SEG_Z, (t) => [-W / 2, -D / 2 + t * D]); const right = skirt(SEG_Z, (t) => [W / 2, -D / 2 + t * D]); const bottomGeo = new THREE.PlaneGeometry(W, D); bottomGeo.rotateX(Math.PI / 2); bottomGeo.translate(0, BASE, 0); const bottomMat = new THREE.MeshStandardMaterial({ color: 0x2e2319, roughness: 1, metalness: 0 }); const bottom = new THREE.Mesh(bottomGeo, bottomMat); // ---- the contact shadow, painted, not raytraced ----------------------- // The renderer is alpha:true over warm paper, so a dark transparent quad // laid on the table composites as a shadow on the page. This is what stops // the block reading as a cut-out pasted onto the slide. Alpha is written by // hand as a rounded-rect falloff rather than a canvas blur filter, because // the block is rectangular and an elliptical blob under a rectangle looks // like a mistake. const shadowCanvas = document.createElement("canvas"); shadowCanvas.width = 256; shadowCanvas.height = 256; const shctx = shadowCanvas.getContext("2d"); if (shctx) { const img = shctx.createImageData(256, 256); for (let y = 0; y < 256; y += 1) { for (let x = 0; x < 256; x += 1) { const px = (x / 255 - 0.5) * 2; const py = (y / 255 - 0.5) * 2; const dx = Math.max(Math.abs(px) - 0.5, 0); const dy = Math.max(Math.abs(py) - 0.42, 0); const d = Math.sqrt(dx * dx + dy * dy); const a = Math.pow(clamp01(1 - d / 0.46), 2.3); const o = (y * 256 + x) * 4; img.data[o] = 0; img.data[o + 1] = 0; img.data[o + 2] = 0; img.data[o + 3] = Math.round(255 * a); } } shctx.putImageData(img, 0, 0); } const shadowTex = new THREE.CanvasTexture(shadowCanvas); shadowTex.colorSpace = THREE.SRGBColorSpace; const shadowGeo = new THREE.PlaneGeometry(W * 1.2, D * 2.3); shadowGeo.rotateX(-Math.PI / 2); const shadowMat = new THREE.MeshBasicMaterial({ map: shadowTex, color: 0x3a2a1c, transparent: true, opacity: 0.62, depthWrite: false }); const contact = new THREE.Mesh(shadowGeo, shadowMat); // Biased toward the camera as well as away from the key, because the half // that falls behind the slab is hidden by the slab and contributes nothing. contact.position.set(1.1, BASE + 0.004, 0.7); contact.renderOrder = -1; const block = new THREE.Group(); block.add(topMesh, front, back, left, right, bottom); const rig = new THREE.Group(); rig.add(contact, block); rig.rotation.set(0, -0.14, 0); scene.add(rig); // ---- late light ------------------------------------------------------- // ONE LOW WARM SUN, raking in from the left at about eighteen degrees, and // it casts. The self-shadowing is the whole object: without it a displaced // plane is a smooth gradient with no fold visible anywhere. const key = new THREE.DirectionalLight(0xffe2c2, 3.2); key.position.set(-24, 7.8, 9); key.castShadow = true; key.shadow.mapSize.set(3072, 3072); key.shadow.camera.left = -17; key.shadow.camera.right = 17; key.shadow.camera.top = 12; key.shadow.camera.bottom = -12; key.shadow.camera.near = 4; key.shadow.camera.far = 70; key.shadow.bias = -0.0006; key.shadow.normalBias = 0.03; // Cool bounce from the other side so the shadowed faces are blue-grey // rather than a muddy dark version of the sunlit ones. const fill = new THREE.DirectionalLight(0x9dbae2, 1.35); fill.position.set(11, 4.2, -7); scene.add(key, key.target, fill); const resize = () => { const w = el.clientWidth || 1; const h = el.clientHeight || 1; renderer.setSize(w, h); camera.aspect = w / h; camera.updateProjectionMatrix(); }; resize(); const started = performance.now(); let raf = 0; const tick = () => { const t = (performance.now() - started) / 1000; rig.rotation.y = -0.15 + Math.sin(t * 0.11) * 0.17; renderer.render(scene, camera); raf = requestAnimationFrame(tick); }; tick(); const ro = new ResizeObserver(resize); ro.observe(el); return () => { cancelAnimationFrame(raf); ro.disconnect(); scene.traverse((obj) => { const mesh = obj ; if (mesh.geometry) { mesh.geometry.dispose(); } }); [rockMat, skirtMat, bottomMat, shadowMat].forEach((m) => m.dispose()); shadowTex.dispose(); envRT.texture.dispose(); skyTex.dispose(); pmrem.dispose(); renderer.dispose(); el.removeChild(renderer.domElement); }; }, []); return _jsxruntime.jsx.call(void 0, 'div', { ref: host, style: { width: "100%", height: "100%", minHeight: 220 },} ); } function App() { return ( _jsxruntime.jsxs.call(void 0, _Deck2.default, { children: [ /* The opening move: a photograph and a plain sentence, which is how Patagonia's own documents open. puts the picture hard left and the type on a solid paper panel right, so nothing is laid over the photo and nothing is centred. The asset is PORTRAIT (1200x1462) and this is the one layout in the library that wants that: the cover-media column is roughly 0.9:1, so the frame takes the picture almost whole instead of cropping a landscape to death. The line is Patagonia's own section title from page 7 of their report, not a slogan I wrote. Opening a brand deck by quoting the brand against itself is the whole thesis of the document. */ _jsxruntime.jsx.call(void 0, _Cover2.default, { nav: "Nothing", flip: true, image: "/gallery/patagonia/cover.webp", kicker: "Work in Progress Report · Vol. 01" , title: // The size override is deliberate. .cover-panel re-scales .display // down to clamp(38px,4.6vw,68px) so a long title cannot break the // panel, and at 68px this five-word sentence left a third of the // panel empty above and below it. A span inside the h1 takes the // size back without touching the component. _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [ _jsxruntime.jsx.call(void 0, 'span', { style: { display: "block", marginBottom: 18 }, children: _jsxruntime.jsx.call(void 0, Wordmark, { height: 22,} ) }) , _jsxruntime.jsx.call(void 0, 'span', { style: { display: "block", fontSize: "clamp(40px, 5.6vw, 92px)", lineHeight: 0.98 }, children: "Nothing we do is sustainable." }) ]}) , subtitle: "The opening section title of the first full impact report Patagonia has ever published. No company, it says, gives back as much as it takes." , foot: "Patagonia, 2025 Work in Progress Report, page 7. Published 12 November 2025." ,} ) /* The ownership slide, hand-rolled because the shape is the argument. A StatGrid band of three cards would have said 2% and 98% and left the viewer to imagine the proportion; a bar split 2/98 across the full gutter width SHOWS that a sliver you can barely see holds all the votes, which is the counterintuitive part of the story and the part every summary gets backwards. rather than a plain slide on purpose: engine.css only auto-centres inside .container, so a full slide is the one place a hand-rolled left-aligned column keeps its own axis. */ , _jsxruntime.jsx.call(void 0, _Slide2.default, { nav: "Owners", full: true, children: _jsxruntime.jsxs.call(void 0, 'div', { style: { height: "100%", display: "flex", flexDirection: "column", justifyContent: "center", gap: "clamp(14px, 2.4vh, 24px)", padding: "var(--gutter-y) var(--gutter)", boxSizing: "border-box" }, children: [ _jsxruntime.jsx.call(void 0, 'p', { className: "kicker", style: { margin: 0 }, children: "Ventura, California · 14 September 2022" }) , _jsxruntime.jsx.call(void 0, 'h2', { className: "headline", style: { margin: 0, maxWidth: "20ch", fontSize: "clamp(30px, 4.4vw, 60px)" }, children: "Earth is now our only shareholder." }) , _jsxruntime.jsx.call(void 0, 'p', { className: "lead", style: { margin: 0, maxWidth: "60ch" }, children: "The Chouinard family did not sell the company and did not take it public. They gave every share away, and split it so that control and money went to two different owners." }) /* The proportion, at the width of the stage. flex-grow 2 against flex-grow 98 with a zero flex-basis makes the two blocks literally 2% and 98% of the row. BOTH blocks are painted, and that is the fix that makes the drawing work. Left as white the 98% read as an unfilled input field with one mark in it rather than as a quantity, so the eye saw one thing and not two. The 98% now carries a flat terracotta tint of the same --primary the 2% is cut from, at a fraction of its weight: same family, different volume. The labels sit inside their own blocks so the bar is legible without the legend under it. The 2% block is far too narrow to letter, which is the point, so its label hangs underneath it in the row below. */ , _jsxruntime.jsxs.call(void 0, 'div', { style: { display: "flex", height: "clamp(64px, 10.5vh, 104px)", marginTop: "clamp(6px, 1.4vh, 14px)", border: "1px solid var(--hair)" }, children: [ _jsxruntime.jsx.call(void 0, 'div', { style: { flex: "2 0 0", background: "var(--accent)" },} ) , _jsxruntime.jsx.call(void 0, 'div', { style: { flex: "98 0 0", background: "color-mix(in srgb, var(--primary) 15%, var(--bg))", borderLeft: "1px solid var(--bg)", display: "flex", alignItems: "center", paddingInline: "clamp(12px, 1.6vw, 22px)" }, children: _jsxruntime.jsx.call(void 0, 'span', { className: "kicker", style: { margin: 0, color: "var(--fg)", opacity: 0.72 }, children: "98% nonvoting stock · the Holdfast Collective" }) }) ]}) , _jsxruntime.jsxs.call(void 0, 'div', { style: { display: "grid", gridTemplateColumns: "1fr 1fr", gap: "clamp(24px, 4vw, 72px)", marginTop: "clamp(4px, 1vh, 12px)" }, children: [ _jsxruntime.jsxs.call(void 0, 'div', { children: [ _jsxruntime.jsx.call(void 0, 'div', { className: "figure", style: { fontSize: "clamp(38px, 5vw, 70px)", lineHeight: 1 }, children: "2%" }) , _jsxruntime.jsx.call(void 0, 'h3', { style: { margin: "10px 0 6px", fontSize: "clamp(17px, 1.8vw, 22px)" }, children: "All of the voting stock, to the Patagonia Purpose Trust" }) , _jsxruntime.jsx.call(void 0, 'p', { className: "lead", style: { margin: 0, fontSize: "clamp(14px, 1.35vw, 17px)", maxWidth: "38ch" }, children: "The trust elects the board and exists to stop the purpose ever being sold off." }) ]}) , _jsxruntime.jsxs.call(void 0, 'div', { children: [ _jsxruntime.jsx.call(void 0, 'div', { className: "figure", style: { fontSize: "clamp(38px, 5vw, 70px)", lineHeight: 1 }, children: "98%" }) , _jsxruntime.jsx.call(void 0, 'h3', { style: { margin: "10px 0 6px", fontSize: "clamp(17px, 1.8vw, 22px)" }, children: "All of the nonvoting stock, to the Holdfast Collective" }) , _jsxruntime.jsx.call(void 0, 'p', { className: "lead", style: { margin: 0, fontSize: "clamp(14px, 1.35vw, 17px)", maxWidth: "38ch" }, children: "Profits not reinvested are paid to it as a dividend. $180 million has arrived since August 2022." }) ]}) ]}) , _jsxruntime.jsx.call(void 0, 'p', { className: "foot", style: { margin: 0, marginTop: "clamp(4px, 1.2vh, 12px)" }, children: "Stock split and the roughly $100m a year projection: Patagonia Works, 14 September 2022. The $180 million actually received: Patagonia 2025 Work in Progress Report, page 23." }) ]}) }) /* Voice, at full weight. This is the first of the deck's two pull-quote slides and the two are deliberately different objects: this one runs on a photograph, the one near the end is bare paper. was here first and it is the wrong tool on a light ground: Quote hard-codes the library's .cover-scrim, an 82 to 94 percent --bg wash, and this bright river frame came through it as an almost white haze with a sentence on it. So the shape is hand-rolled and INVERTED. The photograph runs full-bleed and completely untouched, and the type sits on a band of solid paper across the bottom third, which is where a caption goes in a picture magazine. Nothing is laid over anything. The band is sized to clear the angler: on slide one crops this portrait to a tall panel, whereas cover-cropping it to 16:9 here keeps the mountains, the caster and the river, and the band takes only the foreground cobble. Same asset, a different picture out of it. Reproduced word for word from the 2022 release rather than from the paraphrase of the same sentence that circulates online. The accent glyph supplies the quotation marks, so the text carries none. */ , _jsxruntime.jsxs.call(void 0, _Slide2.default, { nav: "Chouinard", full: true, children: [ _jsxruntime.jsx.call(void 0, 'img', { className: "cover-img", src: "/gallery/patagonia/cover.webp", alt: "", 'aria-hidden': true,} ) , _jsxruntime.jsx.call(void 0, 'div', { style: { position: "absolute", insetInline: 0, bottom: 0, zIndex: 1, background: "var(--bg)", borderTop: "1px solid var(--hair)", padding: "clamp(22px, 4vh, 40px) var(--gutter) clamp(20px, 3.6vh, 36px)", boxSizing: "border-box" }, children: _jsxruntime.jsxs.call(void 0, 'div', { style: { display: "grid", gridTemplateColumns: "minmax(0, 1fr) auto", gap: "clamp(20px, 4vw, 64px)", alignItems: "end" }, children: [ _jsxruntime.jsxs.call(void 0, 'div', { children: [ _jsxruntime.jsx.call(void 0, 'span', { className: "quote-mark", 'aria-hidden': true, style: { display: "block", fontSize: "clamp(40px, 4.4vw, 62px)", lineHeight: 0.7 }, children: "“" }) , _jsxruntime.jsx.call(void 0, 'p', { className: "quote-text", style: { margin: "clamp(6px, 1.2vh, 12px) 0 0", marginInline: 0, maxWidth: "46ch", textAlign: "left", fontSize: "clamp(19px, 2.5vw, 34px)" }, children: "Instead of extracting value from nature and transforming it into wealth, we are using the wealth Patagonia creates to protect the source." }) ]}) , _jsxruntime.jsxs.call(void 0, 'div', { style: { textAlign: "right", paddingBottom: 4 }, children: [ _jsxruntime.jsx.call(void 0, 'div', { style: { fontFamily: "var(--font-head)", fontWeight: 600, fontSize: "clamp(15px, 1.5vw, 19px)" }, children: "Yvon Chouinard" }) , _jsxruntime.jsx.call(void 0, 'p', { className: "foot", style: { margin: "4px 0 0", maxWidth: "26ch" }, children: "Founder. Patagonia Works press release, 14 September 2022. Photograph: Vidar Nordli-Mathisen." }) ]}) ]}) }) ]}) /* This was a band and it read as the gallery's signature defect: a headline with a thin strip of numbered items floating under it and a third of the stage empty. Same four dates, hand-rolled to occupy the frame instead. The years are set as figures rather than as 48px step rings, each column is a full-height ruled bay with the date at the top and the sentence pinned to the bottom, and the claim the whole slide rests on (one percent of SALES, since 1985) is stated once at display scale rather than being left inside a step body. is banned by VARIETY.md and would not have survived this load anyway: four dated milestones with two lines each push a vertical rail past the 720px stage and SlideFit shrinks the entire slide. 1985 and 2002 are two separate bays because collapsing them is the single most common factual error told about this company. */ , _jsxruntime.jsx.call(void 0, _Slide2.default, { nav: "Since 1973" , full: true, children: _jsxruntime.jsxs.call(void 0, 'div', { style: { height: "100%", display: "flex", flexDirection: "column", gap: "clamp(18px, 3.2vh, 36px)", padding: "var(--gutter-y) var(--gutter)", boxSizing: "border-box" }, children: [ _jsxruntime.jsxs.call(void 0, 'div', { style: { display: "grid", gridTemplateColumns: "1.3fr 0.7fr", gap: "clamp(24px, 4vw, 64px)", alignItems: "end" }, children: [ _jsxruntime.jsxs.call(void 0, 'div', { children: [ _jsxruntime.jsx.call(void 0, 'p', { className: "kicker", style: { margin: "0 0 clamp(10px, 1.6vh, 16px)" }, children: "1973 to 2026" }) , _jsxruntime.jsx.call(void 0, 'h2', { className: "headline", style: { margin: 0, maxWidth: "15ch", fontSize: "clamp(30px, 4.6vw, 64px)" }, children: "The giving came long before the giveaway." }) ]}) , _jsxruntime.jsxs.call(void 0, 'div', { children: [ _jsxruntime.jsx.call(void 0, 'div', { className: "figure", style: { fontSize: "clamp(48px, 6.6vw, 100px)", lineHeight: 0.9 }, children: "1%" }) , _jsxruntime.jsx.call(void 0, 'p', { className: "lead", style: { margin: "clamp(6px, 1vh, 12px) 0 0", fontSize: "clamp(14px, 1.4vw, 18px)", maxWidth: "28ch" }, children: "of sales, given away every year since 1985. One percent of sales, not of profits, in the good years and the bad ones." }) ]}) ]}) , _jsxruntime.jsx.call(void 0, 'div', { style: { flex: 1, minHeight: 0, display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: "clamp(16px, 2.2vw, 32px)" }, children: [ { year: "1973", body: "Yvon Chouinard founds Patagonia in Ventura, California, out of Chouinard Equipment, which made climbing hardware." }, { year: "1985", body: "The one percent pledge starts, unprompted and unaudited. Nobody made the company do it and nobody was watching." }, { year: "2002", body: "Chouinard and Craig Mathews of Blue Ribbon Flies create 1% for the Planet so other companies can take the same pledge. Nearly 5,000 businesses are now members." }, { year: "2022", body: "The family transfers every share to a trust and a nonprofit. The one percent carries on underneath the new structure, as it has since 1985." } ].map((bay) => ( _jsxruntime.jsxs.call(void 0, 'div', { style: { display: "flex", flexDirection: "column", justifyContent: "space-between", gap: "clamp(16px, 3vh, 32px)", borderTop: "1px solid var(--hair)", paddingTop: "clamp(12px, 2vh, 20px)" }, children: [ _jsxruntime.jsxs.call(void 0, 'div', { children: [ _jsxruntime.jsx.call(void 0, 'span', { className: "tick", style: { display: "block", marginBottom: "clamp(10px, 1.6vh, 18px)" },} ) , _jsxruntime.jsx.call(void 0, 'div', { className: "figure", style: { fontSize: "clamp(28px, 3.4vw, 50px)", lineHeight: 1 }, children: bay.year }) ]}) , _jsxruntime.jsx.call(void 0, 'p', { className: "lead", style: { margin: 0, fontSize: "clamp(13px, 1.32vw, 17px)", maxWidth: "26ch" }, children: bay.body }) ]}, bay.year) )) }) , _jsxruntime.jsx.call(void 0, 'p', { className: "foot", style: { margin: 0 }, children: "One percent of sales since 1985 and the founding of 1% for the Planet in 2002: patagonia.com and the 2025 Work in Progress Report, page 105. Patagonia's current press boilerplate puts its total contribution to environmental causes at more than $240 million." }) ]}) }) /* THE LIVE SLIDE, and what it replaced. This was "Stewards": six board seats set as a masthead, itself a rebuild of a of auto-initial avatars. It went because it was the deck's weakest slide and because it was answering a question slide two already answers. Slide two states what the two percent buys, which is the power to pick the board. Naming the board after that is a footnote given a whole stage, and every one of those six facts is the most perishable kind: a seat that changes hands. What replaces it is the question the deck had not answered anywhere. Slide two follows the money out of the family and into a nonprofit and stops there. This one follows it the rest of the way, to the thing it turns into, and the answer is ground. That is also the only subject in the deck that wants a three-dimensional object rather than a photograph or a number: a ridge has a FORM, and the argument this gallery is making is that a slide can hold one and a PDF cannot. THE RHYME WITH SLIDE NINE IS DELIBERATE. The deck closes on a real photographed ridge at twilight. This one is generated, raked by a low sun, and turning. Same silhouette, one of them a document of a place that exists and one of them plainly drawn by the machine you are reading it on. The foot line says which is which, in as many words, because a deck that spends nine slides refusing to overstate cannot quietly imply that it photographed a mountain. The band bleeds past both gutters (negative margin-inline) while the type stays inside them, so the ridge runs the full width of the stage and the words keep the measure the rest of the deck reads at. */ , _jsxruntime.jsx.call(void 0, _Slide2.default, { nav: "Ground", full: true, children: _jsxruntime.jsxs.call(void 0, 'div', { style: { height: "100%", display: "flex", flexDirection: "column", gap: "clamp(12px, 2vh, 22px)", padding: "var(--gutter-y) var(--gutter)", boxSizing: "border-box" }, children: [ _jsxruntime.jsxs.call(void 0, 'div', { style: { display: "grid", gridTemplateColumns: "1.32fr 0.68fr", gap: "clamp(24px, 4vw, 64px)", alignItems: "end" }, children: [ _jsxruntime.jsxs.call(void 0, 'div', { children: [ _jsxruntime.jsx.call(void 0, 'p', { className: "kicker", style: { margin: "0 0 clamp(10px, 1.6vh, 16px)" }, children: "Holdfast Collective · totals since 2022" }) , _jsxruntime.jsx.call(void 0, 'h2', { className: "headline", style: { margin: 0, maxWidth: "17ch", fontSize: "clamp(27px, 4vw, 56px)" }, children: "The dividend is spent buying ground and defending it." }) , _jsxruntime.jsx.call(void 0, 'p', { className: "lead", style: { margin: "clamp(10px, 1.6vh, 18px) 0 0", maxWidth: "56ch", fontSize: "clamp(14px, 1.45vw, 18px)" }, children: "The nonprofit that holds the ninety-eight percent has made 2,055 grants and committed $142 million to conservation and activism." }) ]}) , _jsxruntime.jsxs.call(void 0, 'div', { children: [ _jsxruntime.jsx.call(void 0, 'div', { className: "figure", style: { fontSize: "clamp(30px, 4.2vw, 66px)", lineHeight: 1 }, children: "645,385" }) , _jsxruntime.jsx.call(void 0, 'p', { className: "lead", style: { margin: "clamp(6px, 1vh, 12px) 0 0", fontSize: "clamp(13px, 1.35vw, 17px)", maxWidth: "24ch" }, children: "acres of land protected, so far." }) ]}) ]}) , _jsxruntime.jsx.call(void 0, 'div', { style: { flex: 1, minHeight: 210, marginInline: "calc(var(--gutter) * -1)", position: "relative" }, children: _jsxruntime.jsx.call(void 0, ReliefBlock, {} ) }) , _jsxruntime.jsx.call(void 0, 'p', { className: "foot", style: { margin: 0 }, children: "Holdfast Collective totals since 2022: Patagonia 2025 Work in Progress Report, as reported by David Gelles, 13 January 2026. The ridge above is generated terrain, drawn and lit live in this browser. It is not a photograph and it is not a real place." }) ]}) }) /* RETIRED. Kept as a note rather than as a slide, because the reasoning took a while and the next person to open this file will otherwise rebuild it. It was a of four auto-initial avatars in a thin band with half the stage empty under it, which is the clearest machine-made tell in this gallery: four sets of initials do not earn a slide. It was rebuilt around the thing the people are evidence FOR. The slide read: the family guides the trust, the trust elects and oversees the board, and that is the whole of the power the 2% carries. Six seats set as a masthead (Claire Chouinard taking the chair from Charles Conn in March 2026, Yvon Chouinard, Ryan Gellert, and the two arrivals from Decathlon and Levi Strauss), with the remaining five directors in the foot line so the list was not quietly cropped to the flattering half. Every seat was quoted from Patagonia Works, 2 March 2026, and the trust's authority from Patagonia Works, 14 September 2022. If it is ever wanted back, those are the two releases. It never had photographs, on purpose: eleven press headshots of wildly different crop, era and colour temperature look like a scraped page, and this repo holds no portrait rights. */ /* The photograph gets a full half of the frame with nothing laid over it, which is the only honest way to run a picture in this library. A bare in Split media is cover-cropped, correct for a photograph and wrong for a screenshot. "Repair is a radical act" is Patagonia's own headline on their Worn Wear page, not a line I wrote for them. */ , _jsxruntime.jsx.call(void 0, _Split2.default, { nav: "Repair", kicker: "Worn Wear" , title: "Repair is a radical act." , body: _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [ _jsxruntime.jsx.call(void 0, 'p', { className: "lead", children: "Patagonia has been mending clothes since 1976. Its repair centre in Reno, Nevada, opened in 1998 and now runs more than a hundred technicians, which the company calls the largest apparel mending facility in the United States." }) , _jsxruntime.jsx.call(void 0, 'p', { className: "foot", style: { marginTop: 20 }, children: "174,799 items fixed worldwide, 137,106 traded in and 212,000 resold in FY25 (1 May 2024 to 30 April 2025). Patagonia 2025 Work in Progress Report, page 100. Worn Wear page, patagonia.com." }) ]}) , media: _jsxruntime.jsx.call(void 0, 'img', { src: "/gallery/patagonia/repair.webp", alt: "A hand guiding a grey marled fleece under the presser foot of a sewing machine" ,} ) ,} ) /* The slide that argues against the brand, and the reason this deck can be trusted at all. A manifesto that only prints the flattering numbers is an advert. Patagonia published a 154-page report grading five public targets it set for itself in 2015, and it missed four of them; every cell below is theirs. highlightRow marks the one goal they actually met, which is what keeps the slide from reading as a pile-on. Two columns rather than a centred table under a centred headline: the copy column carries the framing and the source, the table carries the evidence, and the pair fills the stage edge to edge. */ , _jsxruntime.jsx.call(void 0, _Slide2.default, { nav: "Scorecard", full: true, children: _jsxruntime.jsxs.call(void 0, 'div', { style: { height: "100%", display: "grid", gridTemplateColumns: "0.68fr 1.32fr", gap: "clamp(26px, 4vw, 64px)", alignItems: "center", padding: "var(--gutter-y) var(--gutter)", boxSizing: "border-box" }, children: [ _jsxruntime.jsxs.call(void 0, 'div', { style: { display: "flex", flexDirection: "column", gap: "clamp(12px, 2vh, 20px)" }, children: [ _jsxruntime.jsx.call(void 0, 'p', { className: "kicker", style: { margin: 0 }, children: "Did we meet our 2025 goals?" }) , _jsxruntime.jsx.call(void 0, 'h2', { className: "headline", style: { margin: 0, maxWidth: "none", fontSize: "clamp(27px, 3.5vw, 50px)" }, children: "They marked their own homework, in public, and failed most of it." }) , _jsxruntime.jsx.call(void 0, 'p', { className: "lead", style: { margin: 0, fontSize: "clamp(15px, 1.6vw, 19px)" }, children: "Five targets, set in 2015 and published on their own website. Greenhouse gas emissions rose two percent last year, which the company puts down to selling more packs and duffels." }) , _jsxruntime.jsx.call(void 0, 'div', { className: "rule",} ) , _jsxruntime.jsxs.call(void 0, 'div', { children: [ _jsxruntime.jsx.call(void 0, 'div', { className: "figure", style: { fontSize: "clamp(44px, 5.8vw, 92px)", lineHeight: 1 }, children: "1 of 5" }) , _jsxruntime.jsx.call(void 0, 'p', { className: "foot", style: { margin: "8px 0 0" }, children: "targets met" }) ]}) ]}) , _jsxruntime.jsx.call(void 0, 'div', { children: _jsxruntime.jsx.call(void 0, _Table2.default, { columns: ["The goal set for 2025", { label: "Where it landed", align: "left" }], rows: [ ["Carbon neutral", "Dropped. Net zero by 2040 instead"], ["100% preferred materials", "84% of fabrics and trims"], ["50% of synthetics from secondary waste", "6%"], ["No forever chemicals in the line", "100% of new products"], ["A living wage in every supply factory", "39% of in-scope factories"] ], highlightRow: 3, caption: "Patagonia 2025 Work in Progress Report, pages 13 to 16." ,} ) }) ]}) }) /* Voice again, and the deck's turn. Same component as slide three, and the repetition is the point: this is a document made of statements. Bare paper this time, no photograph, which is the quietest slide in the deck and sits exactly where a manifesto should go quiet. The full clause from the founder's letter rather than the shorter pull quote Patagonia printed on its own report page: it is verbatim either way, and at nine words the slide was a sentence floating in an empty stage. At twenty-nine it fills the column and reads as an admission rather than a slogan. */ , _jsxruntime.jsx.call(void 0, _Quote2.default, { nav: "Not enough" , text: "For all the work we've done on our products and in our supply chain, and all the money we've given away to environmental nonprofits, it is still not enough." , name: "Yvon Chouinard" , role: "Founder. Founder's letter, 2025 Work in Progress Report, page 4" ,} ) /* The close: a full-bleed photograph and one sentence, which is the opposite move from the opening split and the last page of the report it is imitating. Hand-rolled rather than a because the mission is not a person speaking, and because the line wants to be left-aligned at display scale rather than centred at quote scale. The picture is a US National Park Service frame of a forested ridge line silhouetted under a violet twilight sky, and the important thing about it is that it is a DARK photograph on a light-ground deck. Two washes were tried before this one and both destroyed it. The library's .cover-scrim is an 88 to 94 percent --bg wash, which turned the frame into a grey haze with no ridge in it. A hand-rolled horizontal version of the same idea, 96 percent paper on the left thinning to 58 on the right, was better and still far too strong: at full size you could just make out a ridge line, and land.webp had already been contrast-pushed when it was prepared precisely to survive a wash like that, so it was being flattened twice. The fix is to stop washing it at all and change the ink instead. The gradient below DARKENS the lower half of the frame, which is a near-black conifer silhouette to begin with, and fades to nothing across the sky. The type is white, sits entirely inside the dark end, and the mountains, the treeline and the violet cloud above it are the photograph as shot. This is the only dark slide in the deck, it is the last one, and a manifesto closing by going dark is the right shape anyway. */ , _jsxruntime.jsxs.call(void 0, _Slide2.default, { nav: "Mission", full: true, children: [ _jsxruntime.jsx.call(void 0, 'img', { className: "cover-img", src: "/gallery/patagonia/land.webp", alt: "", 'aria-hidden': true,} ) , _jsxruntime.jsx.call(void 0, 'div', { 'aria-hidden': true, style: { position: "absolute", inset: 0, width: "100%", height: "100%", zIndex: 0, background: "linear-gradient(to top, rgba(10, 8, 16, 0.88) 0%, rgba(10, 8, 16, 0.76) 26%, rgba(10, 8, 16, 0.52) 46%, rgba(10, 8, 16, 0.18) 66%, rgba(10, 8, 16, 0) 84%)" },} ) , _jsxruntime.jsxs.call(void 0, 'div', { style: { position: "relative", zIndex: 1, height: "100%", display: "flex", flexDirection: "column", justifyContent: "flex-end", gap: "clamp(12px, 2vh, 22px)", padding: "var(--gutter-y) var(--gutter)", boxSizing: "border-box" }, children: [ _jsxruntime.jsx.call(void 0, Wordmark, { height: 24, invert: true,} ) , _jsxruntime.jsx.call(void 0, 'h2', { className: "display", style: { margin: 0, maxWidth: "17ch", fontSize: "clamp(38px, 6.2vw, 88px)", color: "#ffffff", textShadow: "0 2px 40px rgba(10, 8, 16, 0.55)" }, children: "We're in business to save our home planet." }) , _jsxruntime.jsx.call(void 0, 'p', { className: "foot", style: { margin: 0, maxWidth: "70ch", color: "rgba(255, 255, 255, 0.72)" }, children: "Patagonia's official reason for being, changed to this sentence in 2018 and quoted verbatim. 2025 Work in Progress Report, page 8. Photograph: Glacier National Park, US National Park Service." }) ]}) ]}) ]}) ); } exports.default = App;

Patagonia: Nothing we do is sustainable