/* ================================================================= ByJunHeng — brutalist editorial photography landing page Direction: the 2819 Church look, turned photographic. Strategy: newsprint paper canvas, near-black ink, one safelight red. ================================================================= */ /* ---- Tokens ---------------------------------------------------- */ :root{ /* color — OKLCH. Neutral cool-paper (deliberately NOT warm cream). */ --paper: oklch(0.962 0.0015 90); /* page canvas */ --paper-2: oklch(0.93 0.002 90); /* slightly deeper panels */ --paper-card: oklch(0.985 0.001 90); /* card / inset surfaces */ --ink: oklch(0.18 0.004 60); /* headlines, near-black */ --ink-2: oklch(0.30 0.004 60); /* body copy (~10:1 on paper) */ --muted: oklch(0.44 0.004 60); /* secondary text (>=4.5:1) */ --faint: oklch(0.62 0.004 60); /* decorative labels only */ --line: oklch(0.18 0.004 60 / 0.16); /* hairlines */ --line-2: oklch(0.18 0.004 60 / 0.52); /* card borders */ --red: oklch(0.565 0.224 26); /* display red: big words, rules, dot, fills */ --red-ink: oklch(0.486 0.196 26); /* small red text/links — AA on paper */ --red-strong: oklch(0.5 0.214 26); /* red hover */ --red-soft: oklch(0.565 0.224 26 / 0.12); --on-red: oklch(0.99 0.01 90); /* type */ --sans:"Inter","Grotesk Fallback",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; --display:"Space Grotesk","Grotesk Fallback",system-ui,sans-serif; /* 2819's REAL pair (verified in their source 2026-07-02): Space Grotesk display + Inter body */ --mono:ui-monospace,"SF Mono","JetBrains Mono",Menlo,Consolas,monospace; /* fluid type ramp */ --fs-hero: clamp(3.6rem, 17.5vw, 13.5rem); /* one-word hero lines */ --fs-creed: clamp(2.9rem, 11vw, 8.5rem); /* THE FRAME / NOTHING LESS */ --fs-mega: clamp(3rem, 11.5vw, 9rem); /* STILLS / MOTION / footer mark */ --fs-h2: clamp(2rem, 4.6vw, 3.5rem); /* section / mission statement */ --fs-card: clamp(1.9rem, 3.2vw, 2.9rem); /* card titles */ --fs-lede: clamp(1.06rem, 1.5vw, 1.28rem); --fs-body: 1.0625rem; --fs-sm: 0.875rem; --fs-label: 0.72rem; /* spacing */ --gut: clamp(1.15rem, 4.5vw, 4.5rem); /* page side gutter */ --sec: clamp(4.5rem, 11vw, 11rem); /* section rhythm */ --maxw: 1360px; --ease: cubic-bezier(.16,1,.3,1); /* ease-out-expo-ish */ --dur: .55s; /* 2819 motion voice (extracted from the reference site's bundle): --ease-2819: their menu/tween ease [.8,.2,0,1] — slow start, hard snap, long settle --spring: their appear spring (bounce .2) — rises with a ~1.5% overshoot that settles */ --ease-2819: cubic-bezier(.8,.2,0,1); --ease-2819-soft: cubic-bezier(.6,.2,0,1); --spring: cubic-bezier(.3,1.25,.4,1); /* bezier stand-in; upgraded to the true spring below */ /* z scale */ --z-rail: 5; --z-menu: 70; --z-nav: 80; --z-grain: 90; --z-skip: 100; --z-load: 110; --z-edge: 60; /* soft edge-blur frame — below nav/menu so the UI stays crisp */ } /* the real sampled spring curve (Framer bounce .2), where linear() is supported */ @supports (transition-timing-function: linear(0, 1)) { :root{--spring: linear(0, 0.0912, 0.2798, 0.4827, 0.6593, 0.7954, 0.8909, 0.9523, 0.9882, 1.0066, 1.0139, 1.0151, 1.0131, 1.0101, 1.0071, 1.0046, 1.0027, 1.0014, 1.0006, 1.0001, 1)} } /* ---- Space Grotesk + Inter (Google Fonts, loaded per-page in ) ---- 2819's REAL type pair, read from their page source on 2026-07-02 (the earlier Founders Grotesk attribution was wrong; its woff2s remain in assets/fonts unused). */ /* metric-matched fallback (local Arial) to limit layout shift during font swap */ @font-face{ font-family:"Grotesk Fallback"; src:local("Arial"); ascent-override:92%; descent-override:24%; line-gap-override:0%; size-adjust:101%; } /* ---- Reset ----------------------------------------------------- */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;background:var(--paper)} /* paper behind the rubber-band overscroll — no white flash */ @media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}} body{ margin:0; background:var(--paper); color:var(--ink-2); font-family:var(--sans); font-size:var(--fs-body); line-height:1.6; font-kerning:normal; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:clip; } h1,h2,h3,h4,p,figure,ul,form{margin:0} ul{list-style:none;padding:0} img{display:block;max-width:100%;height:auto} a{color:inherit;text-decoration:none} button{font:inherit;color:inherit;background:none;border:none;cursor:pointer} :focus-visible{outline:3px solid var(--red);outline-offset:3px} ::selection{background:var(--red);color:var(--on-red)} /* Lenis smooth scroll */ html.lenis,html.lenis body{height:auto} .lenis.lenis-smooth{scroll-behavior:auto!important} .lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain} .lenis.lenis-stopped{overflow:hidden} /* ---- Paper grain overlay -------------------------------------- */ .grain{ position:fixed; inset:0; z-index:var(--z-grain); pointer-events:none; opacity:.5; mix-blend-mode:multiply; /* crumpled paper: soft folds (feDiffuseLighting on low-freq noise) multiplied with a fine grain, kept subtle */ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600'%3E%3Cfilter id='c'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.012' numOctaves='5' seed='6' stitchTiles='stitch' result='n'/%3E%3CfeDiffuseLighting in='n' lighting-color='%23ffffff' surfaceScale='1.3' diffuseConstant='1.1'%3E%3CfeDistantLight azimuth='235' elevation='60'/%3E%3C/feDiffuseLighting%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23c)'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='0.38'/%3E%3C/svg%3E"); background-size:600px 600px,200px 200px; background-blend-mode:multiply; } /* ---- Layout helpers ------------------------------------------- */ .wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)} .skip{ position:absolute;left:1rem;top:-3rem;z-index:var(--z-skip); background:var(--ink);color:var(--paper);padding:.6rem 1rem;font-weight:700; border-radius:2px;transition:top .2s var(--ease); } .skip:focus{top:1rem} /* bracketed link motif: ( LABEL ↗ ) */ .brk{ display:inline-flex;align-items:center;gap:.55em; font-weight:800;font-size:var(--fs-label);letter-spacing:.1em;text-transform:uppercase; color:var(--ink);line-height:1;padding:.45em 0;position:relative; } .brk::before,.brk::after{color:var(--red);font-weight:700;transition:transform .35s var(--ease)} .brk::before{content:"("}.brk::after{content:")"} .brk .arw{color:var(--red);transition:transform .35s var(--ease)} @media (hover:hover){ .brk:hover::before{transform:translateX(-.18em)} .brk:hover::after{transform:translateX(.18em)} .brk:hover .arw{transform:translate(.18em,-.18em)} } .brk--red{color:var(--red-ink)} /* status pill: ● NEW FILM */ .status{display:flex;flex-direction:column;gap:.35rem;align-items:flex-start} .status .live{ display:inline-flex;align-items:center;gap:.5rem; font-weight:800;font-size:var(--fs-label);letter-spacing:.13em;text-transform:uppercase;color:var(--red-ink); } .dot{width:.62rem;height:.62rem;border-radius:50%;background:var(--red);flex:none;position:relative} .dot::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--red);animation:ping 2.4s var(--ease) infinite} @keyframes ping{0%{transform:scale(1);opacity:.7}70%,100%{transform:scale(2.6);opacity:0}} /* shared B&W photo treatment */ .ph{position:relative;overflow:hidden;background:var(--paper-2)} /* showcase photos (creed, mission, split) run in full colour — the hero keeps its dark grayscale masthead treatment via the more-specific .hero-media rule below */ .ph img{width:100%;height:100%;object-fit:cover;filter:contrast(1.03) saturate(1.03)} /* section eyebrow number for the few true sequences only */ .kicker{font-weight:800;letter-spacing:-.02em;text-transform:uppercase;line-height:.9} /* ================================================================= NAV ================================================================= */ .nav{ position:fixed;top:0;left:0;width:100%;z-index:var(--z-nav); display:flex;align-items:center;justify-content:space-between; padding:clamp(.85rem,2vw,1.4rem) var(--gut); transition:background .3s var(--ease),border-color .3s var(--ease),backdrop-filter .3s var(--ease); border-bottom:1px solid transparent; } .nav.scrolled{ background:color-mix(in oklch,var(--paper) 84%,transparent); backdrop-filter:blur(9px) saturate(1.1); border-bottom-color:var(--line); } .mark{font-weight:900;font-size:clamp(1.25rem,2.1vw,1.6rem);letter-spacing:-.03em;color:var(--ink);line-height:1} .mark b{color:var(--red);font-weight:900} .nav-links{display:none} .menu-btn{ display:inline-flex;flex-direction:column;gap:5px;padding:13px 12px;margin:-13px -8px -13px 0; position:relative; } /* 2819 hover: a soft red disc blooms behind the bars (their exact rgba(212,19,25,.07)) */ .menu-btn::before{ content:"";position:absolute;inset:50% auto auto 50%;width:52px;height:52px;border-radius:50%; background:rgba(212,19,25,.07);transform:translate(-50%,-50%) scale(0); transition:transform .3s var(--ease-2819);pointer-events:none; } @media (hover:hover){.menu-btn:hover::before{transform:translate(-50%,-50%) scale(1)}} .menu-btn span{display:block;width:30px;height:3px;background:var(--red);transition:transform .4s var(--ease),opacity .25s var(--ease);position:relative} .menu-btn[aria-expanded="true"] span:nth-child(1){transform:translateY(8px) rotate(45deg)} .menu-btn[aria-expanded="true"] span:nth-child(2){opacity:0} .menu-btn[aria-expanded="true"] span:nth-child(3){transform:translateY(-8px) rotate(-45deg)} /* hamburger-only nav at every size (2819-style): the inline desktop links stay hidden; the overlay menu is the navigation */ /* ---- Mobile / overlay menu ------------------------------------ */ .menu{ position:fixed;inset:0;z-index:var(--z-menu);background:var(--paper); display:flex;flex-direction:column;justify-content:center; padding:clamp(2rem,8vw,5rem) var(--gut); /* 2819 menu drop: the panel falls with their tween ease [.8,.2,0,1] — slow start, snap, long settle */ transform:translateY(-101%);transition:transform .6s var(--ease-2819-soft); overflow-y:auto; } .menu.open{transform:translateY(0);transition:transform 1.15s var(--ease-2819-soft)} .menu-nav{display:flex;flex-direction:column;gap:.1rem} .menu-nav a{ font-weight:900;letter-spacing:-.03em;text-transform:uppercase;color:var(--ink); font-size:clamp(2.2rem,10vw,5rem);line-height:1.16;width:max-content;max-width:100%; padding-block:.03em;overflow:visible; position:relative;transition:color .25s var(--ease),transform .35s var(--ease); /* Slide on hover with a composited transform, NOT padding-left: animating a layout property re-rasterised the giant glyphs and left a torn top edge mid-transition. We also avoid a PERMANENT GPU layer here — a persistent transform layer clips the tall caps that overflow a tight line box (they get shaved off the top). Roomy line-height + transform-on-hover fixes both. */ } /* 2819 link cascade (verbatim from their bundle): closed, each link waits 180px up with a 3° tilt; on open they swing down one after another (60ms apart) with the [.8,.2,0,1] tween over 1s; closing retreats everything together in .4s. Uses the individual translate/rotate properties so the hover / focus transform (translateX) composes on top without conflicts. */ @media (prefers-reduced-motion:no-preference){ .menu-nav a{ translate:0 -180px;rotate:3deg;opacity:0; transition:color .25s var(--ease),transform .35s var(--ease), translate .5s var(--ease-2819-soft),rotate .5s var(--ease-2819-soft),opacity .4s var(--ease-2819-soft); } .menu.open .menu-nav a{ translate:0 0;rotate:0deg;opacity:1; transition:color .25s var(--ease),transform .35s var(--ease), translate 1.3s var(--ease-2819-soft),rotate 1.3s var(--ease-2819-soft),opacity .9s var(--ease-2819-soft); } .menu.open .menu-nav a:nth-child(1){transition-delay:0s,0s,.26s,.26s,.26s} .menu.open .menu-nav a:nth-child(2){transition-delay:0s,0s,.32s,.32s,.32s} .menu.open .menu-nav a:nth-child(3){transition-delay:0s,0s,.38s,.38s,.38s} .menu.open .menu-nav a:nth-child(4){transition-delay:0s,0s,.44s,.44s,.44s} .menu.open .menu-nav a:nth-child(5){transition-delay:0s,0s,.5s,.5s,.5s} .menu.open .menu-nav a:nth-child(6){transition-delay:0s,0s,.56s,.56s,.56s} .menu.open .menu-nav a:nth-child(7){transition-delay:0s,0s,.62s,.62s,.62s} /* the small footer row drifts up last */ .menu .menu-foot{opacity:0;translate:0 26px;transition:opacity .35s var(--ease-2819),translate .35s var(--ease-2819)} .menu.open .menu-foot{opacity:1;translate:0 0;transition-delay:.6s;transition-duration:.9s} } .menu-nav a .idx{font-size:.9rem;font-weight:700;color:var(--red-ink);vertical-align:top;letter-spacing:.05em;margin-right:.4em} @media (hover:hover){.menu-nav a:hover{color:var(--red);transform:translateX(.4em)}} /* On open, focus moves to the dialog container (not a link) so no item looks "stuck" — suppress its outline since it's a programmatic focus target, not an interactive control. */ .menu:focus,.menu:focus-visible{outline:none} /* Menu links get an on-brand focus cue (red + slide) instead of the global boxy outline, shown only as you Tab through them. */ .menu-nav a:focus-visible{outline:none;color:var(--red);transform:translateX(.4em)} .menu-foot{margin-top:clamp(2rem,5vw,3.5rem);display:flex;flex-wrap:wrap;gap:1.2rem 2rem;align-items:center;border-top:1px solid var(--line);padding-top:1.6rem} .menu-foot a{font-weight:700;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)} .menu-foot a:hover{color:var(--red-ink)} .menu-foot .sp{margin-left:auto;color:var(--muted);font-size:.8rem;letter-spacing:.04em} body.locked{overflow:hidden} /* ================================================================= LEFT VERTICAL RAIL (the 2819 "to the ends of the earth" spine) ================================================================= */ .rail{ position:fixed;left:max(.5rem,calc((100vw - var(--maxw))/2 - .5rem));top:0;bottom:0;z-index:var(--z-rail); display:none;flex-direction:column;justify-content:space-evenly;align-items:flex-start; padding:6.5rem 0 3rem;pointer-events:none; } .rail span{font-weight:800;font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:var(--faint)} .rail span:nth-child(odd){color:var(--ink)} @media (min-width:1180px){.rail{display:flex}} /* ================================================================= HERO ================================================================= */ .hero{position:relative;padding-top:clamp(6.5rem,13vh,9rem);padding-bottom:var(--sec);overflow:hidden;background:var(--paper)} .hero-inner{position:relative;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut);display:flex;flex-direction:column} .hero-head{position:relative} .hero-head h1{margin:0;line-height:.84;letter-spacing:-.035em;text-transform:uppercase} /* knockout: white + difference reads near-black on paper and inverts to light over the dark photos behind it */ /* the currentColor stroke fattens the glyphs beyond Space Grotesk's native 700 max (faux-bold would distort) */ .hero-head .ln{display:block;font-size:var(--fs-hero);font-weight:900;color:#fff;mix-blend-mode:difference;-webkit-text-stroke:.016em currentColor} .hero-head .ln--red{color:var(--red);mix-blend-mode:normal} .hero-sub{ position:relative;max-width:34ch;margin-top:clamp(1.4rem,3vw,2.2rem); font-size:var(--fs-lede);color:var(--ink-2);font-weight:500; } .hero-sub b{color:var(--ink);font-weight:700} /* hero photos, woven behind the type on desktop */ .hero-media{position:absolute;inset:0;pointer-events:none} .hero-media .ph{position:absolute;box-shadow:0 18px 50px -28px rgba(0,0,0,.5)} /* hero photos run dark so the knockout headline inverts to a clean light, never washed */ /* hero photos MUST stay transform-free: a transform/will-change here promotes them to a compositing layer and breaks the mix-blend knockout in Safari (text flashes white). They move via object-position instead. */ .hero-media .ph img{filter:grayscale(1) contrast(1.02) brightness(.52);animation:none!important;will-change:auto} .hero-media .ph::after{content:"";position:absolute;inset:0;background:rgba(7,7,11,.4);pointer-events:none} .hph-a{top:2%;left:42%;width:32%;aspect-ratio:11/7} .hph-b{top:24%;right:1%;width:21%;aspect-ratio:3/4} .hph-c{top:52%;left:40%;width:22%;aspect-ratio:3/2} .hero-status{position:absolute;right:1%;bottom:2%} .hero-status a{display:inline-flex;align-items:center;gap:.5rem;margin-top:.5rem} .hero-scroll{ display:inline-flex;align-items:center;gap:.8rem;margin-top:clamp(2.2rem,5vw,3.4rem); position:relative;font-weight:800;font-size:var(--fs-label);letter-spacing:.14em;text-transform:uppercase;color:var(--ink); } .hero-scroll .bar{width:46px;height:2px;background:var(--ink);position:relative;overflow:hidden} .hero-scroll .bar::after{content:"";position:absolute;inset:0;background:var(--red);transform:translateX(-100%);animation:slide 2.6s var(--ease) infinite} @keyframes slide{0%{transform:translateX(-100%)}55%,100%{transform:translateX(100%)}} /* hero CTA cluster — 2819-style info line + filled + bracket CTAs */ .hero-cta{display:flex;flex-wrap:wrap;align-items:center;gap:1rem clamp(1.4rem,3vw,2.6rem);margin-top:clamp(1.6rem,3.2vw,2.6rem);position:relative} .hero-meta{font-weight:700;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink);line-height:1.5} .hero-meta .lbl{display:block;color:var(--red-ink);letter-spacing:.13em;margin-bottom:.15rem} .hero-cta-btns{display:flex;flex-wrap:wrap;gap:.8rem 1.3rem;align-items:center} .hero-cta .brk{min-height:48px} .cta-fill{display:inline-flex;align-items:center;justify-content:center;gap:.55em;background:var(--red);color:var(--on-red);font-weight:800;letter-spacing:.05em;text-transform:uppercase;font-size:clamp(.84rem,1vw,.95rem);padding:1em 1.5em;min-height:48px;border:2px solid var(--red);border-radius:0;transition:background .25s var(--ease),transform .12s var(--ease)} .cta-fill .arw{transition:transform .3s var(--ease)} .cta-fill:active{transform:translateY(1px)} @media(hover:hover){.cta-fill:hover{background:var(--red-strong);border-color:var(--red-strong)}.cta-fill:hover .arw{transform:translate(.22em,-.22em)}} /* secondary (outline) variant of the filled CTA — e.g. hero "See prices" */ .cta-fill.ghost{background:transparent;color:var(--ink);border-color:var(--ink)} @media(hover:hover){.cta-fill.ghost:hover{background:var(--ink);border-color:var(--ink);color:var(--paper)}} /* on small screens the woven hero becomes a clean stack */ @media (max-width:1023px){ .hero-head{order:1} .hero-media{position:static;display:grid;grid-template-columns:1fr 1fr;gap:.7rem;margin-top:1.6rem;order:2} .hero-sub{order:3} .hero-cta{order:4;margin-top:1.4rem} .hero-scroll{order:6} .hero-media .ph{position:static;width:auto;box-shadow:none} /* photos sit beside the headline on mobile, not behind it: no knockout darkening, no scrim */ .hero-media .ph img{filter:grayscale(1) contrast(1.06) brightness(.98)} .hero-media .ph::after{display:none} .hph-a{grid-column:1 / -1;aspect-ratio:16/9} .hph-b{aspect-ratio:3/4} .hph-c{aspect-ratio:3/4} .hero-status{position:static;margin-top:1.6rem;order:5} } @media (max-width:560px){ .hero-head .ln{font-size:clamp(3rem,21vw,5rem)} } /* ================================================================= CREED — THE FRAME. NOTHING LESS. ================================================================= */ .creed{position:relative;padding-block:var(--sec)} .creed-rule{position:absolute;left:51%;top:0;bottom:0;width:2px;background:var(--red);opacity:.7;display:none} @media(min-width:900px){.creed-rule{display:block}} .creed-grid{display:grid;gap:clamp(1.5rem,4vw,3rem);align-items:center; grid-template-columns:1fr;} .creed-copy h2{font-size:var(--fs-creed);font-weight:900;line-height:.86;letter-spacing:-.035em;text-transform:uppercase;color:var(--ink)} .creed-copy h2 .r{color:var(--red);display:block} .creed-copy .status{margin-bottom:clamp(1.4rem,3vw,2.2rem)} .creed-media{display:grid;grid-template-columns:1.5fr 1fr;gap:1rem;align-items:start} .creed-media .big{aspect-ratio:4/3} .creed-media .sm{aspect-ratio:16/10;border:2px solid var(--red);margin-top:35%} @media(min-width:900px){ .creed-grid{grid-template-columns:1.05fr .95fr} } /* ================================================================= MISSION / ABOUT INTRO ================================================================= */ .mission{position:relative;padding-block:var(--sec)} .mission-head{max-width:48rem} .mission-head h2{font-size:var(--fs-h2);font-weight:900;line-height:1.02;letter-spacing:-.02em;text-transform:uppercase;color:var(--ink)} .mission-head h2 em{font-style:normal;color:var(--red)} .mission-head .brk{margin-top:1.4rem} .mission-body{ margin-top:clamp(2rem,5vw,3.5rem); display:grid;gap:clamp(1.2rem,3vw,2.2rem); grid-template-columns:1fr;align-items:end; } .mission-body .center{aspect-ratio:3/2} .mission-body .side{aspect-ratio:4/5} .mission-lede{font-size:var(--fs-lede);color:var(--ink-2);max-width:46ch;font-weight:500} .mission-lede b{color:var(--ink);font-weight:700} @media(min-width:760px){ .mission-body{grid-template-columns:.8fr 1.6fr .8fr} .mission-body .txt{grid-column:1 / -1;display:grid;grid-template-columns:1fr 1fr;gap:2rem;align-items:start;margin-top:.5rem} } /* ================================================================= SELECTED WORK — varied editorial grid ================================================================= */ .work{padding-block:var(--sec)} .sec-head{display:flex;flex-wrap:wrap;gap:1rem 2rem;align-items:flex-end;justify-content:space-between;margin-bottom:clamp(2rem,4vw,3rem)} .sec-head h2{font-size:var(--fs-mega);font-weight:900;letter-spacing:-.035em;text-transform:uppercase;line-height:.85;color:var(--ink)} .sec-head h2 b{color:var(--red);font-weight:900} .work-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(.6rem,1.4vw,1.1rem);grid-auto-flow:dense} /* Each visual row pairs a wide item with a narrow one; their aspect ratios are chosen so both land at the SAME height (wide col-4 @ 3/2 == narrow col-2 @ 3/4) — no leftover paper gaps. */ .shot{position:relative;overflow:hidden;background:var(--paper-2);grid-column:span 3;aspect-ratio:3/2} /* Each visual row pairs a wide item with a narrow one, ratios picked so both land the SAME height and no paper gaps remain. The wide items run 1.53 (a hair over 3/2) rather than 3/2 to absorb the column-gap width they carry, which otherwise makes them ~12px taller than the col-2 portrait. */ .shot:nth-child(1){grid-column:span 4;aspect-ratio:1.53} .shot:nth-child(2){grid-column:span 2;aspect-ratio:3/4} .shot:nth-child(5){grid-column:span 2;aspect-ratio:3/4} .shot:nth-child(6){grid-column:span 4;aspect-ratio:1.53} .shot:nth-child(7){grid-column:span 2;aspect-ratio:3/4} .shot:nth-child(8){grid-column:span 4;aspect-ratio:1.53} .shot img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.06);transition:transform .8s var(--ease),filter .7s var(--ease)} .shot figcaption{ position:absolute;left:0;right:0;bottom:0;padding:clamp(.8rem,1.6vw,1.2rem); display:flex;flex-direction:column;gap:.1rem;color:var(--on-red);z-index:2; background:linear-gradient(to top,rgba(20,18,17,.86),rgba(20,18,17,0)); transform:translateY(.4rem);opacity:0;transition:opacity .4s var(--ease),transform .4s var(--ease); } .shot .g{font-weight:800;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--red)} .shot .t{font-weight:800;font-size:1.05rem;letter-spacing:-.01em} .shot .m{font-family:var(--mono);font-size:.7rem;color:rgba(255,255,255,.72);letter-spacing:.02em} @media (hover:hover){ .shot:hover img{transform:scale(1.05);filter:grayscale(0) contrast(1.02)} .shot:hover figcaption{opacity:1;transform:translateY(0)} } @media (hover:none){.shot figcaption{opacity:1;transform:none;background:linear-gradient(to top,rgba(20,18,17,.8),rgba(20,18,17,0) 70%)} /* no hover on touch — show the work in colour by default */ .shot img{filter:contrast(1.04) saturate(1.03)}} @media (max-width:760px){ .work-grid{grid-template-columns:repeat(2,1fr)} .shot,.shot:nth-child(n){grid-column:span 1;aspect-ratio:3/4} .shot:nth-child(1),.shot:nth-child(6),.shot:nth-child(8){grid-column:span 2;aspect-ratio:16/10} } /* ================================================================= PROCESS — numbered card carousel (a real 4-step sequence) ================================================================= */ .process{padding-block:var(--sec);overflow:hidden} .proc-rail{ display:grid;grid-auto-flow:column;grid-auto-columns:min(86vw,420px); gap:clamp(1rem,2vw,1.6rem);overflow-x:auto;scroll-snap-type:x mandatory; padding:.4rem var(--gut) 1.4rem max(var(--gut),calc((100vw - var(--maxw))/2 + var(--gut))); scroll-padding-left:max(var(--gut),calc((100vw - var(--maxw))/2 + var(--gut))); scrollbar-width:none; } .proc-rail::-webkit-scrollbar{display:none} .pcard{ position:relative;scroll-snap-align:start;border:2px solid var(--line-2); background:var(--paper-card);padding:clamp(1.5rem,2.5vw,2.2rem); display:flex;flex-direction:column;min-height:clamp(330px,42vw,420px);overflow:hidden; transition:border-color .35s var(--ease),transform .5s var(--ease); } .pcard h3{font-size:var(--fs-card);font-weight:900;letter-spacing:-.02em;text-transform:uppercase;color:var(--ink);line-height:.95} .pcard p{margin-top:1rem;color:var(--ink-2);font-size:1rem;max-width:34ch} .pcard .tags{margin-top:auto;display:flex;flex-wrap:wrap;gap:.4rem 1.1rem;padding-top:1.6rem;border-top:1px solid var(--line)} .pcard .tags span{font-family:var(--mono);font-size:.72rem;color:var(--muted);letter-spacing:.01em} .pcard .num{ position:absolute;right:.4rem;bottom:-1.5rem;font-weight:900;font-size:clamp(7rem,14vw,11rem); line-height:1;letter-spacing:-.04em;color:var(--ink);opacity:.06;pointer-events:none; } .pcard.alt .num{color:var(--red);opacity:.16} .proc-ctrl{display:flex;gap:.6rem} .proc-ctrl button{width:46px;height:46px;border:2px solid var(--line-2);border-radius:50%;display:grid;place-items:center;transition:background .25s var(--ease),border-color .25s,color .25s} .proc-ctrl button:hover{background:var(--ink);border-color:var(--ink);color:var(--paper)} .proc-ctrl button svg{width:20px;height:20px} /* ================================================================= STILLS / MOTION split (the IN-PERSON / ONLINE move) ================================================================= */ .split{padding-block:var(--sec)} .split-grid{display:grid;gap:clamp(2.5rem,5vw,4rem);grid-template-columns:1fr} @media(min-width:860px){.split-grid{grid-template-columns:1fr 1fr}} .half{min-width:0} .half .ph{aspect-ratio:3/2;margin-bottom:clamp(1.4rem,3vw,2.2rem)} .half .lbl{font-weight:800;font-size:var(--fs-label);letter-spacing:.13em;text-transform:uppercase;color:var(--muted)} .half h3{font-size:clamp(1.8rem,3.9vw,3.9rem);font-weight:900;letter-spacing:-.04em;text-transform:uppercase;line-height:.92;color:var(--ink);margin:.2rem 0 .4rem;white-space:nowrap} .half h3 b{color:var(--red);font-weight:900;display:block} .half p{color:var(--ink-2);max-width:40ch;margin:.9rem 0 1.4rem} /* ================================================================= ENQUIRY ================================================================= */ /* ================================================================= TESTIMONIALS ================================================================= */ /* ================================================================= CLIENT REVIEWS — compact slider under the hero (full "Kind words" block lives before the enquiry) ================================================================= */ .reviews{border-block:1px solid var(--line);margin-block:clamp(.4rem,2vw,1.4rem);padding-block:clamp(1.3rem,2.8vw,2rem)} .rev-top{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.9rem 1.4rem;margin-bottom:clamp(1rem,2.2vw,1.6rem)} .rev-cred{display:flex;align-items:center;flex-wrap:wrap;gap:.4rem .7rem;margin:0;line-height:1.3} .rev-cred .stars{color:var(--red);letter-spacing:.1em;font-size:1rem} .rev-cred b{font-weight:700;color:var(--ink);font-size:1.05rem} .rev-cred .k{font-family:var(--mono);font-size:.72rem;letter-spacing:.03em;text-transform:uppercase;color:var(--muted)} .rev-ctrl{display:flex;align-items:center;gap:.9rem} .rev-dots{display:flex;gap:.5rem;margin:0;padding:0} .rev-dot{width:.6rem;height:.6rem;border-radius:50%;border:1.5px solid var(--line-2);background:transparent;padding:0;cursor:pointer;transition:background .3s var(--ease),border-color .3s var(--ease),transform .3s var(--ease)} .rev-dot.is-on{background:var(--red);border-color:var(--red);transform:scale(1.15)} @media(hover:hover){.rev-dot:hover{border-color:var(--red)}} .rev-nav{display:flex;gap:.55rem} .rev-arrow{width:44px;height:44px;border:2px solid var(--line-2);border-radius:50%;display:grid;place-items:center;color:var(--ink);transition:background .25s var(--ease),border-color .25s var(--ease),color .25s var(--ease)} .rev-arrow svg{width:18px;height:18px} .rev-arrow:active{transform:translateY(1px)} @media(hover:hover){.rev-arrow:hover{background:var(--ink);border-color:var(--ink);color:var(--paper)}} .rev-viewport{overflow:hidden} .rev-track{display:flex;list-style:none;margin:0;padding:0;transition:transform .55s var(--ease)} .rev-slide{flex:0 0 100%;min-width:0;display:grid;grid-template-columns:1fr;gap:1.1rem 2rem;align-items:center} @media(min-width:640px){.rev-slide{grid-template-columns:auto 1fr;gap:clamp(1.6rem,3vw,2.6rem)}} .rev-ph{width:clamp(72px,11vw,116px);aspect-ratio:4/5;flex:none;overflow:hidden;background:var(--paper-2)} .rev-ph img{width:100%;height:100%;object-fit:cover;filter:contrast(1.03) saturate(1.03)} .rev-q{margin:0;font-weight:500;color:var(--ink);font-size:clamp(1.12rem,1.9vw,1.5rem);line-height:1.36;text-wrap:pretty;max-width:46ch} .rev-by{margin-top:.85rem;font-family:var(--mono);font-size:.74rem;letter-spacing:.02em;text-transform:uppercase;color:var(--muted)} .rev-by b{color:var(--ink);font-weight:700;letter-spacing:.04em} .rev-by .sep{color:var(--faint);margin:0 .2rem} .rev-all{margin-top:clamp(1rem,2.2vw,1.5rem)} @media (prefers-reduced-motion:reduce){.rev-track{transition:none}} .quotes{padding-block:var(--sec)} .quotes-grid{display:grid;gap:clamp(1.6rem,3.5vw,3rem);grid-template-columns:1fr} @media(min-width:760px){.quotes-grid{grid-template-columns:repeat(3,1fr)}} .quote{border-top:2px solid var(--ink);padding-top:1.3rem} .quote::before{content:"\201C";font-family:var(--display);font-synthesis:none;font-size:3.2rem;line-height:.5;color:var(--red);display:block;margin-bottom:.35rem} .quote blockquote{margin:0;font-size:clamp(1.05rem,1.5vw,1.3rem);font-weight:500;color:var(--ink);line-height:1.42;text-wrap:pretty} .quote figcaption{margin-top:1.3rem;display:flex;flex-direction:column;gap:.15rem} .q-name{font-weight:800;text-transform:uppercase;letter-spacing:.05em;font-size:.85rem;color:var(--ink)} .q-meta{font-family:var(--mono);font-size:.72rem;color:var(--muted);letter-spacing:.02em} .hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden} .enq-intro .cta-fill{margin:1.4rem 0;width:max-content;max-width:100%} .enquire{padding-block:var(--sec);position:relative} .enq-grid{display:grid;gap:clamp(2rem,5vw,4rem);grid-template-columns:1fr} @media(min-width:900px){.enq-grid{grid-template-columns:.85fr 1.15fr}} .enq-intro h2{font-size:var(--fs-h2);font-weight:900;line-height:.95;letter-spacing:-.025em;text-transform:uppercase;color:var(--ink)} .enq-intro h2 b{color:var(--red)} .enq-intro p{margin-top:1.2rem;color:var(--ink-2);max-width:38ch} .enq-direct{margin-top:2rem;display:flex;flex-direction:column;gap:.7rem} .enq-direct a{display:inline-flex;align-items:center;gap:.6rem;font-weight:700;color:var(--ink);width:max-content} .enq-direct a:hover{color:var(--red-ink)} .enq-direct .k{font-family:var(--mono);font-size:.72rem;color:var(--muted);letter-spacing:.04em;text-transform:uppercase;min-width:5.5rem} .form{display:grid;gap:1.1rem} .field{display:flex;flex-direction:column;gap:.45rem} .row2{display:grid;gap:1.1rem;grid-template-columns:1fr} @media(min-width:560px){.row2{grid-template-columns:1fr 1fr}} .field label{font-weight:800;font-size:var(--fs-label);letter-spacing:.1em;text-transform:uppercase;color:var(--ink)} .field label .req{color:var(--red)} .field input,.field select,.field textarea{ font:inherit;color:var(--ink);background:var(--paper-card); border:2px solid var(--line-2);padding:.85rem 1rem;border-radius:0;width:100%; transition:border-color .2s var(--ease),background .2s var(--ease); } .field textarea{resize:vertical;min-height:7rem} .field input::placeholder,.field textarea::placeholder{color:var(--faint)} .field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--red);background:#fff} .field[aria-invalid] input,.field.invalid input,.field.invalid select,.field.invalid textarea{border-color:var(--red)} .field .err{font-size:.78rem;color:var(--red-ink);font-weight:600;min-height:1em} .btn-send{ display:inline-flex;align-items:center;justify-content:center;gap:.6rem; background:var(--red);color:var(--on-red);font-weight:800;letter-spacing:.06em;text-transform:uppercase; padding:1.05rem 1.6rem;border:2px solid var(--red);border-radius:0;font-size:.92rem; transition:background .25s var(--ease),transform .15s var(--ease);min-height:52px; } .btn-send:hover{background:var(--red-strong);border-color:var(--red-strong)} .btn-send:active{transform:translateY(1px)} .form-note{font-size:.78rem;color:var(--muted)} .form-ok{ display:none;border:2px solid var(--red);background:var(--red-soft);padding:1.2rem 1.3rem; } .form-ok.show{display:block} .form-ok b{color:var(--red-ink);text-transform:uppercase;letter-spacing:.06em;font-size:.8rem} .form-ok p{margin-top:.4rem;color:var(--ink-2)} /* ================================================================= FOOTER ================================================================= */ .foot{padding-top:var(--sec);padding-bottom:clamp(1.5rem,3vw,2.5rem);border-top:1px solid var(--line)} .foot-cols{display:grid;gap:2.2rem 2rem;grid-template-columns:repeat(2,1fr)} @media(min-width:760px){.foot-cols{grid-template-columns:repeat(4,1fr)}} .fcol h4{font-weight:800;font-size:var(--fs-label);letter-spacing:.12em;text-transform:uppercase;color:var(--red-ink);margin-bottom:1rem;display:inline-flex;gap:.5em} .fcol h4::before{content:"("}.fcol h4::after{content:")"} .fcol li{margin-bottom:.55rem} .fcol a{font-weight:600;color:var(--ink-2);font-size:.94rem;transition:color .2s,padding-left .25s var(--ease)} .fcol a:hover{color:var(--red-ink);padding-left:.25em} .foot-mark{ margin-top:clamp(2.5rem,6vw,4.5rem);font-weight:900;font-size:var(--fs-mega); letter-spacing:-.045em;text-transform:uppercase;color:var(--ink);line-height:.8; display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:1rem; } .foot-mark b{color:var(--red)} .foot-mark .yr{font-size:.82rem;font-weight:700;letter-spacing:.05em;color:var(--muted);text-transform:none} .foot-meta{margin-top:1.8rem;display:flex;flex-wrap:wrap;gap:.6rem 1.5rem;justify-content:space-between;border-top:1px solid var(--line);padding-top:1.4rem; font-size:.8rem;color:var(--muted);letter-spacing:.02em} .foot-meta a:hover{color:var(--red-ink)} /* ================================================================= MOTION — reveals (content visible by default; this only enhances) ================================================================= */ .reveal{opacity:1;transform:none} @media (prefers-reduced-motion:no-preference){ /* 2819 appear (verbatim from their bundle): rise from y:150px with the bounce-.2 spring — a big free rise with a ~1.5% overshoot that settles, no clip masks */ .js .reveal{opacity:0;transform:translateY(150px);transition:opacity .5s var(--ease-2819),transform .7s var(--spring)} .js .reveal.in{opacity:1;transform:none} .js .stagger>*{opacity:0;transform:translateY(150px);transition:opacity .5s var(--ease-2819),transform .7s var(--spring);transition-delay:calc(var(--i,0)*60ms)} .js .stagger.in>*{opacity:1;transform:none} } /* feature photos parallax (transform set in JS); origin centred so the cover-scale stays put */ .ph img{transform-origin:center} /* Space Grotesk Bold on all headline type (2819's real face; max native weight 700 — font-synthesis:none stops faux-bolding of 800/900 rules) */ .mark,.hero-head .ln,.creed-copy h2,.mission-head h2,.sec-head h2,.half h3,.pcard h3,.enq-intro h2,.foot-mark,.menu-nav a{font-family:var(--display);font-synthesis:none} /* failsafe: content must never stay hidden if the observer can't run (headless, paused tab) */ html.reveal-fallback .reveal,html.reveal-fallback .stagger>*{opacity:1 !important;transform:none !important;clip-path:none !important} @media (prefers-reduced-motion:reduce){ .dot::after,.hero-scroll .bar::after{animation:none} *{scroll-behavior:auto !important} .menu{transition:none} } /* ---- 2819 hero cascade: after the intro wipe clears, the headline lines and CTA cluster spring up from y:150 one after another (60ms apart), exactly like the reference's post-intro entrance. Scoped to html.intro (set only when the preloader actually plays) so a skipped intro never shows a late pop. animation-fill-mode:backwards ends every element at transform:none, keeping the mix-blend knockout layer-free at rest. ---- */ @media (prefers-reduced-motion:no-preference){ @keyframes rise-2819{from{opacity:0;transform:translateY(150px)}to{opacity:1;transform:none}} html.intro .hero-head .ln{animation:rise-2819 .7s var(--spring) backwards;animation-delay:calc(1.2s + var(--i,0)*60ms)} html.intro .hero-sub{animation:rise-2819 .7s var(--spring) 1.42s backwards} html.intro .hero-cta{animation:rise-2819 .7s var(--spring) 1.48s backwards} html.intro .hero-status{animation:rise-2819 .7s var(--spring) 1.54s backwards} html.intro .hero-scroll{animation:rise-2819 .7s var(--spring) 1.6s backwards} } /* ================================================================= PRINTS SHOP (prints.html) ================================================================= */ .prints-hero{padding-top:clamp(7rem,15vh,10.5rem);padding-bottom:clamp(2rem,4vw,3rem)} .prints-hero h1{font-family:var(--display);font-synthesis:none;font-size:var(--fs-mega);letter-spacing:-.035em;text-transform:uppercase;line-height:.85;color:var(--ink)} .prints-hero h1 b{color:var(--red)} .prints-hero p{margin-top:clamp(1rem,2vw,1.5rem);max-width:50ch;color:var(--ink-2);font-size:var(--fs-lede);font-weight:500} .prints-grid{display:grid;gap:clamp(1.8rem,3.5vw,3rem);grid-template-columns:1fr;padding-bottom:clamp(2.5rem,5vw,4rem)} @media(min-width:640px){.prints-grid{grid-template-columns:repeat(2,1fr)}} @media(min-width:1000px){.prints-grid{grid-template-columns:repeat(3,1fr)}} .print{display:flex;flex-direction:column} .print-img{aspect-ratio:4/5;overflow:hidden;background:var(--paper-2)} /* prints sit in editorial black & white and bloom to full colour on hover — like the work grid */ .print-img img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.05);transition:transform .8s var(--ease),filter .7s var(--ease)} @media(hover:hover){.print:hover .print-img img{transform:scale(1.04);filter:grayscale(0) contrast(1.02) saturate(1.03)}} /* touch devices can't hover, so show the prints in colour by default */ @media(hover:none){.print-img img{filter:contrast(1.03) saturate(1.03)}} .print-title{font-family:var(--display);font-synthesis:none;font-size:clamp(1.3rem,2vw,1.7rem);text-transform:uppercase;letter-spacing:-.02em;color:var(--ink);margin:1rem 0 .2rem;line-height:1} .print-cap{font-family:var(--mono);font-size:.74rem;color:var(--muted);letter-spacing:.01em;margin-bottom:1.1rem;line-height:1.5} .print-buy{margin-top:auto;display:flex;flex-direction:column;gap:.7rem} .print-size{font:inherit;font-size:.92rem;font-weight:500;color:var(--ink);background:var(--paper-card);border:2px solid var(--line-2);padding:.75rem .9rem;border-radius:0;width:100%} .print-size:focus{outline:none;border-color:var(--red)} .print-buy .cta-fill{width:100%} .prints-note{border-top:2px solid var(--line-2);margin-top:1rem;padding-top:1.6rem;font-size:.85rem;color:var(--muted);max-width:62ch} .prints-note b{color:var(--ink);text-transform:uppercase;letter-spacing:.05em;font-size:.78rem;display:block;margin-bottom:.4rem} .prints-note a{color:var(--red-ink);font-weight:700} /* ================================================================= PRICING (pricing.html) ================================================================= */ .pricing-hero{padding-top:clamp(7rem,15vh,10.5rem);padding-bottom:clamp(1.5rem,3vw,2.5rem)} .pricing-hero h1{font-family:var(--display);font-synthesis:none;font-size:var(--fs-mega);letter-spacing:-.035em;text-transform:uppercase;line-height:.85;color:var(--ink)} .pricing-hero h1 b{color:var(--red)} .pricing-hero p{margin-top:clamp(1rem,2vw,1.5rem);max-width:56ch;color:var(--ink-2);font-size:var(--fs-lede);font-weight:500;text-wrap:pretty} .pricing-hero p b{color:var(--ink);font-weight:700} .pricing-sec{padding-block:clamp(1.6rem,3.5vw,2.8rem)} /* pricing reveals: clip-free fade+rise (overrides the shared clip-mask) so the tier hover shadows are never cropped */ .pricing-sec.reveal{clip-path:none!important} .pricing-eyebrow{font-family:var(--mono);font-size:.74rem;letter-spacing:.03em;text-transform:uppercase;color:var(--muted);margin:0 0 clamp(1rem,2vw,1.5rem);display:flex;flex-wrap:wrap;gap:.5em} .pricing-eyebrow b{color:var(--red-ink);font-weight:700} /* tier cards */ .tiers{display:grid;gap:clamp(1rem,2vw,1.3rem);grid-template-columns:1fr;align-items:stretch} @media(min-width:700px){.tiers{grid-template-columns:repeat(3,1fr)}} .tier{position:relative;display:flex;flex-direction:column;border:2px solid var(--line-2);background:var(--paper-card);padding:clamp(1.5rem,2.4vw,2.1rem);transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .25s var(--ease)} .tier.featured{border-color:var(--red);border-width:2.5px} /* the recommended tier stands taller + pops off the page (desktop only, where the 3 sit side by side) */ @media(min-width:700px){ .tier.featured{transform:scale(1.06);z-index:2;box-shadow:0 30px 62px -30px oklch(0.18 0.004 60 / .5);background:var(--paper-card)} .tier.featured .tier-name{color:var(--red)} } .tier-tag{position:absolute;top:0;right:0;background:var(--red);color:var(--on-red);font-family:var(--mono);font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;padding:.4rem .65rem} .tier-name{font-family:var(--display);font-synthesis:none;font-size:clamp(1.5rem,2.2vw,1.9rem);text-transform:uppercase;letter-spacing:-.02em;color:var(--ink);line-height:1} .tier-for{font-family:var(--mono);font-size:.74rem;letter-spacing:.01em;color:var(--muted);margin:.6rem 0 0;line-height:1.45;min-height:3em} .tier-price{margin:1.1rem 0 .2rem;font-family:var(--display);font-synthesis:none;font-size:clamp(2.4rem,4vw,3.2rem);line-height:1;color:var(--ink);letter-spacing:-.03em} .tier-price .cur{font-size:.42em;vertical-align:.55em;color:var(--muted);margin-right:.08em;letter-spacing:0} .tier-price .per{display:block;font-family:var(--mono);font-size:.7rem;font-weight:400;letter-spacing:.04em;text-transform:uppercase;color:var(--faint);margin-top:.55rem} .tier-list{list-style:none;margin:1.3rem 0;padding:1.3rem 0 0;display:flex;flex-direction:column;gap:.65rem;border-top:1px solid var(--line);flex:1} .tier-list li{position:relative;padding-left:1.4rem;color:var(--ink-2);font-size:.95rem;line-height:1.45} .tier-list li::before{content:"";position:absolute;left:0;top:.55em;width:.5rem;height:.5rem;background:var(--red)} .tier .cta-fill{width:100%;margin-top:auto} .tier--ghost .cta-fill{background:transparent;color:var(--ink);border-color:var(--line-2)} @media(hover:hover){.tier--ghost .cta-fill:hover{background:var(--ink);border-color:var(--ink);color:var(--paper)}} /* tier hover — a subtle "pop out" lift, echoing the scale/pop the landing-page photos get on hover */ @media(hover:hover){ .tier:hover{transform:translateY(-8px) scale(1.02);box-shadow:0 26px 55px -30px oklch(0.18 0.004 60 / .5);z-index:3} /* featured is already scaled up at rest, so it lifts from there rather than shrinking */ .tier.featured:hover{transform:scale(1.06) translateY(-8px);box-shadow:0 34px 66px -28px oklch(0.565 0.224 26 / .45)} } @media (max-width:699px){.tier.featured:hover{transform:translateY(-8px) scale(1.02)}} @media(prefers-reduced-motion:reduce){ .tier{transition:box-shadow .3s var(--ease),border-color .25s var(--ease)} .tier--ghost:hover{transform:none} .tier.featured:hover{transform:scale(1.06)} /* keep the rest-state scale, no extra movement */ } .price-subnote{margin-top:clamp(1rem,2vw,1.4rem);font-size:.85rem;color:var(--muted);max-width:60ch} /* wedding + custom bands */ .price-band{border:2px solid var(--line-2);background:var(--paper-card);padding:clamp(1.6rem,3vw,2.6rem);display:grid;gap:1.3rem 2.4rem;align-items:center;grid-template-columns:1fr} @media(min-width:820px){.price-band{grid-template-columns:1.5fr 1fr}} .price-band.alt{border-color:var(--red);background:var(--red-soft)} .price-band h3{font-family:var(--display);font-synthesis:none;font-size:clamp(1.8rem,3vw,2.6rem);text-transform:uppercase;letter-spacing:-.025em;line-height:.95;color:var(--ink)} .price-band h3 b{color:var(--red)} .price-band p{margin-top:.7rem;color:var(--ink-2);max-width:48ch;text-wrap:pretty} .price-band .from{font-family:var(--mono);font-size:.78rem;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);margin-top:1rem} .price-band .from b{color:var(--ink);font-size:1.5em;letter-spacing:-.02em;font-weight:700} .price-band-cta{display:flex;flex-direction:column;gap:.9rem;align-items:flex-start} .price-band-cta .cta-fill{width:max-content;max-width:100%} @media(min-width:820px){.price-band-cta{align-items:flex-end;text-align:right}} /* add-ons list */ .addons{border-top:1px solid var(--line-2)} .addon{display:flex;justify-content:space-between;gap:1.5rem;align-items:baseline;padding:1rem 0;border-bottom:1px solid var(--line)} .addon .a-name{font-weight:700;color:var(--ink);min-width:0} .addon .a-desc{display:block;margin-top:.25rem;color:var(--muted);font-size:.88rem;font-weight:400;line-height:1.5;max-width:52ch} .addon .a-desc a{color:var(--red-ink);font-weight:700} .addon .a-price{font-family:var(--display);font-synthesis:none;font-size:1.15rem;color:var(--ink);white-space:nowrap;letter-spacing:-.01em;flex:none} .addon .a-price .cur{font-size:.7em;color:var(--muted)} .price-note{border-top:2px solid var(--line-2);margin-top:clamp(1.5rem,3vw,2.2rem);padding-top:1.6rem;font-size:.85rem;color:var(--muted);max-width:66ch;line-height:1.6} .price-note b{color:var(--ink);text-transform:uppercase;letter-spacing:.05em;font-size:.78rem;display:block;margin-bottom:.4rem} .price-note a{color:var(--red-ink);font-weight:700} /* ================================================================= INTRO PRELOADER (homepage first-load reveal) ================================================================= */ .preloader{position:fixed;inset:0;z-index:var(--z-load);background:var(--paper); display:flex;flex-direction:column;transition:transform .8s var(--ease)} .preloader[hidden]{display:none} .preloader.done{transform:translateY(-100%)} .pl-center{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.7rem;padding:var(--gut);text-align:center} .pl-mark{font-family:var(--display);font-synthesis:none;font-weight:900;font-size:clamp(2rem,7vw,4rem);letter-spacing:-.035em;text-transform:uppercase;color:var(--ink);line-height:1} .pl-mark b{color:var(--red)} .pl-tag{font-family:var(--mono);font-size:.74rem;letter-spacing:.22em;text-transform:uppercase;color:var(--muted)} /* small, centred bar just below the logo so the fill is visible loading in */ .pl-bar{width:clamp(140px,30vw,240px);height:2px;margin-top:.7rem;background:var(--line);overflow:hidden} .pl-count{font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;color:var(--muted)} .pl-fill{display:block;height:100%;width:0;background:var(--red);transition:width .25s var(--ease)} @media (prefers-reduced-motion:reduce){.preloader{transition:none}.pl-fill{transition:none}} /* ================================================================= SOFT EDGE — a minimal radial blur framing the viewport (premium focus, pulls the eye to the centre). Sits below nav/menu (--z-edge) so the logo, hamburger and overlay menu stay perfectly crisp; centre ~70% is untouched. ================================================================= */ body::after{ content:"";position:fixed;inset:0;z-index:var(--z-edge);pointer-events:none; -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px); -webkit-mask:radial-gradient(125% 115% at 50% 50%,transparent 68%,#000 100%); mask:radial-gradient(125% 115% at 50% 50%,transparent 68%,#000 100%); } /* no backdrop-filter (older browsers): fall back to a barely-there vignette */ @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ body::after{-webkit-backdrop-filter:none;backdrop-filter:none;-webkit-mask:none;mask:none; background:radial-gradient(125% 115% at 50% 50%,transparent 66%,oklch(0.18 0.004 60 / .10) 100%)} } /* 2819-style top defocus: a fixed blur zone across the viewport top, so content melts out of focus as it scrolls away (the paragraph in their about section). Gradient mask grades the blur from strong at the very top to nothing by ~16vh; the paper tint lifts it slightly so the exit reads as a fade too. Sits below the nav (z 80 > 55) — the wordmark and hamburger stay crisp. */ body::before{ content:"";position:fixed;top:0;left:0;right:0;height:16vh;z-index:55;pointer-events:none; -webkit-backdrop-filter:blur(9px);backdrop-filter:blur(9px); background:linear-gradient(to bottom,oklch(0.962 0.0015 90 / .55),transparent 70%); -webkit-mask:linear-gradient(to bottom,#000 0,#000 22%,transparent 100%); mask:linear-gradient(to bottom,#000 0,#000 22%,transparent 100%); } @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ body::before{background:linear-gradient(to bottom,oklch(0.962 0.0015 90 / .8),transparent)} } /* ================================================================= PORTFOLIO (portfolio.html) — masonry galleries, one per genre ================================================================= */ .pf-hero{padding-top:clamp(7rem,15vh,10.5rem);padding-bottom:clamp(1.6rem,3vw,2.4rem)} .pf-hero .eyebrow{font-family:var(--mono);font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--red-ink);margin:0 0 clamp(.8rem,1.6vw,1.2rem)} .pf-hero h1{font-family:var(--display);font-synthesis:none;font-size:var(--fs-mega);letter-spacing:-.035em;text-transform:uppercase;line-height:.85;color:var(--ink)} .pf-hero h1 b{color:var(--red)} .pf-hero p{margin-top:clamp(1rem,2vw,1.5rem);max-width:54ch;color:var(--ink-2);font-size:var(--fs-lede);font-weight:500;text-wrap:pretty} /* in-page genre jump chips */ .pf-jump{display:flex;flex-wrap:wrap;gap:.5rem .6rem;margin-top:clamp(1.4rem,3vw,2.2rem)} .pf-jump a{font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2);border:2px solid var(--line-2);padding:.5rem .8rem;transition:color .2s var(--ease),border-color .2s var(--ease),background .2s var(--ease)} @media(hover:hover){.pf-jump a:hover{color:var(--on-red);background:var(--red);border-color:var(--red)}} .pf-sec{padding-block:clamp(2.2rem,5vw,3.6rem);scroll-margin-top:6rem} .pf-sec-head{display:flex;flex-wrap:wrap;gap:.4rem 1.4rem;align-items:baseline;margin-bottom:clamp(1.4rem,3vw,2.2rem);border-top:2px solid var(--line-2);padding-top:clamp(1rem,2vw,1.4rem)} .pf-sec-head h2{font-family:var(--display);font-synthesis:none;font-size:clamp(1.9rem,4.5vw,3rem);text-transform:uppercase;letter-spacing:-.03em;line-height:.9;color:var(--ink)} .pf-sec-head h2 b{color:var(--red)} .pf-sec-head .n{font-family:var(--mono);font-size:.74rem;letter-spacing:.04em;color:var(--muted);margin-left:auto} /* masonry via CSS columns — mixed portrait/landscape flow with no cropping */ .pf-grid{columns:2;column-gap:clamp(.7rem,1.6vw,1.2rem)} @media(min-width:760px){.pf-grid{columns:3}} @media(min-width:1200px){.pf-grid{columns:4}} .pf-item{break-inside:avoid;margin:0 0 clamp(.7rem,1.6vw,1.2rem);overflow:hidden;background:var(--paper-2);position:relative;display:block} .pf-item img{width:100%;height:auto;display:block;filter:grayscale(1) contrast(1.05);transition:transform .7s var(--ease),filter .6s var(--ease)} /* editorial black & white that blooms to full colour on hover, matching the work grid + prints */ @media(hover:hover){.pf-item:hover img{transform:scale(1.035);filter:grayscale(0) contrast(1.02) saturate(1.03)}} @media(hover:none){.pf-item img{filter:contrast(1.03) saturate(1.03)}} /* closing call-to-action */ .pf-cta{border-top:2px solid var(--line-2);margin-top:clamp(1rem,3vw,2rem);padding-block:clamp(2.4rem,6vw,4rem);text-align:center} .pf-cta h2{font-family:var(--display);font-synthesis:none;font-size:var(--fs-mega);text-transform:uppercase;letter-spacing:-.035em;line-height:.85;color:var(--ink)} .pf-cta h2 b{color:var(--red)} .pf-cta p{margin:1rem auto 1.8rem;max-width:44ch;color:var(--ink-2);font-size:var(--fs-lede);font-weight:500} .pf-cta-btns{display:flex;flex-wrap:wrap;gap:.8rem 1.2rem;justify-content:center;align-items:center} /* portfolio → Instagram lead band (dark card, inverts to red on hover) */ .pf-ig{padding-block:clamp(1.6rem,3.5vw,2.6rem)} .pf-ig-card{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.2rem 2rem; background:var(--ink);border:2px solid var(--ink);color:var(--paper); padding:clamp(1.5rem,3.2vw,2.4rem) clamp(1.5rem,3.6vw,2.8rem); transition:background .3s var(--ease),border-color .3s var(--ease),transform .3s var(--ease),box-shadow .3s var(--ease)} @media(hover:hover){.pf-ig-card:hover{background:var(--red);border-color:var(--red);transform:translateY(-4px);box-shadow:0 26px 55px -30px oklch(0.18 0.004 60 / .55)}} .pf-ig-card:active{transform:translateY(-1px)} .pf-ig-txt{max-width:52ch} .pf-ig-txt .k{display:block;font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--red-ink);margin-bottom:.5rem;transition:color .3s var(--ease)} @media(hover:hover){.pf-ig-card:hover .pf-ig-txt .k{color:var(--on-red)}} .pf-ig-txt h2{font-family:var(--display);font-synthesis:none;font-size:clamp(1.7rem,3.6vw,2.7rem);text-transform:uppercase;letter-spacing:-.025em;line-height:.95;color:var(--paper)} .pf-ig-txt p{margin-top:.6rem;font-size:var(--fs-lede);font-weight:500;line-height:1.5;color:rgba(241,239,236,.74);text-wrap:pretty} .pf-ig-txt p b{color:var(--paper);font-weight:700} .pf-ig-btn{display:inline-flex;align-items:center;gap:.55em;flex:none;white-space:nowrap; font-family:var(--display);font-synthesis:none;font-weight:800;letter-spacing:-.01em; font-size:clamp(1.05rem,2vw,1.35rem);color:var(--paper); border:2px solid rgba(241,239,236,.35);padding:.7em 1em;transition:border-color .3s var(--ease)} @media(hover:hover){.pf-ig-card:hover .pf-ig-btn{border-color:var(--on-red)}} .pf-ig-btn .ig-ic{flex:none} .pf-ig-btn .arw{transition:transform .3s var(--ease)} @media(hover:hover){.pf-ig-card:hover .pf-ig-btn .arw{transform:translate(.18em,-.18em)}} /* ================================================================= ABOUT (about.html) ================================================================= */ .about-hero{padding-top:clamp(7rem,15vh,10.5rem);padding-bottom:clamp(1.4rem,3vw,2.2rem)} .about-hero .eyebrow{font-family:var(--mono);font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--red-ink);margin:0 0 clamp(.8rem,1.6vw,1.2rem)} .about-hero h1{font-family:var(--display);font-synthesis:none;font-size:var(--fs-mega);letter-spacing:-.035em;text-transform:uppercase;line-height:.85;color:var(--ink)} .about-hero h1 b{color:var(--red)} .about-hero .lede{margin-top:clamp(1rem,2vw,1.5rem);max-width:56ch;color:var(--ink-2);font-size:var(--fs-lede);font-weight:500;text-wrap:pretty} .about-hero .about-meta{margin-top:clamp(.9rem,2vw,1.3rem);font-family:var(--mono);font-size:.78rem;letter-spacing:.02em;color:var(--muted)} /* Worked-with credibility strip — a structured roster (name + role under a top rule per column), mirroring the "How I work" cards so the page reads as one system */ .about-clients{padding-block:clamp(1.8rem,4.5vw,3.2rem);border-top:2px solid var(--line-2)} .about-clients .eyebrow{font-family:var(--mono);font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--red-ink);margin:0 0 clamp(1.2rem,2.4vw,1.8rem)} .client-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr;gap:clamp(1rem,2.4vw,1.6rem)} /* auto-fit: the roster balances itself at any count — 2 today, more as clients land */ @media(min-width:620px){.client-list{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}} .client-list li{border-top:2px solid var(--line-2);padding-top:1rem;display:flex;flex-direction:column;gap:.45rem} .client-name{font-family:var(--display);font-synthesis:none;font-size:clamp(1.5rem,2.6vw,2.1rem);text-transform:uppercase;letter-spacing:-.02em;line-height:1;color:var(--ink)} .client-role{font-family:var(--mono);font-size:.74rem;letter-spacing:.03em;text-transform:uppercase;color:var(--muted);line-height:1.5} .client-note{margin-top:clamp(1.2rem,2.6vw,1.8rem);max-width:60ch;color:var(--muted);font-size:.95rem;font-weight:500;line-height:1.55;text-wrap:pretty} .about-body{display:grid;grid-template-columns:1fr;gap:clamp(1.6rem,4vw,3.2rem);align-items:start;padding-block:clamp(1.6rem,4vw,3rem)} @media(min-width:840px){.about-body{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}} .about-portrait{aspect-ratio:4/5;overflow:hidden;background:var(--paper-2)} @media(min-width:840px){.about-portrait{position:sticky;top:6rem}} .about-text{max-width:60ch} .about-text p{color:var(--ink-2);margin-bottom:1.1rem;line-height:1.65} .about-text .about-lead{font-family:var(--display);font-synthesis:none;font-weight:700;text-transform:none;letter-spacing:-.01em;font-size:clamp(1.5rem,3vw,2.2rem);line-height:1.12;color:var(--ink);margin-bottom:1.4rem} .about-text .brk{margin-top:.6rem} .about-how{padding-block:clamp(2.4rem,5vw,4rem)} .how-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr;gap:clamp(1rem,2.4vw,1.6rem)} @media(min-width:620px){.how-list{grid-template-columns:repeat(2,1fr)}} .how-list li{border-top:2px solid var(--line-2);padding-top:1.1rem;position:relative} .how-n{font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;color:var(--red-ink);display:block;margin-bottom:.6rem} .how-list h3{font-family:var(--display);font-synthesis:none;font-size:clamp(1.3rem,2.2vw,1.7rem);text-transform:uppercase;letter-spacing:-.02em;color:var(--ink);line-height:1;margin-bottom:.5rem} .how-list p{color:var(--ink-2);font-size:.98rem;line-height:1.5;margin:0} /* ================================================================= WHATSAPP FLOATING CONTACT (injected on every page by app.js) ================================================================= */ .wa-fab{position:fixed;right:clamp(1rem,3vw,2.1rem);bottom:clamp(1rem,3vw,2.1rem);z-index:65; width:clamp(52px,6vw,60px);height:clamp(52px,6vw,60px);display:flex;align-items:center;justify-content:center; background:#25D366;color:#fff;border-radius:50%;box-shadow:0 12px 30px -8px rgba(0,0,0,.45); transition:transform .25s var(--ease),box-shadow .25s var(--ease)} .wa-fab svg{width:56%;height:56%} @media(hover:hover){.wa-fab:hover{transform:translateY(-3px) scale(1.05);box-shadow:0 18px 40px -10px rgba(0,0,0,.55)}} .wa-fab:active{transform:scale(.95)} @media (prefers-reduced-motion:reduce){.wa-fab{transition:none}} /* ================================================================= LIGHTBOX (galleries — injected by app.js) ================================================================= */ .lb{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center; background:oklch(0.14 0.004 60 / .94);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px); opacity:0;transition:opacity .3s var(--ease)} .lb.open{display:flex;opacity:1} .lb-stage{max-width:92vw;max-height:88vh;display:flex;align-items:center;justify-content:center} .lb-stage img{max-width:92vw;max-height:88vh;width:auto;height:auto;object-fit:contain;background:var(--paper-2);box-shadow:0 40px 90px -25px #000} .lb-btn{position:absolute;background:none;border:none;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center; width:clamp(44px,6vw,56px);height:clamp(44px,6vw,56px);opacity:.75;transition:opacity .2s var(--ease),transform .2s var(--ease)} .lb-btn svg{width:60%;height:60%} @media(hover:hover){.lb-btn:hover{opacity:1}} .lb-close{top:clamp(.6rem,2vw,1.4rem);right:clamp(.6rem,2vw,1.4rem)} .lb-prev{left:clamp(.3rem,1.5vw,1.2rem);top:50%;transform:translateY(-50%)} .lb-next{right:clamp(.3rem,1.5vw,1.2rem);top:50%;transform:translateY(-50%)} @media(hover:hover){.lb-prev:hover{transform:translateY(-50%) translateX(-3px)}.lb-next:hover{transform:translateY(-50%) translateX(3px)}} .lb-count{position:absolute;bottom:clamp(.7rem,2vw,1.4rem);left:50%;transform:translateX(-50%);color:#fff; font-family:var(--mono);font-size:.78rem;letter-spacing:.12em;opacity:.85} .lb.solo .lb-prev,.lb.solo .lb-next,.lb.solo .lb-count{display:none} @media (prefers-reduced-motion:reduce){.lb{transition:none}} /* ================================================================= STORY / CASE STUDY (story-proposal.html) ================================================================= */ .story-hero{padding-top:clamp(7rem,15vh,10.5rem);padding-bottom:clamp(1.6rem,3.5vw,2.6rem);max-width:60ch} .story-hero .eyebrow{font-family:var(--mono);font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--red-ink);margin:0 0 clamp(.8rem,1.6vw,1.2rem)} .story-hero h1{font-family:var(--display);font-synthesis:none;font-size:var(--fs-mega);letter-spacing:-.035em;text-transform:uppercase;line-height:.85;color:var(--ink)} .story-hero h1 b{color:var(--red)} .story-hero .meta{margin-top:clamp(1rem,2vw,1.4rem);font-family:var(--mono);font-size:.8rem;letter-spacing:.03em;color:var(--muted)} .story-hero .lede{margin-top:1rem;color:var(--ink-2);font-size:var(--fs-lede);font-weight:500;text-wrap:pretty} .story-block{padding-block:clamp(1.4rem,3.5vw,2.6rem)} .story-fig{overflow:hidden;background:var(--paper-2)} .story-fig img{width:100%;height:auto;display:block;filter:contrast(1.03) saturate(1.03)} .story-fig.tall{max-width:760px;margin-inline:auto} .story-cap{margin-top:.9rem;max-width:56ch;color:var(--ink-2);font-size:var(--fs-lede);font-weight:500;line-height:1.5;text-wrap:pretty} .story-cap b{color:var(--ink);font-weight:700} .story-cap .step{font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--red-ink);display:block;margin-bottom:.5rem} /* a two-up pairing for beats that read well side by side */ .story-pair{display:grid;grid-template-columns:1fr;gap:clamp(.7rem,1.6vw,1.2rem)} @media(min-width:720px){.story-pair{grid-template-columns:1fr 1fr}} /* closing gallery (remaining frames) → feeds the lightbox */ .story-gallery{columns:2;column-gap:clamp(.7rem,1.6vw,1.2rem);margin-top:clamp(1rem,2.5vw,1.8rem)} @media(min-width:900px){.story-gallery{columns:3}} .story-gallery img{width:100%;height:auto;display:block;margin:0 0 clamp(.7rem,1.6vw,1.2rem);break-inside:avoid;filter:grayscale(1) contrast(1.05);transition:filter .6s var(--ease),transform .6s var(--ease);cursor:zoom-in} @media(hover:hover){.story-gallery img:hover{filter:grayscale(0) contrast(1.02) saturate(1.03);transform:scale(1.02)}} @media(hover:none){.story-gallery img{filter:contrast(1.03) saturate(1.03)}} /* ================================================================= PREMIUM LAYER — page transitions, image fade-in, cursor, polish ================================================================= */ /* ---- page transitions: a soft paper curtain between pages (no router) ---- */ .pt{position:fixed;inset:0;z-index:150;background:var(--paper);pointer-events:none;opacity:0;transition:opacity .5s var(--ease-2819-soft)} .pt.cover{opacity:1;pointer-events:auto} @media (prefers-reduced-motion:reduce){.pt{display:none}} /* ---- image fade-in (blur-up lite): photos resolve in gently, no harsh pop ---- */ html.js main img{opacity:0;transition:opacity .8s var(--ease)} html.js main img.is-loaded{opacity:1} html.js .hero-media img{opacity:1} /* hero paints instantly — protects LCP */ @media (prefers-reduced-motion:reduce){html.js main img{opacity:1;transition:none}} /* ---- typographic + state polish ---- */ .tier-price,.a-price,.print-size,.hero-meta,.rev-cred{font-variant-numeric:tabular-nums} .sec-head h2,.pf-hero h1,.about-hero h1,.pricing-hero h1,.prints-hero h1,.story-hero h1, .pf-sec-head h2,.creed-copy h2,.mission-head h2,.enq-intro h2,.pf-cta h2{text-wrap:balance} /* ---- custom 404 ---- */ .nf{min-height:68vh;display:flex;flex-direction:column;justify-content:center;padding-block:clamp(6rem,15vh,9rem)} .nf .eyebrow{font-family:var(--mono);font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--red-ink);margin:0 0 1rem} .nf h1{font-family:var(--display);font-synthesis:none;font-size:clamp(5rem,24vw,17rem);line-height:.78;letter-spacing:-.045em;color:var(--red)} .nf p{font-size:var(--fs-lede);font-weight:500;color:var(--ink-2);margin:1.2rem 0 2rem;max-width:44ch} .nf-links{display:flex;flex-wrap:wrap;gap:1rem 1.4rem;align-items:center} /* ================================================================= PRICING — deposit booking (Stripe) + terms consent ================================================================= */ .tier-actions{margin-top:auto;display:flex;flex-direction:column;gap:.55rem;padding-top:1.3rem} .tier-actions .tier-book{width:100%;margin-top:0} .tier-ask{align-self:center;font-family:var(--mono);font-size:.74rem;letter-spacing:.03em;color:var(--muted);text-decoration:underline;text-underline-offset:.15em;transition:color .2s var(--ease)} @media(hover:hover){.tier-ask:hover{color:var(--red-ink)}} /* terms consent — must be ticked before a deposit button works */ .pay-consent{display:flex;align-items:flex-start;gap:.65rem;margin:clamp(1.4rem,3vw,2rem) 0 .8rem;font-size:.95rem;line-height:1.5;color:var(--ink-2);cursor:pointer;max-width:64ch} .pay-consent input{flex:none;width:1.15rem;height:1.15rem;margin-top:.12rem;accent-color:var(--red);cursor:pointer} .pay-consent a{color:var(--red-ink);font-weight:700;text-decoration:underline;text-underline-offset:.15em} .pay-consent.needed{color:var(--red-ink)} .pay-consent.needed input{outline:2px solid var(--red);outline-offset:3px;border-radius:2px} @media (prefers-reduced-motion:no-preference){.pay-consent.needed{animation:consent-nudge .4s var(--ease)}} @keyframes consent-nudge{0%,100%{transform:translateX(0)}25%{transform:translateX(-4px)}75%{transform:translateX(4px)}} /* ================================================================= LEGAL / TERMS (terms.html) ================================================================= */ .legal{max-width:70ch;padding-top:clamp(7rem,15vh,10.5rem);padding-bottom:clamp(3rem,7vw,5rem)} .legal .eyebrow{font-family:var(--mono);font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--red-ink);margin:0 0 clamp(.8rem,1.6vw,1.2rem)} .legal h1{font-family:var(--display);font-synthesis:none;font-size:var(--fs-mega);letter-spacing:-.035em;text-transform:uppercase;line-height:.85;color:var(--ink)} .legal h1 b{color:var(--red)} .legal-intro{margin-top:clamp(1.2rem,2.5vw,1.8rem);color:var(--ink-2);font-size:var(--fs-lede);font-weight:500;line-height:1.55;text-wrap:pretty} .legal-intro b{color:var(--ink);font-weight:700} .legal h2{font-family:var(--display);font-synthesis:none;font-size:clamp(1.15rem,2vw,1.5rem);text-transform:uppercase;letter-spacing:-.01em;color:var(--ink);margin:clamp(2rem,4vw,2.8rem) 0 .6rem;padding-top:clamp(1.2rem,2.4vw,1.6rem);border-top:1px solid var(--line)} .legal p{color:var(--ink-2);line-height:1.65;margin-bottom:.9rem} .legal p b{color:var(--ink);font-weight:700} .legal a{color:var(--red-ink);font-weight:600;text-decoration:underline;text-underline-offset:.15em} .legal-cta{display:flex;flex-wrap:wrap;gap:1rem 1.4rem;align-items:center;margin-top:clamp(2.4rem,5vw,3.4rem);padding-top:clamp(1.6rem,3vw,2.2rem);border-top:2px solid var(--line-2)}