\n\n \n \n
1,412 things you’ll never have to buy
\n
HEFT is a library of things under a railway arch in Peckham. Drills, tents, pasta machines and PA systems, lent by the week like library books.
\n
\n
£40 a year, or whatever you can pay. Five things out at a time.
\n
![\"Hand](\"https://images.unsplash.com/photo-1426927308491-6380b6a9936f?auto=format&fit=crop&w=1200&q=80\")
\n Borrow it, don’t buy it\n \n \n\n \n
\n Just returned·Carpet cleaner·6m ladder·Overlocker·Pressure washer·Disco ball·Wallpaper steamer·Cargo bike·Just returned·Carpet cleaner·6m ladder·Overlocker·Pressure washer·Disco ball·Wallpaper steamer·Cargo bike·\n
\n
\n
Live from the shelf
\n
The catalogue moves as things go out and come back. A few of this week’s regulars:
\n
\n - \n Nº 0114\n Makita combi drill\n Power tools\n On the shelf\n
\n - \n Nº 0892\n Six-person tent\n Camping\n Back Thursday\n
\n - \n Nº 0341\n Pasta machine\n Kitchen\n On the shelf\n
\n - \n Nº 1203\n Carpet cleaner\n Cleaning\n Back Saturday\n
\n - \n Nº 0577\n Angle grinder\n Power tools\n On the shelf\n
\n - \n Nº 0023\n Janome sewing machine\n Craft\n On the shelf\n
\n - \n Nº 0966\n PA system, two speakers\n Events\n Back Monday\n
\n - \n Nº 0408\n Hedge trimmer\n Garden\n On the shelf\n
\n
\n Browse all 1,412 things \n \n\n \n The stacks
\n \n - \n Power tools\n 212 things\n
![\"An](\"https://images.unsplash.com/photo-1564182842519-8a3b2af3e228?auto=format&fit=crop&w=600&q=80\")
\n \n - \n Garden\n 167 things\n
![\"A](\"https://images.unsplash.com/photo-1605117882932-f9e32b03fea9?auto=format&fit=crop&w=600&q=80\")
\n \n - \n Repair\n 138 things\n
![\"A](\"https://images.unsplash.com/photo-1530124566582-a618bc2615dc?auto=format&fit=crop&w=600&q=80\")
\n \n - \n Kitchen\n 96 things\n
![\"Two](\"https://images.unsplash.com/photo-1556910103-1c02745aae4d?auto=format&fit=crop&w=600&q=80\")
\n \n - \n Decorating\n 77 things\n
![\"A](\"https://images.unsplash.com/photo-1504148455328-c376907d081c?auto=format&fit=crop&w=600&q=80\")
\n \n - \n Camping\n 54 things\n
![\"The](\"https://images.unsplash.com/photo-1504280390367-361c6d9f38f4?auto=format&fit=crop&w=600&q=80\")
\n \n
\n \n\n \n How it works
\n \n - \n 1\n
Join
\n £40 a year, or pay what you can. Bring something with your address on it, once, and you’re a member for good.
\n \n - \n 2\n
Reserve
\n Book online or wander in on a Saturday. Up to five things out at a time, a week each, renew twice.
\n \n - \n 3\n
Return
\n Working, clean-ish, on time. Late fees are 50p a day and buy biscuits for the volunteers.
\n \n
\n \n\n \n \n
One membership, three prices
\n
Same shelf, same five-things-at-a-time, whichever you pick.
\n
\n - \n Standard\n £40 a year\n Covers insurance, repairs and the kettle.\n
\n - \n Solidarity\n £70 a year\n Pays for yours and quietly covers someone else’s.\n
\n - \n Pay what you can\n From £0\n No questions, no different-coloured card.\n
\n
\n
Join at the desk or online\n
![\"Item](\"https://images.unsplash.com/photo-1581244277943-fe4a9c777189?auto=format&fit=crop&w=800&q=80\")
\n Item Nº 0072. The little screwdriver wallet everyone forgets to return.\n \n \n\n \n Visit
\n \n
\n
Find us
\n
Arch 23, Blenheim Grove
Peckham, London SE15 4QS
Two minutes from Peckham Rye station.
\n
\n
\n
Open
\n
Tuesday to Friday, 12:00 to 19:00
Saturday, 10:00 to 17:00
Sunday and Monday, the dog rests.
\n
\n
\n
Say hello
\n
desk@heft.example
Donations of working tools welcome,
Saturdays only, please.
\n
\n
HEFT
\n \n\n \n\n \n\n \n\n\n\n"},{"name":"PRODUCT.md","content":"# Product\n\n## Register\n\nbrand\n\n## Users\n\nNeighbours in Peckham and south-east London: renters with no shed, occasional DIY-ers, allotment holders, party throwers, people who need a carpet cleaner exactly once. They arrive sceptical that borrowing can be easier than buying.\n\n## Product Purpose\n\nHEFT is a fictional community library of things. Members borrow tools, camping kit, kitchen gear and event equipment by the week, like library books. The site exists to make joining feel obvious: show the catalogue, explain the three steps, take the membership.\n\n## Brand Personality\n\nSturdy, neighbourly, cheeky. A powder-coated steel toolbox painted lipstick rose. Confident hand-painted-sign energy, never corporate, never precious.\n\n## Anti-references\n\n- Tool-hire machismo: black/orange industrial sites, aggressive condensed caps on carbon-fibre textures.\n- SaaS cream minimalism: beige hero, eyebrow labels, identical feature cards.\n- Editorial-serif restraint: this is a workshop, not a magazine.\n\n## Design Principles\n\n1. The catalogue is the hero. Real item names, catalogue numbers and availability beat abstract promises.\n2. Drench, don't decorate. One rose carries the brand; marigold only marks availability and action.\n3. Sign-painter typography. Poster-condensed display type used at full size or not at all.\n4. Cheek in the copy, clarity in the structure. Jokes live in sentences, never in navigation or labels.\n\n## Accessibility & Inclusion\n\nWCAG 2.1 AA. Body text ≥4.5:1 everywhere including on rose surfaces. Full reduced-motion alternatives for the ticker and load animation. Semantic landmarks, skip link, real list/heading structure.\n"},{"name":"README.md","content":"# Blnq Project\n"}],"folders":[{"folder":"css","files":[{"name":"styles.css","content":"/* HEFT — Library of Things\n Palette: lipstick-rose drench, marigold for action and availability.\n Type: Anton (sign-painter display) / Schibsted Grotesk (body) / Spline Sans Mono (catalogue codes). */\n\n* {\n\tbox-sizing: border-box;\n}\n\n:root {\n\tcolor-scheme: light;\n\n\t--rose: oklch(0.55 0.16 353);\n\t--rose-deep: oklch(0.38 0.13 353);\n\t--rose-ghost: oklch(0.96 0.015 353);\n\t--gold: oklch(0.86 0.145 88);\n\t--gold-deep: oklch(0.78 0.15 84);\n\t--bg: oklch(1 0 0);\n\t--ink: oklch(0.2 0.025 353);\n\t--muted: oklch(0.44 0.025 353);\n\t--line: oklch(0.89 0.02 353);\n\t--paper-on-rose: oklch(0.97 0.012 353);\n\n\t--font-display: 'Anton', 'Arial Narrow', sans-serif;\n\t--font-body: 'Schibsted Grotesk', system-ui, sans-serif;\n\t--font-mono: 'Spline Sans Mono', monospace;\n\n\t--pad-x: clamp(1.25rem, 5vw, 4rem);\n\t--measure: 72rem;\n\n\t--z-sticky: 10;\n}\n\nbody {\n\tmargin: 0;\n\tbackground: var(--bg);\n\tcolor: var(--ink);\n\tfont-family: var(--font-body);\n\tfont-size: 1.0625rem;\n\tline-height: 1.55;\n}\n\nh1, h2, h3 {\n\tfont-family: var(--font-display);\n\tfont-weight: 400;\n\ttext-transform: uppercase;\n\tletter-spacing: 0.015em;\n\tline-height: 1;\n\tmargin: 0;\n\ttext-wrap: balance;\n}\n\np {\n\ttext-wrap: pretty;\n\tmargin: 0;\n}\n\nimg {\n\tdisplay: block;\n\tmax-width: 100%;\n}\n\n::selection {\n\tbackground: var(--gold);\n\tcolor: var(--ink);\n}\n\n:focus-visible {\n\toutline: 3px solid var(--rose);\n\toutline-offset: 2px;\n}\n\n.site-head :focus-visible,\n.hero :focus-visible,\n.how :focus-visible,\n.visit :focus-visible {\n\toutline-color: var(--gold);\n}\n\n.skip-link {\n\tposition: absolute;\n\tleft: 1rem;\n\ttop: -4rem;\n\tz-index: calc(var(--z-sticky) + 1);\n\tbackground: var(--ink);\n\tcolor: var(--bg);\n\tpadding: 0.6rem 1rem;\n\tborder-radius: 6px;\n\ttext-decoration: none;\n\ttransition: top 0.15s ease;\n}\n\n.skip-link:focus {\n\ttop: 1rem;\n}\n\n/* ---------- Header ---------- */\n\n.site-head {\n\tposition: sticky;\n\ttop: 0;\n\tz-index: var(--z-sticky);\n\tdisplay: flex;\n\talign-items: center;\n\tgap: clamp(1rem, 3vw, 2.5rem);\n\tpadding: 0.85rem var(--pad-x);\n\tbackground: var(--rose);\n\tcolor: #fff;\n}\n\n.site-head--scrolled {\n\tbox-shadow: 0 1px 0 oklch(0.3 0.1 353), 0 8px 24px oklch(0.3 0.12 353 / 0.25);\n}\n\n.brand {\n\tfont-family: var(--font-display);\n\tfont-size: 1.7rem;\n\tletter-spacing: 0.03em;\n\tcolor: #fff;\n\ttext-decoration: none;\n\tline-height: 1;\n}\n\n.brand-mark {\n\tcolor: var(--gold);\n\tmargin-left: 0.15em;\n}\n\n.site-nav {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\tgap: clamp(0.75rem, 2vw, 1.75rem);\n}\n\n.site-nav a {\n\tcolor: #fff;\n\tfont-weight: 500;\n\ttext-decoration: none;\n\tpadding: 0.25rem 0;\n\tborder-bottom: 3px solid transparent;\n}\n\n.site-nav a:hover {\n\tborder-bottom-color: var(--gold);\n}\n\n.site-head-cta {\n\tmargin-left: auto;\n}\n\n/* ---------- Buttons ---------- */\n\n.btn {\n\tdisplay: inline-flex;\n\talign-items: center;\n\tgap: 0.5rem;\n\tpadding: 0.8rem 1.4rem;\n\tborder-radius: 8px;\n\tfont-weight: 700;\n\tfont-size: 1rem;\n\ttext-decoration: none;\n\ttransition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;\n}\n\n.btn-gold {\n\tbackground: var(--gold);\n\tcolor: var(--ink);\n}\n\n.btn-gold:hover {\n\tbackground: var(--gold-deep);\n}\n\n.btn-rose {\n\tbackground: var(--rose);\n\tcolor: #fff;\n}\n\n.btn-rose:hover {\n\tbackground: var(--rose-deep);\n}\n\n.btn-ghost {\n\tborder: 2px solid #fff;\n\tcolor: #fff;\n}\n\n.btn-ghost:hover {\n\tbackground: oklch(1 0 0 / 0.14);\n}\n\n/* ---------- Hero ---------- */\n\n.hero {\n\tbackground: var(--rose);\n\tcolor: #fff;\n\tdisplay: grid;\n\tgrid-template-columns: 1.1fr 0.9fr;\n\tgap: clamp(2.5rem, 6vw, 5rem);\n\talign-items: center;\n\tpadding: clamp(3.5rem, 8vw, 6.5rem) var(--pad-x) clamp(4rem, 9vw, 7rem);\n}\n\n.hero h1 {\n\tfont-size: clamp(3rem, 7.5vw, 5.5rem);\n\tline-height: 0.97;\n}\n\n.hero-lead {\n\tmargin-top: 1.5rem;\n\tfont-size: clamp(1.1rem, 1.6vw, 1.3rem);\n\tmax-width: 48ch;\n\tcolor: var(--paper-on-rose);\n}\n\n.hero-cta {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\tgap: 0.85rem;\n\tmargin-top: 2.25rem;\n}\n\n.hero-note {\n\tmargin-top: 1.25rem;\n\tfont-size: 0.95rem;\n\tcolor: var(--paper-on-rose);\n}\n\n.hero-photo {\n\tmargin: 0;\n\tposition: relative;\n\ttransform: rotate(1.5deg);\n\tbackground: var(--rose-deep);\n\tborder: 3px solid var(--gold);\n\tborder-radius: 10px;\n\toverflow: hidden;\n}\n\n.hero-photo img {\n\twidth: 100%;\n\theight: auto;\n\taspect-ratio: 4 / 5;\n\tobject-fit: cover;\n\tfilter: grayscale(1) contrast(1.08);\n\tmix-blend-mode: luminosity;\n}\n\n.sticker {\n\tposition: absolute;\n\tleft: -0.25rem;\n\tbottom: 1.25rem;\n\ttransform: rotate(-4deg);\n\tbackground: var(--gold);\n\tcolor: var(--ink);\n\tfont-family: var(--font-display);\n\ttext-transform: uppercase;\n\tletter-spacing: 0.04em;\n\tfont-size: 1.05rem;\n\tpadding: 0.55rem 0.9rem;\n\tborder-radius: 4px;\n}\n\n/* ---------- Ticker ---------- */\n\n.ticker {\n\tbackground: var(--gold);\n\tcolor: var(--ink);\n\toverflow: hidden;\n}\n\n.ticker-track {\n\tdisplay: flex;\n\tgap: 1.5rem;\n\twidth: max-content;\n\tpadding: 0.7rem 0;\n\tfont-family: var(--font-display);\n\ttext-transform: uppercase;\n\tletter-spacing: 0.05em;\n\tfont-size: 1.05rem;\n\twhite-space: nowrap;\n\tanimation: ticker 32s linear infinite;\n}\n\n@keyframes ticker {\n\tto {\n\t\ttransform: translateX(-50%);\n\t}\n}\n\n/* ---------- Sections (shared) ---------- */\n\n.catalogue,\n.stacks,\n.membership {\n\tmax-width: var(--measure);\n\tmargin-inline: auto;\n\tpadding: clamp(4rem, 9vw, 6.5rem) var(--pad-x);\n}\n\n.section-head h2,\n.stacks h2 {\n\tfont-size: clamp(2.25rem, 5vw, 3.75rem);\n}\n\n.section-head p {\n\tmargin-top: 1rem;\n\tfont-size: 1.1rem;\n\tcolor: var(--muted);\n\tmax-width: 55ch;\n}\n\n/* ---------- Catalogue ---------- */\n\n.cat-list {\n\tlist-style: none;\n\tmargin: 2.5rem 0 0;\n\tpadding: 0;\n\tborder-top: 1px solid var(--line);\n}\n\n.cat-row {\n\tdisplay: grid;\n\tgrid-template-columns: 6.5rem 1fr auto auto;\n\talign-items: center;\n\tgap: 0.35rem 1.5rem;\n\tpadding: 1.05rem 0.5rem;\n\tborder-bottom: 1px solid var(--line);\n\ttransition: background 0.15s ease;\n}\n\n.cat-row:hover {\n\tbackground: var(--rose-ghost);\n}\n\n.cat-code {\n\tfont-family: var(--font-mono);\n\tfont-size: 0.85rem;\n\tcolor: var(--muted);\n}\n\n.cat-name {\n\tfont-weight: 700;\n\tfont-size: 1.15rem;\n}\n\n.cat-tag {\n\tcolor: var(--muted);\n\tfont-size: 0.95rem;\n}\n\n.pill {\n\tfont-size: 0.8rem;\n\tfont-weight: 700;\n\tpadding: 0.3rem 0.8rem;\n\tborder-radius: 999px;\n\twhite-space: nowrap;\n\tjustify-self: end;\n}\n\n.pill-in {\n\tbackground: var(--gold);\n\tcolor: var(--ink);\n}\n\n.pill-out {\n\tborder: 1.5px solid var(--line);\n\tcolor: var(--muted);\n}\n\n.link-big {\n\tdisplay: inline-flex;\n\talign-items: center;\n\tgap: 0.6rem;\n\tmargin-top: 2.25rem;\n\tfont-family: var(--font-display);\n\ttext-transform: uppercase;\n\tletter-spacing: 0.03em;\n\tfont-size: 1.4rem;\n\tcolor: var(--ink);\n\ttext-decoration: none;\n\tborder-bottom: 3px solid var(--gold);\n\tpadding-bottom: 0.2rem;\n}\n\n.link-big:hover {\n\tcolor: var(--rose);\n}\n\n.link-big svg {\n\twidth: 1.1em;\n\theight: 1.1em;\n}\n\n/* ---------- The stacks ---------- */\n\n.stack-list {\n\tlist-style: none;\n\tmargin: 2.25rem 0 0;\n\tpadding: 0;\n\tborder-top: 2px solid var(--ink);\n}\n\n.stack-row {\n\tdisplay: grid;\n\tgrid-template-columns: 1fr auto auto;\n\talign-items: center;\n\tgap: clamp(1rem, 4vw, 2.5rem);\n\tpadding: 1.1rem 0.5rem;\n\tborder-bottom: 2px solid var(--ink);\n}\n\n.stack-name {\n\tfont-family: var(--font-display);\n\ttext-transform: uppercase;\n\tletter-spacing: 0.015em;\n\tfont-size: clamp(1.9rem, 5vw, 3.6rem);\n\tline-height: 1;\n\ttransition: color 0.15s ease;\n}\n\n.stack-count {\n\tfont-family: var(--font-mono);\n\tfont-size: 0.95rem;\n\tcolor: var(--muted);\n\twhite-space: nowrap;\n}\n\n.stack-photo {\n\twidth: clamp(5.5rem, 12vw, 9rem);\n\theight: auto;\n\taspect-ratio: 4 / 3;\n\tobject-fit: cover;\n\tborder-radius: 6px;\n\ttransform: rotate(2deg);\n\ttransition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);\n}\n\n.stack-row:nth-child(even) .stack-photo {\n\ttransform: rotate(-2deg);\n}\n\n.stack-row:hover .stack-name {\n\tcolor: var(--rose);\n}\n\n.stack-row:hover .stack-photo {\n\ttransform: rotate(0deg) scale(1.08);\n}\n\n/* ---------- How it works ---------- */\n\n.how {\n\tbackground: var(--rose-deep);\n\tcolor: #fff;\n\tpadding: clamp(4rem, 9vw, 6.5rem) var(--pad-x);\n}\n\n.how > h2,\n.how > ol {\n\tmax-width: var(--measure);\n\tmargin-inline: auto;\n}\n\n.how h2 {\n\tfont-size: clamp(2.25rem, 5vw, 3.75rem);\n}\n\n.steps {\n\tlist-style: none;\n\tpadding: 0;\n\tmargin-top: clamp(2.5rem, 5vw, 3.5rem);\n\tdisplay: grid;\n\tgrid-template-columns: repeat(3, 1fr);\n\tgap: clamp(2rem, 5vw, 3.5rem);\n}\n\n.step-n {\n\tdisplay: block;\n\tfont-family: var(--font-display);\n\tfont-size: clamp(3.25rem, 6vw, 5rem);\n\tline-height: 1;\n\tcolor: var(--gold);\n}\n\n.step h3 {\n\tfont-size: 1.5rem;\n\tmargin: 0.85rem 0 0.5rem;\n}\n\n.step p {\n\tcolor: var(--paper-on-rose);\n\tmax-width: 36ch;\n}\n\n/* ---------- Membership ---------- */\n\n.membership {\n\tdisplay: grid;\n\tgrid-template-columns: 1.15fr 0.85fr;\n\tgap: clamp(2.5rem, 6vw, 5rem);\n\talign-items: center;\n}\n\n.membership h2 {\n\tfont-size: clamp(2.25rem, 5vw, 3.75rem);\n}\n\n.membership-lead {\n\tmargin-top: 1rem;\n\tfont-size: 1.1rem;\n\tcolor: var(--muted);\n}\n\n.tier-list {\n\tlist-style: none;\n\tmargin: 2rem 0 0;\n\tpadding: 0;\n\tborder-top: 1px solid var(--line);\n}\n\n.tier {\n\tdisplay: grid;\n\tgrid-template-columns: 1fr auto;\n\tgap: 0.2rem 1.5rem;\n\tpadding: 1.1rem 0.25rem;\n\tborder-bottom: 1px solid var(--line);\n}\n\n.tier-name {\n\tfont-weight: 700;\n\tfont-size: 1.2rem;\n}\n\n.tier-price {\n\tfont-family: var(--font-display);\n\tfont-size: 1.35rem;\n\tcolor: var(--rose);\n\ttext-transform: uppercase;\n\tjustify-self: end;\n}\n\n.tier-note {\n\tgrid-column: 1 / -1;\n\tcolor: var(--muted);\n\tfont-size: 0.98rem;\n}\n\n.membership-copy .btn {\n\tmargin-top: 2.25rem;\n}\n\n.membership-photo {\n\tmargin: 0;\n}\n\n.membership-photo img {\n\twidth: 100%;\n\theight: auto;\n\taspect-ratio: 4 / 3;\n\tobject-fit: cover;\n\tborder-radius: 10px;\n\ttransform: rotate(-1.5deg);\n}\n\n.membership-photo figcaption {\n\tmargin-top: 1rem;\n\tfont-family: var(--font-mono);\n\tfont-size: 0.85rem;\n\tcolor: var(--muted);\n}\n\n/* ---------- Visit ---------- */\n\n.visit {\n\tbackground: var(--rose);\n\tcolor: #fff;\n\tpadding: clamp(4rem, 9vw, 6.5rem) var(--pad-x) 0;\n\toverflow: hidden;\n}\n\n.visit > h2,\n.visit > .visit-grid {\n\tmax-width: var(--measure);\n\tmargin-inline: auto;\n}\n\n.visit h2 {\n\tfont-size: clamp(2.25rem, 5vw, 3.75rem);\n}\n\n.visit-grid {\n\tdisplay: grid;\n\tgrid-template-columns: repeat(3, 1fr);\n\tgap: clamp(1.5rem, 4vw, 3rem);\n\tmargin-top: clamp(2rem, 5vw, 3rem);\n}\n\n.visit-block h3 {\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 0.5rem;\n\tfont-size: 1.2rem;\n}\n\n.visit-block h3 svg {\n\twidth: 1.15em;\n\theight: 1.15em;\n\tcolor: var(--gold);\n}\n\n.visit-block p {\n\tmargin-top: 0.75rem;\n\tcolor: var(--paper-on-rose);\n}\n\n.visit-block a {\n\tcolor: #fff;\n\ttext-decoration-color: var(--gold);\n\ttext-decoration-thickness: 2px;\n\ttext-underline-offset: 3px;\n}\n\n.visit-giant {\n\tfont-family: var(--font-display);\n\tfont-size: clamp(5rem, 19vw, 15rem);\n\tline-height: 0.78;\n\tletter-spacing: 0.02em;\n\ttext-align: center;\n\tcolor: var(--gold);\n\tmargin-top: clamp(2.5rem, 6vw, 4rem);\n\tuser-select: none;\n}\n\n/* ---------- Footer ---------- */\n\n.site-foot {\n\tbackground: var(--ink);\n\tcolor: oklch(0.82 0.02 353);\n\tpadding: 1.5rem var(--pad-x);\n\tfont-size: 0.9rem;\n\ttext-align: center;\n}\n\n/* ---------- Motion ---------- */\n\n@media (prefers-reduced-motion: no-preference) {\n\thtml {\n\t\tscroll-behavior: smooth;\n\t}\n\n\t.hero-copy > * {\n\t\tanimation: rise 0.7s cubic-bezier(0.22, 1, 0.36, 1) backwards;\n\t}\n\n\t.hero-copy > *:nth-child(2) { animation-delay: 0.08s; }\n\t.hero-copy > *:nth-child(3) { animation-delay: 0.16s; }\n\t.hero-copy > *:nth-child(4) { animation-delay: 0.24s; }\n\n\t.hero-photo {\n\t\tanimation: rise-tilt 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.2s backwards;\n\t}\n}\n\n@keyframes rise {\n\tfrom {\n\t\topacity: 0;\n\t\ttransform: translateY(18px);\n\t}\n}\n\n@keyframes rise-tilt {\n\tfrom {\n\t\topacity: 0;\n\t\ttransform: translateY(18px) rotate(1.5deg);\n\t}\n\tto {\n\t\topacity: 1;\n\t\ttransform: translateY(0) rotate(1.5deg);\n\t}\n}\n\n@media (prefers-reduced-motion: reduce) {\n\t.ticker-track {\n\t\tanimation: none;\n\t}\n}\n\n/* ---------- Responsive ---------- */\n\n@media (max-width: 900px) {\n\t.hero {\n\t\tgrid-template-columns: 1fr;\n\t}\n\n\t.hero-photo {\n\t\tmax-width: 26rem;\n\t}\n\n\t.steps {\n\t\tgrid-template-columns: 1fr;\n\t\tgap: 2rem;\n\t}\n\n\t.membership {\n\t\tgrid-template-columns: 1fr;\n\t}\n\n\t.visit-grid {\n\t\tgrid-template-columns: 1fr;\n\t}\n}\n\n@media (max-width: 760px) {\n\t.site-head {\n\t\tflex-wrap: wrap;\n\t\trow-gap: 0.5rem;\n\t}\n\n\t.site-nav {\n\t\torder: 3;\n\t\twidth: 100%;\n\t}\n}\n\n@media (max-width: 640px) {\n\t.cat-row {\n\t\tgrid-template-columns: 1fr auto;\n\t\tgrid-template-areas:\n\t\t\t\"code pill\"\n\t\t\t\"name name\"\n\t\t\t\"tag tag\";\n\t}\n\n\t.cat-code { grid-area: code; }\n\t.cat-name { grid-area: name; }\n\t.cat-tag { grid-area: tag; }\n\t.pill { grid-area: pill; }\n\n\t.stack-row {\n\t\tgrid-template-columns: 1fr auto;\n\t\tgrid-template-areas:\n\t\t\t\"name photo\"\n\t\t\t\"count photo\";\n\t}\n\n\t.stack-name { grid-area: name; }\n\t.stack-count { grid-area: count; }\n\t.stack-photo { grid-area: photo; }\n}\n"}],"folders":[]},{"folder":"js","files":[{"name":"main.js","content":"// HEFT — Library of Things\n\nlucide.createIcons();\n\n// Header: add a hairline once the page has scrolled past the hero's first fold\nconst head = document.querySelector('.site-head');\nconst onScroll = () => head.classList.toggle('site-head--scrolled', window.scrollY > 24);\nonScroll();\nwindow.addEventListener('scroll', onScroll, { passive: true });\n"}],"folders":[]},{"folder":"other","files":[{"name":"main.sketch","content":""}],"folders":[],"collapsed":true}]},"variants":null,"createdAt":"2026-06-11T11:56:52.568Z","updatedAt":"2026-06-11T12:10:44.029Z"}}