:root{--cream:#f3eadc;--ink:#11110f;--deep:#171715;--deep-soft:#20201d;--olive:#70794c;--rust:#c56a43;--gold:#d6ad62;--clay:#d9b792;--mist:rgba(243,234,220,.78);--line:rgba(243,234,220,.16);--glow:rgba(214,173,98,.45);--title:"Unbounded",sans-serif;--body:"Inter",sans-serif;--be-gold:#ffd966;--be-night:#281f4c;--be-rose:#f15962;--be-orange:#fb874d;--be-cream:#fff2cc}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:var(--body);color:var(--cream);background:radial-gradient(circle at 78% 12%,rgba(197,106,67,.13),transparent 28vw),radial-gradient(circle at 16% 34%,rgba(112,121,76,.12),transparent 30vw),linear-gradient(135deg,var(--deep),#10100f 58%,#1b1a17);overflow-x:hidden}a{color:inherit;text-decoration:none}.noise{position:fixed;inset:0;pointer-events:none;z-index:20;opacity:.11;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 250 250' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E")}.phosphene{position:fixed;pointer-events:none;z-index:0;border-radius:999px;filter:blur(22px);mix-blend-mode:screen;opacity:.42;transform:translate3d(0,0,0)}.phosphene--one{width:19vw;height:19vw;min-width:180px;min-height:180px;right:8vw;top:13vh;background:radial-gradient(circle,rgba(214,173,98,.9),transparent 63%)}.phosphene--two{width:28vw;height:28vw;min-width:260px;min-height:260px;left:-7vw;top:58vh;background:radial-gradient(circle,rgba(197,106,67,.62),transparent 66%)}.phosphene--three{width:22vw;height:22vw;min-width:220px;min-height:220px;right:-6vw;bottom:-4vw;background:radial-gradient(circle,rgba(112,121,76,.7),transparent 68%)}.cursor-dot{position:fixed;width:20px;height:20px;border:1px solid var(--gold);border-radius:50%;pointer-events:none;z-index:30;transform:translate(-50%,-50%);mix-blend-mode:difference;opacity:.78;box-shadow:0 0 22px var(--glow)}.topbar{position:fixed;top:0;left:0;right:0;z-index:10;display:flex;justify-content:space-between;align-items:center;padding:22px clamp(20px,4vw,56px);font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--mist)}.brand{font-family:var(--title);font-weight:900;letter-spacing:-.04em}.topbar nav{display:flex;gap:22px}.section{min-height:100vh;padding:120px clamp(20px,6vw,90px);position:relative;z-index:1}.orb{position:absolute;pointer-events:none;border-radius:999px;filter:blur(8px);opacity:.65}.orb--hero{width:26vw;height:26vw;right:8vw;bottom:14vh;border:1px solid rgba(214,173,98,.38);box-shadow:inset 0 0 70px rgba(214,173,98,.16),0 0 80px rgba(214,173,98,.12)}.orb--contact{width:42vw;height:42vw;right:-11vw;top:18vh;background:radial-gradient(circle,rgba(214,173,98,.2),transparent 62%)}.hero{display:grid;align-content:end;padding-bottom:70px}.eyebrow{margin:0 0 18px;text-transform:uppercase;letter-spacing:.14em;font-size:11px;font-weight:700;color:var(--gold)}.hero__title,.contact h2{font-family:var(--title);font-size:clamp(52px,9vw,148px);line-height:.88;letter-spacing:-.075em;max-width:1200px;margin:0}.hero__intro{max-width:600px;font-size:clamp(17px,2vw,24px);line-height:1.42;margin:34px 0 0 auto;color:var(--mist)}.scroll-hint{position:absolute;right:clamp(20px,6vw,90px);bottom:35px;font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:var(--mist)}.scroll-hint::after{content:"";display:inline-block;width:8px;height:8px;margin-left:10px;border-radius:50%;background:var(--gold);box-shadow:0 0 18px var(--gold);animation:pulse 1.9s ease-in-out infinite}.projects{padding-top:90px}.projects__head{display:flex;justify-content:space-between;gap:40px;align-items:end;margin-bottom:55px}.projects__statement{max-width:520px;font-family:var(--title);font-size:clamp(24px,3vw,42px);line-height:1.05;letter-spacing:-.05em;margin:0}.project{position:relative;min-height:78vh;margin:0 0 42px;border-radius:34px;overflow:hidden;border:1px solid var(--line);display:grid;grid-template-columns:minmax(0,1.2fr) minmax(300px,.8fr);background:rgba(32,32,29,.8);box-shadow:0 25px 90px rgba(0,0,0,.28);transition:transform .45s cubic-bezier(.2,.8,.2,1),border-color .3s}.project:hover{transform:translateY(-8px);border-color:rgba(243,234,220,.35)}.project__meta{position:absolute;inset:24px 26px auto;z-index:3;display:grid;grid-template-columns:80px 1fr auto;gap:20px;font-size:10px;text-transform:uppercase;letter-spacing:.11em}.project__body{position:relative;z-index:2;padding:110px 4vw 50px;display:flex;flex-direction:column;justify-content:flex-end}.project h2{font-family:var(--title);font-size:clamp(58px,8vw,128px);line-height:.78;letter-spacing:-.075em;margin:0 0 26px}.project__body p{max-width:600px;font-size:18px;line-height:1.5;color:var(--mist)}.project__cta{display:inline-block;margin-top:28px;font-size:11px;text-transform:uppercase;letter-spacing:.12em}.project__visual{position:relative;min-height:100%;overflow:hidden}.project--belle{background:var(--be-cream);color:var(--be-night);border-color:rgba(255,217,102,.35)}.project--belle .project__body p{color:rgba(40,31,76,.75)}.project--belle .project__meta{color:rgba(40,31,76,.65)}.project--belle h2{font-family:Georgia,'Times New Roman',serif;font-weight:400;letter-spacing:-.065em;color:var(--be-rose)}.project__visual--belle{background:linear-gradient(180deg,var(--be-gold),var(--be-orange) 60%,var(--be-night))}.be-sun{position:absolute;width:42vw;height:42vw;left:50%;top:15%;transform:translateX(-50%);border-radius:50%;background:radial-gradient(circle,#fff8ca 0,var(--be-gold) 58%,transparent 61%);box-shadow:0 0 80px rgba(255,217,102,.45)}.be-window{position:absolute;width:56%;height:70%;left:22%;bottom:-2%;border:2px solid var(--be-cream);border-radius:50% 50% 3px 3px;background:linear-gradient(rgba(241,89,98,.25),rgba(40,31,76,.82));box-shadow:12px 12px 0 rgba(241,89,98,.38)}.project--rivages{background:#b96c50}.project__visual--rivages{background:radial-gradient(circle at 48% 42%,rgba(243,234,220,.8),transparent 5%),linear-gradient(150deg,#7b8a82,#bf7656 54%,#342e2c)}.project__visual--rivages::before{content:"";position:absolute;inset:16% 12%;border:1px solid rgba(243,234,220,.45);border-radius:50%}.project--conspiracy{background:#171614}.project__visual--conspiracy{background:#ede8dd}.project__visual--conspiracy span{position:absolute;width:42%;height:56%;left:29%;top:22%;background:#151515;clip-path:polygon(38% 0,54% 0,50% 48%,72% 32%,54% 100%,39% 100%,45% 54%,21% 68%)}.project--elwin{background:#5d6b60}.project__visual--elwin{background:linear-gradient(135deg,#d8d4c9 0 52%,#21352d 52%)}.project__visual--elwin::after{content:"";position:absolute;width:54%;height:55%;left:23%;top:20%;border-radius:26px;background:#f3eadc;box-shadow:0 25px 80px rgba(0,0,0,.3)}.project--soon{cursor:default}.project--soon:hover{transform:none}.pieces{border-top:1px solid var(--line)}.pieces__intro{display:grid;grid-template-columns:.45fr 1fr;gap:30px;align-items:end;margin-bottom:60px}.pieces__intro h2{font-family:var(--title);font-size:clamp(44px,6vw,90px);line-height:.9;letter-spacing:-.065em;margin:0}.pieces__grid{display:grid;grid-template-columns:1.2fr .8fr .8fr 1.2fr;grid-auto-rows:minmax(320px,48vh);gap:15px}.piece{position:relative;border-radius:24px;overflow:hidden;border:1px solid var(--line);display:flex;align-items:flex-end;padding:20px}.piece span{font-size:10px;text-transform:uppercase;letter-spacing:.1em}.piece--lino{background:repeating-linear-gradient(45deg,#e9dfca 0 3px,#1c1a17 3px 6px)}.piece--be{background:radial-gradient(circle,var(--be-gold) 0 26%,transparent 27%),var(--be-rose)}.piece--mileway{background:linear-gradient(160deg,#cdd1c8 0 50%,#4d655b 50%)}.piece--misc{background:radial-gradient(circle at 60% 40%,#d6ad62 0 10%,transparent 11%),#623f35}.about{border-top:1px solid var(--line)}.about__grid{display:grid;grid-template-columns:1.3fr .7fr;gap:8vw;align-items:start}.about h2{font-family:var(--title);font-size:clamp(48px,7vw,110px);line-height:.9;letter-spacing:-.07em;margin:0}.about__copy{font-size:19px;line-height:1.6;color:var(--mist)}.contact{min-height:80vh;border-top:1px solid var(--line);display:flex;flex-direction:column;justify-content:center}.contact__intro{max-width:620px;margin:28px 0 0;font-size:clamp(18px,2vw,24px);line-height:1.45;color:var(--mist)}.contact__mail{display:inline-block;width:fit-content;margin:36px 0;font-family:var(--title);font-size:clamp(26px,4vw,58px);letter-spacing:-.06em;border-bottom:3px solid var(--rust);text-shadow:0 0 28px rgba(214,173,98,.14)}.contact__links{display:flex;gap:22px;flex-wrap:wrap;text-transform:uppercase;letter-spacing:.1em;font-size:12px;color:var(--mist)}.reveal,.reveal-text{opacity:0}.word{display:inline-block;overflow:hidden}.page-transition{position:fixed;inset:0;z-index:100;pointer-events:none;display:grid;place-items:center;background:var(--be-night);clip-path:circle(0% at 78% 65%);color:var(--be-cream);opacity:0}.page-transition span{position:absolute;bottom:8vh;font-family:Georgia,serif;font-size:clamp(54px,10vw,150px);color:var(--be-rose)}.page-transition__sun{width:44vw;height:44vw;min-width:260px;min-height:260px;border-radius:50%;background:var(--be-gold);box-shadow:0 0 120px rgba(255,217,102,.5)}@keyframes pulse{0%,100%{transform:scale(.75);opacity:.55}50%{transform:scale(1.25);opacity:1}}@media(max-width:850px){.section{padding:96px 20px}.topbar{padding:18px 20px}.topbar nav a:nth-child(2){display:none}.hero{min-height:100svh}.hero__intro{margin-left:0}.projects__head,.pieces__intro,.about__grid{grid-template-columns:1fr;display:grid}.projects__head{align-items:start}.project{min-height:82svh;grid-template-columns:1fr;grid-template-rows:1fr .78fr}.project__meta{grid-template-columns:38px 1fr;inset:18px 18px auto}.project__meta span:last-child{display:none}.project__body{padding:86px 20px 28px;grid-row:1}.project__visual{grid-row:2;min-height:42svh}.project h2{font-size:16vw}.project__body p{font-size:16px}.be-sun{width:70vw;height:70vw}.pieces__grid{grid-template-columns:1fr 1fr;grid-auto-rows:38vh}.about__copy{font-size:17px}.cursor-dot{display:none}.page-transition__sun{width:90vw;height:90vw}.page-transition span{font-size:18vw}}@media(max-width:520px){.topbar nav{gap:14px}.topbar nav a:first-child{display:none}.hero__title{font-size:14.5vw}.projects{padding-left:12px;padding-right:12px}.project{border-radius:22px}.project__body{padding-left:18px;padding-right:18px}.pieces__grid{grid-template-columns:1fr}.pieces__grid .piece{min-height:45vh}}


/* index v3 — stronger portfolio direction */
.hero__index{position:absolute;left:clamp(20px,6vw,90px);top:100px;font:600 10px/1 var(--body);letter-spacing:.14em;color:rgba(243,234,220,.42)}
.hero__services{display:flex;gap:9px;flex-wrap:wrap;margin:26px 0 0 auto;max-width:600px}.hero__services span{border:1px solid var(--line);border-radius:999px;padding:8px 12px;font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:var(--mist);backdrop-filter:blur(8px)}
.projects__statement br{display:none}.project{isolation:isolate}.project::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;transition:opacity .45s;background:linear-gradient(90deg,transparent 35%,rgba(255,255,255,.08))}.project:hover::after{opacity:1}.project__cta i{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--be-rose);margin-right:7px;box-shadow:0 0 16px var(--be-rose)}
.project--belle .project__body{background:linear-gradient(90deg,var(--be-cream) 0%,rgba(255,242,204,.96) 72%,rgba(255,242,204,.68) 100%)}
.be-window{display:grid;place-items:center;align-content:center;gap:10px;color:var(--be-cream);font-family:Georgia,serif}.be-window span{font:600 10px/1 var(--body);letter-spacing:.15em}.be-window b{font-size:clamp(28px,3vw,58px);font-weight:400}.be-ribbon{position:absolute;width:130%;height:44px;left:-18%;top:18%;border-radius:50%;border-top:9px solid var(--be-rose);border-bottom:9px solid var(--be-orange);transform:rotate(-12deg);opacity:.8}
.rivages-type{position:absolute;left:9%;bottom:10%;font-family:var(--title);font-size:clamp(34px,5vw,84px);letter-spacing:-.08em;mix-blend-mode:overlay}.rivages-disc{position:absolute;width:38%;aspect-ratio:1;border:1px solid rgba(243,234,220,.7);border-radius:50%;right:11%;top:23%;box-shadow:0 0 0 24px rgba(243,234,220,.05),0 0 0 48px rgba(243,234,220,.035)}
.conspiracy-type{position:absolute;right:9%;bottom:10%;font-family:var(--title);font-weight:900;font-size:clamp(24px,3vw,54px);line-height:.82;letter-spacing:-.08em;color:#171614}.conspiracy-beam{position:absolute;inset:-20% auto -20% 6%;width:42%;background:linear-gradient(90deg,transparent,rgba(255,217,102,.28),transparent);transform:rotate(13deg);filter:blur(10px)}
.elwin-ui{position:absolute;width:62%;height:62%;left:19%;top:19%;border-radius:28px;background:#f3eadc;color:#21352d;padding:28px;box-shadow:0 30px 90px rgba(0,0,0,.32);display:grid;grid-template-columns:repeat(3,1fr);gap:9px;align-content:end}.elwin-ui i{height:45%;min-height:50px;border-radius:12px;background:#d5d0c3}.elwin-ui strong{position:absolute;left:28px;top:25px;font-family:var(--title);letter-spacing:-.06em}
.pieces__grid{grid-template-columns:1.25fr .75fr .75fr 1.25fr}.piece{transition:transform .4s ease,border-color .3s}.piece:hover{transform:translateY(-6px);border-color:rgba(243,234,220,.38)}
@media(min-width:851px){.projects .project:nth-of-type(even){grid-template-columns:minmax(300px,.8fr) minmax(0,1.2fr)}.projects .project:nth-of-type(even) .project__body{grid-column:2}.projects .project:nth-of-type(even) .project__visual{grid-column:1;grid-row:1}.project--belle{min-height:86vh}.project--belle h2{font-size:clamp(76px,9vw,150px)} }
@media(max-width:850px){.hero__index{top:82px}.hero__services{margin-left:0}.projects__statement br{display:block}.project::after{display:none}.project--belle .project__body{background:var(--be-cream)}.be-ribbon{height:30px}.elwin-ui{width:72%;height:68%;left:14%;top:16%}}
@media(max-width:520px){.hero__services{gap:6px}.hero__services span{font-size:9px;padding:7px 9px}.projects__statement{font-size:10vw}.project{min-height:78svh}.project__meta{font-size:8px}.project__visual{min-height:36svh}.pieces__intro h2{font-size:13vw}}

/* index v4 — Phosphène as manifesto */
.hero{align-content:center;padding-top:120px;padding-bottom:70px;overflow:hidden}
.hero__definition{position:relative;z-index:2;width:min(1180px,92%);margin-top:4vh}
.hero__name{font-family:var(--title);font-size:clamp(14px,1.35vw,21px);font-weight:900;letter-spacing:-.045em;margin-bottom:5px}
.hero__phonetic{font-family:var(--body);font-size:clamp(12px,1vw,15px);color:rgba(243,234,220,.52);letter-spacing:.04em;margin-bottom:clamp(32px,5vh,62px)}
.hero .hero__title{font-family:var(--title);font-size:clamp(48px,7.2vw,116px);line-height:.94;letter-spacing:-.07em;max-width:1240px;text-wrap:balance}
.hero .hero__intro{margin:clamp(30px,5vh,58px) 0 0 clamp(0px,10vw,150px);max-width:720px;font-family:Georgia,'Times New Roman',serif;font-size:clamp(20px,2vw,30px);line-height:1.35;color:rgba(243,234,220,.78)}
.hero__credit{position:absolute;left:clamp(20px,6vw,90px);bottom:34px;font-size:10px;text-transform:uppercase;letter-spacing:.13em;color:rgba(243,234,220,.5)}
.hero__mobile-glow{display:none}
.cursor-dot{width:42px;height:42px;border:0;background:radial-gradient(circle,rgba(255,239,185,.9) 0,rgba(214,173,98,.42) 24%,rgba(214,173,98,.08) 58%,transparent 72%);filter:blur(.4px);mix-blend-mode:screen;box-shadow:0 0 30px rgba(214,173,98,.62),0 0 95px rgba(214,173,98,.32);opacity:.9}
@media (pointer:fine){body{cursor:none}a{cursor:none}}
@media(max-width:850px){
  .hero{align-content:center;padding-top:105px;padding-bottom:86px}
  .hero__definition{width:100%;margin-top:0}
  .hero__phonetic{margin-bottom:34px}
  .hero .hero__title{font-size:clamp(43px,11.5vw,76px);line-height:.97;letter-spacing:-.065em}
  .hero .hero__intro{margin:34px 0 0;font-size:clamp(19px,5.2vw,26px);max-width:92%}
  .hero .hero__intro br{display:none}
  .hero__credit{left:20px;bottom:28px;max-width:52%;line-height:1.45}
  .scroll-hint{bottom:28px}
  .hero__mobile-glow{display:block;position:absolute;width:70vw;height:70vw;right:-24vw;top:17vh;border-radius:50%;background:radial-gradient(circle,rgba(255,232,160,.62) 0,rgba(214,173,98,.18) 30%,transparent 68%);filter:blur(12px);mix-blend-mode:screen;opacity:.7;pointer-events:none}
}
@media(max-width:520px){
  .hero .hero__title{font-size:11.7vw}
  .hero__name{font-size:13px}
  .hero__phonetic{font-size:12px}
  .hero__index{font-size:8px}
  .hero__credit{font-size:8px}
  .scroll-hint{font-size:9px}
}

/* V5 — robust visibility + phosphene pointer */
/* Content stays readable even when external animation libraries are unavailable. */
.reveal,.reveal-text{opacity:1}
.cursor-glow{position:fixed;left:0;top:0;width:260px;height:260px;border-radius:50%;pointer-events:none;z-index:4;transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(255,239,185,.34) 0%,rgba(214,173,98,.18) 24%,rgba(197,106,67,.08) 44%,transparent 70%);filter:blur(12px);mix-blend-mode:screen;opacity:.88;will-change:transform;transition:opacity .25s ease}
.cursor-dot{width:7px;height:7px;border:0;background:rgba(255,241,198,.9);box-shadow:0 0 14px rgba(255,232,160,.9),0 0 36px rgba(214,173,98,.65);mix-blend-mode:screen}
.hero::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 70% 40%,rgba(214,173,98,.07),transparent 34vw);z-index:0}.hero>*{position:relative}.hero__definition{z-index:2}.hero__name{font-size:clamp(16px,1.55vw,24px)}
.section-marker{position:absolute;right:clamp(20px,6vw,90px);top:120px;font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:rgba(243,234,220,.35)}
.about{min-height:88vh}.contact{min-height:88vh}.contact__links span{opacity:.45}
@media(max-width:850px){.cursor-glow,.cursor-dot{display:none}.section-marker{top:96px;right:20px}.about,.contact{min-height:auto}.hero::before{background:radial-gradient(circle at 84% 32%,rgba(214,173,98,.09),transparent 52vw)}}
\n\n/* V6 — wording cleanup + safer typography */\n/* No decorative portfolio index in the hero: the manifesto carries the hierarchy. */\n.projects__head{display:block;margin-bottom:38px}\n.projects__head .eyebrow{margin-bottom:0}\n/* Prevent animated word wrappers and tight display leading from clipping glyphs. */\n.word{overflow:visible;padding:.10em 0 .14em;margin:-.10em 0 -.14em}\n.hero .hero__title,.about h2,.pieces__intro h2,.contact h2{padding:.08em 0 .12em;margin-top:-.08em;margin-bottom:-.12em}\n.project h2{line-height:.88;padding:.08em 0 .12em;margin-top:-.08em}\n.project--belle h2{line-height:.9}\n@media(max-width:850px){.project h2{line-height:.9}.projects__head{margin-bottom:30px}}\n
/* V7 — cleaner hero hierarchy + no clipped display type */
/* Large typography: use comfortable leading and never mask glyph bounds. */
.word{display:inline;overflow:visible;padding:0;margin:0}
.hero .hero__title{line-height:1.02;letter-spacing:-.065em;padding:.08em .03em .12em 0;margin:-.08em 0 -.12em}
.project h2{line-height:.96;padding:.06em .03em .10em 0;margin:-.06em 0 20px}
.project--belle h2{line-height:.98}
.pieces__intro h2,.contact h2{line-height:1;padding:.06em .03em .10em 0;margin:-.06em 0 -.10em}

/* Keep the definition pure; author / practice sit in their own footer row. */
.hero__meta{position:absolute;left:clamp(20px,6vw,90px);right:clamp(20px,6vw,90px);bottom:30px;padding-top:16px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:24px;font-size:10px;text-transform:uppercase;letter-spacing:.12em;color:rgba(243,234,220,.5)}
.hero__meta span:last-child{text-align:right}
.scroll-hint,.hero__credit{display:none!important}

/* About: image-led rather than another manifesto sentence. */
.about__grid{grid-template-columns:minmax(280px,.9fr) minmax(300px,.7fr);gap:8vw;align-items:center}
.about__portrait{position:relative;min-height:62vh;border:1px solid var(--line);border-radius:28px;overflow:hidden;background:radial-gradient(circle at 68% 30%,rgba(214,173,98,.18),transparent 24%),linear-gradient(145deg,rgba(243,234,220,.06),rgba(243,234,220,.015));display:flex;align-items:flex-end;padding:20px}
.about__portrait::before{content:"";position:absolute;width:48%;aspect-ratio:1;border-radius:50%;left:26%;top:20%;border:1px solid rgba(243,234,220,.14);box-shadow:0 0 80px rgba(214,173,98,.10)}
.about__portrait span{position:relative;z-index:1;font-size:9px;text-transform:uppercase;letter-spacing:.14em;color:rgba(243,234,220,.42)}

@media(max-width:850px){
  .hero__meta{left:20px;right:20px;bottom:22px;display:grid;grid-template-columns:1fr;gap:5px;font-size:8px}
  .hero__meta span:last-child{text-align:left}
  .about__grid{grid-template-columns:1fr;gap:34px}
  .about__portrait{min-height:54svh}
  .project h2{line-height:.98}
}

/* V8 — mobile structure */
.menu-toggle{display:none;background:none;border:0;color:inherit;padding:8px;margin:-8px;position:relative;z-index:12}
.menu-toggle span{display:block;width:24px;height:1px;background:currentColor;margin:6px 0;transition:transform .25s ease,opacity .25s ease}

@media(max-width:850px){
  /* Header: compact burger menu, no cropped nav labels */
  .topbar{padding:16px 20px;background:linear-gradient(180deg,rgba(17,17,15,.72),rgba(17,17,15,0));backdrop-filter:blur(6px)}
  .menu-toggle{display:block}
  .topbar nav{position:fixed;inset:0;z-index:11;display:flex!important;flex-direction:column;justify-content:center;align-items:center;gap:28px;background:rgba(17,17,15,.96);font-family:var(--title);font-size:clamp(28px,9vw,48px);letter-spacing:-.045em;text-transform:none;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .25s ease,visibility .25s ease}
  .topbar nav a,.topbar nav a:nth-child(2){display:block!important}
  .topbar.menu-open nav{opacity:1;visibility:visible;pointer-events:auto}
  .topbar.menu-open .menu-toggle span:first-child{transform:translateY(3.5px) rotate(45deg)}
  .topbar.menu-open .menu-toggle span:last-child{transform:translateY(-3.5px) rotate(-45deg)}

  /* Hero starts much closer to the fixed header on phones. */
  .hero{min-height:auto;align-content:start;padding-top:76px;padding-bottom:88px}
  .hero__definition{margin-top:0}
  .hero__phonetic{margin-bottom:24px}
  .hero .hero__title{font-size:clamp(39px,10.8vw,70px);line-height:1.04}
  .hero .hero__intro{margin-top:28px;max-width:100%}
  .hero__meta{position:relative;left:auto;right:auto;bottom:auto;margin-top:46px;padding-top:14px}

  /* Project cards: less screen-filling, tighter rhythm. */
  .projects{padding-top:72px}
  .project{min-height:auto;margin-bottom:24px;border-radius:24px;grid-template-rows:auto 34svh}
  .project__body{min-height:350px;padding:78px 18px 24px}
  .project__visual{min-height:34svh}
  .project h2{font-size:clamp(50px,15vw,82px);margin-bottom:16px}
  .project__body p{font-size:15px;line-height:1.45;margin:0;max-width:95%}
  .project__cta{margin-top:20px}
  .project__meta{font-size:8px;inset:16px 16px auto;gap:10px}

  /* Fragments become a proper visual feed, not a thin horizontal strip. */
  .pieces{padding-top:80px;padding-bottom:80px}
  .pieces__intro{margin-bottom:30px;gap:14px}
  .pieces__grid{grid-template-columns:1fr 1fr;grid-auto-rows:auto;gap:10px}
  .piece{min-height:42vw;border-radius:16px;padding:14px}
  .piece:nth-child(1),.piece:nth-child(4){grid-row:span 2;min-height:calc(84vw + 10px)}
  .piece span{font-size:8px;line-height:1.25}
}

@media(max-width:520px){
  .hero{padding-top:72px}
  .section{padding-left:16px;padding-right:16px}
  .topbar{padding-left:16px;padding-right:16px}
  .hero__meta{font-size:7.5px}
  .project{border-radius:20px}
  .project__body{min-height:315px;padding-left:16px;padding-right:16px}
  .project__visual{min-height:31svh}
  .pieces__grid{gap:8px}
  .piece{min-height:44vw}
  .piece:nth-child(1),.piece:nth-child(4){min-height:calc(88vw + 8px)}
}

/* V10 — fluid project typography + square mobile fragments */
.project__body h2{
  font-size:clamp(48px,7.2vw,116px);
  line-height:.9;
  overflow-wrap:normal;
  word-break:normal;
  max-width:100%;
}
.project--conspiracy .project__body h2{
  font-size:clamp(42px,6vw,96px);
  letter-spacing:-.065em;
}
.conspiracy-type{
  font-size:clamp(20px,2.5vw,44px);
  max-width:82%;
}
@media(max-width:850px){
  .project__body h2{font-size:clamp(44px,13vw,88px)}
  .project--conspiracy .project__body h2{font-size:clamp(38px,10.8vw,70px);line-height:.94}
  .conspiracy-type{font-size:clamp(20px,7vw,38px);right:7%;max-width:86%}
  .pieces__grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:auto;gap:8px}
  .piece,.piece:nth-child(1),.piece:nth-child(4){min-height:0;aspect-ratio:1 / 1;grid-row:auto}
}
@media(max-width:520px){
  .pieces__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .piece,.piece:nth-child(1),.piece:nth-child(4){min-height:0;aspect-ratio:1 / 1;grid-row:auto}
}

/* V11 — mobile hero rhythm + true equal fragment squares */
@media(max-width:850px){
  /* Bring the definition closer to the fixed header without crowding it. */
  .hero{padding-top:58px;padding-bottom:72px}
  .hero__definition{margin-top:0}
  .hero__phonetic{margin-bottom:20px}
  .hero .hero__intro{margin-top:24px}
  .hero__meta{margin-top:34px}

  /* Fragments: strict, equal square tiles — no masonry / tall exceptions. */
  .pieces__grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    grid-auto-rows:auto;
    gap:8px;
  }
  .pieces__grid .piece,
  .pieces__grid .piece:nth-child(1),
  .pieces__grid .piece:nth-child(4){
    width:100%;
    height:auto;
    min-height:0!important;
    aspect-ratio:1 / 1;
    grid-row:auto!important;
  }
}
@media(max-width:520px){
  .hero{padding-top:54px;padding-bottom:66px}
  .pieces__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .pieces__grid .piece,
  .pieces__grid .piece:nth-child(1),
  .pieces__grid .piece:nth-child(4){
    min-height:0!important;
    aspect-ratio:1 / 1;
  }
}

/* V12 — project cards grounded in the real identities */
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}

/* The Conspiracy: the supplied logo is the display typography. */
.project--conspiracy{background:#1f1b1b;color:#f5efe4}
.project--conspiracy .project__body p{color:rgba(245,239,228,.72)}
.project--conspiracy .project__meta{color:rgba(245,239,228,.58)}
.project__body--conspiracy{justify-content:flex-end}
.conspiracy-logo-title{display:block;width:min(100%,620px);height:auto;object-fit:contain;object-position:left center;margin:0 0 22px;border-radius:0;mix-blend-mode:normal}
.project__visual--conspiracy{background:#1f1b1b;isolation:isolate}
.project__visual--conspiracy::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 46% 48%,rgba(255,246,225,.08),transparent 28%),linear-gradient(120deg,transparent 0 36%,rgba(247,239,221,.04) 36% 49%,transparent 49%);z-index:0}
.conspiracy-beam{position:absolute;left:14%;top:11%;width:76%;height:82%;background:linear-gradient(112deg,rgba(248,240,222,.92),rgba(248,240,222,.06) 65%,transparent 66%);clip-path:polygon(0 46%,100% 0,72% 100%);opacity:.8;filter:blur(.15px);z-index:1}
.conspiracy-mark{position:absolute;left:50%;top:50%;width:27%;aspect-ratio:1;transform:translate(-50%,-50%) rotate(45deg);border:2px solid #1f1b1b;background:#f5efe4;z-index:2;box-shadow:0 0 0 12px rgba(31,27,27,.22)}
.conspiracy-mark::after{content:"";position:absolute;inset:31%;background:#1f1b1b}

/* Elwin: use the actual palette and secondary pattern from the brand guide. */
.project--elwin{background:#fffaf0;color:#121714;border-color:rgba(53,44,211,.18)}
.project--elwin .project__body p{color:rgba(18,23,20,.68)}
.project--elwin .project__meta{color:rgba(18,23,20,.55)}
.project--elwin .project__cta{color:#352cd3}
.project--elwin h2{font-family:"IBM Plex Sans",var(--body);font-weight:700;color:#352cd3;letter-spacing:-.055em}
.project__visual--elwin{background:#352cd3;display:grid;grid-template-columns:minmax(0,1fr) clamp(92px,24%,150px);align-items:stretch}
.project__visual--elwin::after{display:none}
.elwin-logo-panel{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
.elwin-pattern{width:100%;height:100%;object-fit:cover;object-position:center top;display:block;border-left:1px solid rgba(255,255,255,.22)}

@media(min-width:851px){
  .project--conspiracy .project__body{padding-right:5vw}
  .conspiracy-logo-title{width:min(92%,610px)}
  .project--elwin .project__body{padding-right:5vw}
}

@media(max-width:850px){
  /* Cards remain legible and balanced on mobile, not just shrunk desktop compositions. */
  .conspiracy-logo-title{width:min(100%,560px);margin-bottom:18px}
  .project__visual--conspiracy{min-height:31svh}
  .conspiracy-beam{left:6%;top:8%;width:90%;height:88%}
  .conspiracy-mark{width:23%}

  .project--elwin .project__body{background:#fffaf0}
  .project__visual--elwin{grid-template-columns:minmax(0,1fr) 28%;min-height:32svh}
  .elwin-logo-panel{object-fit:cover}
  .elwin-pattern{object-position:center 8%}
}

@media(max-width:520px){
  .conspiracy-logo-title{width:100%;margin-bottom:16px}
  .project__body--conspiracy{min-height:300px}
  .project__visual--conspiracy{min-height:29svh}
  .conspiracy-mark{width:25%}

  .project--elwin h2{font-size:clamp(50px,14vw,72px)}
  .project__visual--elwin{grid-template-columns:minmax(0,1fr) 31%;min-height:29svh}
}

/* V13 — clean Elwin assets + supplied Conspiracy logo */
.conspiracy-logo-title{
  width:min(100%,680px);
  max-height:190px;
  object-fit:contain;
  object-position:left center;
}
.project__visual--elwin{
  grid-template-columns:minmax(0,1fr) clamp(120px,29%,190px);
  overflow:hidden;
}
.elwin-logo-panel,
.elwin-pattern{
  display:block;
  width:100%;
  height:100%;
  min-width:0;
  min-height:0;
}
.elwin-logo-panel{object-fit:cover;object-position:center}
.elwin-pattern{object-fit:cover;object-position:center;border-left:0}

@media(max-width:850px){
  .conspiracy-logo-title{width:100%;max-height:150px;object-position:left center}
  .project__visual--elwin{grid-template-columns:minmax(0,1fr) 34%;min-height:31svh}
  .elwin-logo-panel,.elwin-pattern{height:31svh}
}
@media(max-width:520px){
  .conspiracy-logo-title{max-height:120px}
  .project__visual--elwin{grid-template-columns:minmax(0,1fr) 36%;min-height:28svh}
  .elwin-logo-panel,.elwin-pattern{height:28svh}
}

/* V14 — Rivages uses the actual album cover; stable card compositions on desktop + mobile */
.project__visual--rivages{background:#9edcf0;overflow:hidden;padding:0}
.project__visual--rivages::before,.project__visual--rivages::after{display:none}
.rivages-cover{display:block;width:100%;height:100%;object-fit:cover;object-position:center;transform:none}

/* Elwin: simplify the right-hand artwork so no extracted asset can spill outside its column. */
.project__visual--elwin{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(132px,30%);overflow:hidden;background:#352cd3}
.project__visual--elwin>*{min-width:0;max-width:100%;overflow:hidden}
.elwin-logo-panel,.elwin-pattern{display:block;width:100%!important;max-width:100%!important;height:100%!important;object-fit:cover!important;margin:0!important;position:static!important;transform:none!important}
.elwin-logo-panel{object-position:center!important}
.elwin-pattern{object-position:center!important}

@media(min-width:851px){
  .project__visual--rivages{min-height:78vh}
  .rivages-cover{object-fit:cover;object-position:center}
  .project__visual--elwin{grid-template-columns:minmax(0,1fr) minmax(145px,30%)}
}
@media(max-width:850px){
  .project__visual--rivages{min-height:0;aspect-ratio:1/1}
  .rivages-cover{height:100%;object-fit:cover}
  .project__visual--elwin{grid-template-columns:minmax(0,1fr) 34%;min-height:31svh}
  .elwin-logo-panel,.elwin-pattern{height:31svh!important}
}
@media(max-width:520px){
  .project__visual--rivages{aspect-ratio:1/1}
  .project__visual--elwin{grid-template-columns:minmax(0,1fr) 36%;min-height:28svh}
  .elwin-logo-panel,.elwin-pattern{height:28svh!important}
}

/* V15 — card polish, desktop + mobile */
.project{overflow:hidden}
.project__visual img{vertical-align:middle}
/* remove hairline/gap at the bottom of image cards */
.project__visual{overflow:hidden;line-height:0}
.project__visual>*{line-height:normal}

/* Rivages: give the square artwork breathing room instead of pinning it to the edges */
.project__visual--rivages{display:grid;place-items:center;background:#a9def0;padding:clamp(18px,2.2vw,34px)}
.rivages-cover{width:min(86%,620px);height:auto;aspect-ratio:1/1;object-fit:cover;box-shadow:0 18px 50px rgba(25,71,83,.16)}

/* Conspiracy: real logo stays in copy, but quieter; mockup becomes the project image */
.conspiracy-logo-title{width:min(74%,470px);max-height:150px;margin-bottom:26px}
.project__visual--conspiracy{background:#171414 url('assets/conspiracy-philharmonie.png') center center/cover no-repeat}
.project__visual--conspiracy::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(14,12,11,.08),transparent 45%);z-index:1}
.project__visual--conspiracy .conspiracy-beam,.project__visual--conspiracy .conspiracy-mark{display:none}

@media(max-width:850px){
  .project__visual--rivages{aspect-ratio:auto;min-height:0;padding:18px}
  .rivages-cover{width:min(82%,420px)}
  .conspiracy-logo-title{width:min(76%,430px);max-height:112px;margin-bottom:18px}
  .project__visual--conspiracy{min-height:34svh;background-position:center center}
}
@media(max-width:520px){
  .project__visual--rivages{padding:15px}
  .rivages-cover{width:88%}
  .conspiracy-logo-title{width:78%;max-height:92px}
  .project__visual--conspiracy{min-height:31svh;background-position:52% center}
}


/* V16 — eliminate the last visual hairline under cards + real LinkedIn */
/* Some mobile/browser rasterization leaves a 1px seam at the rounded card edge.
   Overscan the visual into the clipping boundary rather than relying on image baseline fixes. */
.project__visual{margin-bottom:-2px;transform:translateY(0);min-width:0}
.project__visual--rivages,.project__visual--conspiracy,.project__visual--elwin,.project__visual--belle{bottom:-1px}
.project__visual img{display:block}
.contact__links span{opacity:.5}
@media(max-width:850px){
  .project__visual{margin-bottom:-3px;min-height:calc(31svh + 3px)}
  .project__visual--rivages{min-height:auto}
  .project__visual--conspiracy{min-height:calc(34svh + 3px)}
  .project__visual--elwin{min-height:calc(31svh + 3px)}
}
@media(max-width:520px){
  .project__visual{margin-bottom:-3px}
  .project__visual--conspiracy{min-height:calc(31svh + 3px)}
  .project__visual--elwin{min-height:calc(28svh + 3px)}
}

/* V17 — Elwin card: electric blue + brand + interface */
.project__visual--elwin{
  position:relative!important;
  display:block!important;
  overflow:hidden!important;
  background:#352cd3!important;
  min-width:0;
}
.elwin-card-logo{
  position:absolute!important;
  z-index:3;
  left:8%;
  top:9%;
  width:34%!important;
  height:auto!important;
  max-width:250px!important;
  object-fit:contain!important;
  display:block;
}
.elwin-device{
  position:absolute;
  z-index:2;
  width:88%;
  height:61%;
  left:16%;
  bottom:-7%;
  border:7px solid #17191d;
  border-bottom-width:14px;
  border-radius:18px 18px 9px 9px;
  background:#fff;
  overflow:hidden;
  box-shadow:0 30px 60px rgba(7,5,65,.42);
  transform:rotate(-3deg);
  transform-origin:center bottom;
}
.elwin-device__bar{height:18px;background:#17191d;display:flex;gap:5px;align-items:center;padding:0 8px}
.elwin-device__bar i{width:5px;height:5px;border-radius:50%;background:#fff;opacity:.35}
.elwin-device>img{display:block;width:100%;height:calc(100% - 18px);object-fit:cover;object-position:48% 13%}
.elwin-shape{position:absolute;z-index:1;border-radius:999px;display:block}
.elwin-shape--yellow{width:42%;aspect-ratio:1;right:-10%;top:-14%;background:#ffe27a}
.elwin-shape--turquoise{width:28%;aspect-ratio:1;left:-9%;bottom:3%;background:#07dac8}

@media (max-width:850px){
  .elwin-card-logo{left:7%;top:8%;width:31%!important;max-width:180px!important}
  .elwin-device{width:84%;height:64%;left:20%;bottom:-9%;border-width:5px;border-bottom-width:10px;border-radius:13px 13px 7px 7px;transform:rotate(-2.5deg)}
  .elwin-device__bar{height:13px}
  .elwin-device>img{height:calc(100% - 13px)}
  .elwin-shape--yellow{width:45%;right:-12%;top:-18%}
  .elwin-shape--turquoise{width:30%;left:-10%;bottom:0}
}
@media (max-width:520px){
  .elwin-card-logo{left:7%;top:7%;width:35%!important}
  .elwin-device{width:90%;height:66%;left:15%;bottom:-10%}
  .elwin-device>img{object-position:45% 10%}
}

/* V18 — Elwin: cleaner, product-led composition */
.project__visual--elwin{
  background:#352CD3!important;
  isolation:isolate;
}
.elwin-card-logo{
  left:7%!important;top:8%!important;width:27%!important;max-width:205px!important;
  filter:none!important;
}
.elwin-device{
  width:92%;height:70%;left:17%;bottom:-12%;
  border:0!important;border-radius:16px 16px 0 0!important;
  background:#fff;
  box-shadow:0 28px 70px rgba(17,12,91,.42);
  transform:rotate(-2deg);
}
.elwin-device__bar{
  height:14px;background:#fff;border-bottom:1px solid rgba(53,44,211,.09);padding:0 10px;
}
.elwin-device__bar i{width:4px;height:4px;background:#352CD3;opacity:.22}
.elwin-device>img{height:calc(100% - 14px);object-position:50% 10%}
.elwin-shape--yellow{width:34%;right:-9%;top:-17%;opacity:.98}
.elwin-shape--turquoise{width:23%;left:-7%;bottom:-5%;opacity:.98}
@media(max-width:850px){
 .elwin-card-logo{left:6%!important;top:7%!important;width:25%!important;max-width:145px!important}
 .elwin-device{width:93%;height:72%;left:17%;bottom:-14%;border-radius:12px 12px 0 0!important;transform:rotate(-1.5deg)}
 .elwin-shape--yellow{width:34%;right:-10%;top:-20%}
 .elwin-shape--turquoise{width:24%;left:-8%;bottom:-7%}
}
@media(max-width:520px){
 .elwin-card-logo{left:6%!important;top:7%!important;width:29%!important}
 .elwin-device{width:98%;height:73%;left:14%;bottom:-15%;transform:rotate(-1.2deg)}
 .elwin-device>img{object-position:48% 9%}
}

/* V19 — Elwin card stays deliberately neutral until Marie supplies the final artwork */
.project__visual--elwin.elwin-placeholder{display:grid!important;place-items:center!important;background:#352cd3!important;color:#fff6df!important;padding:24px!important;min-height:0;overflow:hidden}
.elwin-placeholder span{font-family:"IBM Plex Sans",var(--body);font-size:11px;letter-spacing:.14em;text-transform:uppercase;opacity:.58}
@media(max-width:850px){.project__visual--elwin.elwin-placeholder{aspect-ratio:1/1;min-height:0!important}}

/* V21 — clearer alignment, simpler CTAs, broader contact wording */
/* Hero: supporting sentence aligns with the definition instead of drifting inward. */
.hero .hero__intro{
  margin-left:0!important;
  max-width:720px;
}

/* Card metadata: project number stays discreet; disciplines align with each project title. */
.project__meta{
  display:block;
  width:auto;
}
.project__meta span{display:block}
.project__tags{
  margin:0 0 18px;
  font-size:10px;
  line-height:1.35;
  text-transform:uppercase;
  letter-spacing:.11em;
  opacity:.62;
  max-width:620px;
}
.project--belle .project__tags{color:rgba(40,31,76,.62)}
.project--conspiracy .project__tags{color:rgba(245,239,228,.58)}
.project--elwin .project__tags{color:rgba(18,23,20,.55)}
.project__cta{margin-top:26px}
.project__cta i{display:none!important}

/* Contact stays broad enough for identity work, adaptation and hands-on collaboration. */
.contact h2{max-width:none}
.contact__intro{max-width:700px}

@media(max-width:850px){
  .hero .hero__intro{margin-left:0!important;max-width:100%}
  .project__meta{inset:16px 18px auto}
  .project__tags{font-size:8px;margin-bottom:13px;max-width:92%}
  .project__cta{margin-top:18px}
}
@media(max-width:520px){
  .project__tags{font-size:7.5px;letter-spacing:.095em;margin-bottom:12px}
}

/* V22 — real lino/textile fragment */
.piece--lino{
  background-image:linear-gradient(180deg,transparent 55%,rgba(10,10,9,.58)),url('assets/ian_t_shirt.png');
  background-size:cover;
  background-position:center 45%;
  background-repeat:no-repeat;
}
.piece--lino span{position:relative;z-index:1;color:var(--cream);text-shadow:0 1px 12px rgba(0,0,0,.55)}
@media(max-width:850px){.piece--lino{background-position:center center}}

.piece--mileway{background-image:linear-gradient(to top,rgba(0,0,0,.42),transparent 45%),url("assets/mileway.png")!important;background-size:cover!important;background-position:center!important}.piece--misc{background-image:linear-gradient(to top,rgba(0,0,0,.38),transparent 45%),url("assets/brian.jpg")!important;background-size:cover!important;background-position:center!important}

/* V24 — Fragments are a strict square gallery on every breakpoint. */
.pieces__grid{grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:auto;gap:12px}
.pieces__grid .piece,.pieces__grid .piece:nth-child(1),.pieces__grid .piece:nth-child(4){width:100%;height:auto;min-height:0!important;aspect-ratio:1/1;grid-row:auto!important}
.piece--mileway{background-color:#dcecf8!important;background-size:contain!important;background-repeat:no-repeat!important;background-position:center!important}
@media(max-width:850px){.pieces__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}}
.project--belle h2{font-family:'Glirock','Glirock Regular',Georgia,'Times New Roman',serif;letter-spacing:-.025em}
/* V25 — square fragments stay square; editorial artwork is never cropped. */
.piece--mileway{background-image:url("assets/mileway.png")!important;background-size:contain!important;background-position:center!important;background-repeat:no-repeat!important;background-color:#dcecf8!important}
.piece--mileway span{background:rgba(18,18,17,.64);padding:5px 7px;border-radius:3px;color:var(--cream)}

/* V29 — Belle Époque logo + continuous project opening */
.belle-card-logo{display:block;width:min(390px,72%);height:auto;margin:0 0 28px;filter:none!important}
.be-window-logo{position:absolute;left:10%;right:10%;bottom:12%;width:80%;height:auto;filter:none!important}
.project--belle .be-window b{display:none}
.page-transition{clip-path:none!important;opacity:0;background:linear-gradient(155deg,#281f4c 0%,#4a2c50 55%,#f15962 130%);overflow:hidden}
.page-transition__sun{display:none!important}.page-transition__glow{position:absolute;width:48vw;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,#fff2cc 0 7%,#ffd966 26%,rgba(241,89,98,.18) 58%,transparent 72%);filter:blur(10px);opacity:.9}
.page-transition img{position:relative;z-index:2;width:min(420px,55vw);height:auto;opacity:0;transform:translateY(14px) scale(.98)}
@media(max-width:850px){.belle-card-logo{width:min(280px,78%);margin-bottom:20px}.page-transition img{width:62vw}}

/* V30 — project atmosphere glows */
.project{--project-glow:rgba(214,173,98,.22)}
.project::before{content:"";position:absolute;inset:-25%;z-index:1;pointer-events:none;opacity:0;transition:opacity .55s ease;background:radial-gradient(circle at 72% 45%,var(--project-glow) 0,transparent 38%);filter:blur(22px)}
.project:hover::before{opacity:1}
.project--belle{--project-glow:rgba(241,89,98,.34)}
.project--rivages{--project-glow:rgba(255,191,112,.3)}
.project--conspiracy{--project-glow:rgba(235,226,202,.16)}
.project--elwin{--project-glow:rgba(7,218,200,.24)}
.belle-card-logo{filter:none!important}
/* V44 publish pass */
.project__visual{line-height:0;align-self:stretch;margin-bottom:-1px}
.project__visual>img{width:100%;height:100%;object-fit:cover;display:block}
.project--pfe{background:#d9d9d6;color:#171717}
.project--pfe .project__body p{color:rgba(17,17,17,.7)}
.project--pfe h2{font-size:clamp(48px,6.5vw,105px);line-height:.88}
.project__visual--pfe{background:#efefec}
.project__visual--pfe img{object-fit:cover;object-position:center}
@media(max-width:850px){.project__visual{margin-bottom:-2px}.project--pfe h2{font-size:clamp(42px,12vw,66px)}}

/* V45 — project thumbnails are edge-to-edge, no inner gap */
.project{column-gap:0!important;row-gap:0!important}
.project__visual{margin:0!important;padding:0!important;align-self:stretch!important}
.project__visual>img{display:block!important;width:100%!important;height:100%!important;min-width:100%!important;min-height:100%!important;object-fit:cover!important;margin:0!important;padding:0!important;border:0!important}
.project__visual--pfe>img{object-position:center 44%!important}
@media(max-width:850px){.project__visual>img{position:absolute!important;inset:0!important}.project__visual--pfe>img{object-position:center 38%!important}}

/* V46 — remove the actual bottom gutter inside project cards.
   The visual must overfill its grid track so the card background never peeks through at the rounded bottom edge. */
.project__visual{
  height:calc(100% + 28px)!important;
  min-height:calc(100% + 28px)!important;
}

/* Rivages: keep the Bon Entendeur artwork small and fully visible, as in the approved version. */
.project__visual--rivages{
  display:grid!important;
  place-items:center!important;
  padding:clamp(18px,2.2vw,34px)!important;
  background:#a9def0!important;
}
.project__visual--rivages .rivages-cover{
  position:static!important;
  width:min(86%,620px)!important;
  height:auto!important;
  min-width:0!important;
  min-height:0!important;
  aspect-ratio:1/1;
  object-fit:cover!important;
  object-position:center!important;
  box-shadow:0 18px 50px rgba(25,71,83,.16);
}
@media(max-width:850px){
  .project__visual{height:calc(100% + 22px)!important;min-height:calc(100% + 22px)!important}
  .project__visual--rivages{padding:18px!important}
  .project__visual--rivages .rivages-cover{position:static!important;width:min(82%,420px)!important;height:auto!important;min-width:0!important;min-height:0!important}
}
@media(max-width:520px){
  .project__visual--rivages{padding:15px!important}
  .project__visual--rivages .rivages-cover{width:88%!important}
}

/* V47 — Rivages index card uses the identity green behind the full artwork. */
.project__visual--rivages{background:radial-gradient(circle at 48% 42%,rgba(243,234,220,.8),transparent 5%),linear-gradient(150deg,#7b8a82,#bf7656 54%,#342e2c)!important}

/* V66 publish pass: supplied thumbnails, coherent card typography, clean image joins */
.project{--card-title:var(--title)}
.project h2{font-family:var(--card-title)!important}
.project--rivages{--card-title:"Montra",Impact,sans-serif;background:#d77047;color:#fff8e9}
.project--rivages .project__body p{color:rgba(255,248,233,.78)}
.project--rivages .project__tags{color:rgba(255,248,233,.66)}
.project--elwin{--card-title:"IBM Plex Sans",sans-serif}
.project--pfe{--card-title:"Rammetto One","Arial Black",sans-serif}
.project--pfe h2{font-weight:400;letter-spacing:-.045em}
.project__visual{margin:0!important;padding:0!important;line-height:0!important;overflow:hidden!important}
.project__visual>img{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;object-fit:cover!important;display:block!important;margin:0!important}
.project__visual--rivages{background:#efe0c8!important}
.project__visual--rivages>img{object-position:center!important}
.project__visual--belle>img{object-position:center!important}
.project__visual--elwin{background:#352cd3!important;display:block!important}
.project__visual--elwin>img{object-position:center!important}
.piece{isolation:isolate}
.piece>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-1}
.piece--be{background:#203cd8}
.piece--be:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(0,0,0,.5));z-index:-1}
.piece--be span{color:#fff}
@font-face{font-family:"Montra";src:url("assets/rivages-brand/Montra-FreePersonalUse.otf") format("opentype");font-display:swap}
@media(max-width:850px){.project__visual>img{position:absolute!important}.project--pfe h2{font-size:clamp(38px,11vw,62px)}}

/* V66 card micro-interactions */
@media(prefers-reduced-motion:no-preference){
.project__visual>img{transition:transform .8s cubic-bezier(.2,.8,.2,1),filter .6s ease}
.project:hover .project__visual>img{transform:scale(1.035)}
.piece>img{transition:transform .7s cubic-bezier(.2,.8,.2,1),filter .5s ease}
.piece:hover>img{transform:scale(1.045);filter:saturate(1.05)}
.project__cta{transition:transform .3s ease}.project:hover .project__cta{transform:translateX(7px)}
}
\n/* V67 index typography correction */\n.project--rivages h2{font-family:"Montra","Inter",sans-serif!important;letter-spacing:.015em!important;line-height:.86!important;font-weight:400!important}\n.project--elwin h2{font-family:"Asap",system-ui,sans-serif!important;font-weight:700!important;letter-spacing:-.035em!important}\n.project--pfe h2{font-family:"Rammetto One",sans-serif!important;font-weight:400!important;letter-spacing:-.035em!important;line-height:.9!important}\n@media(max-width:850px){.project--rivages h2{letter-spacing:.02em!important;line-height:.9!important}}\n
/* V68 index project-title fixes */
.project--rivages h2{letter-spacing:.065em!important;font-kerning:normal!important}
.project--elwin h2{font-family:"Asap",system-ui,sans-serif!important}
@media(max-width:850px){.project--rivages h2{letter-spacing:.075em!important}}

/* V70: Montra's glyphs are naturally very tight; open the Rivages card title deliberately. */
.project--rivages h2{letter-spacing:.12em!important;font-kerning:none!important;font-feature-settings:"kern" 0!important;transform:scaleX(1.035);transform-origin:left center}
@media(max-width:850px){.project--rivages h2{letter-spacing:.105em!important;transform:scaleX(1.02)}}

/* V71 — Rivages index: slight optical opening only. */
.project--rivages h2{letter-spacing:.028em!important;font-kerning:normal!important;font-feature-settings:normal!important;transform:none!important}
@media(max-width:850px){.project--rivages h2{letter-spacing:.025em!important;transform:none!important}}

/* V73 — mobile rhythm: keep the opening statement close to navigation. */
@media(max-width:850px){
  .hero.section{align-content:start!important;padding-top:76px!important;padding-bottom:54px!important}
  .hero__definition{margin-top:0!important}
}
@media(max-width:520px){
  .hero.section{padding-top:70px!important}
}

/* V74 — mobile opening + contact reliability */
@media(max-width:850px){
  .hero.section{display:block!important;min-height:auto!important;padding-top:92px!important;padding-bottom:54px!important}
  .hero__definition{margin:0!important;width:100%!important}
  .hero__phonetic{margin-bottom:20px!important}
  .hero .hero__intro{margin-top:24px!important}
  .hero__meta{margin-top:32px!important}
}
@media(max-width:520px){.hero.section{padding-top:84px!important}}
/* Contact actions must never disappear if a reveal trigger is missed. */
.contact__mail,.contact__links{opacity:1!important;transform:none!important;visibility:visible!important}
.contact__mail{padding:.18em 0 .12em}


/* V75 — mobile hero: remove the remaining artificial vertical offset. */
@media(max-width:850px){
  main > .hero.section{display:block!important;min-height:0!important;height:auto!important;padding:64px 20px 52px!important;margin:0!important;align-content:initial!important;justify-content:initial!important}
  main > .hero.section .hero__definition{position:relative!important;inset:auto!important;top:auto!important;bottom:auto!important;transform:none!important;margin:0!important;padding:0!important}
}
@media(max-width:520px){main > .hero.section{padding-top:60px!important}}


/* V76 — mobile hero: explicit top anchoring; avoids inherited grid/viewport centering. */
@media(max-width:850px){
  main > .hero.section{position:relative!important;display:block!important;min-height:100svh!important;height:auto!important;padding:0 20px 52px!important;}
  main > .hero.section .hero__definition{position:relative!important;top:auto!important;left:auto!important;right:auto!important;bottom:auto!important;transform:none!important;margin:0!important;padding-top:88px!important;width:100%!important;}
}
@media(max-width:520px){
  main > .hero.section .hero__definition{padding-top:78px!important;}
}

/* V77 — mobile hero: the glow must stay out of document flow. */
@media(max-width:850px){
  main > .hero.section > .hero__mobile-glow{
    position:absolute!important;
    width:70vw!important;
    height:70vw!important;
    right:-24vw!important;
    top:17vh!important;
    margin:0!important;
    padding:0!important;
    pointer-events:none!important;
  }
  main > .hero.section .hero__definition{padding-top:78px!important;}
}
@media(max-width:520px){
  main > .hero.section .hero__definition{padding-top:68px!important;}
}

/* V78 — mobile: keep the compact hero fix without forcing a full viewport before Projects */
@media (max-width:850px){
  main > .hero.section{
    min-height:auto!important;
    height:auto!important;
    padding-bottom:34px!important;
  }
  main > .projects.section{
    padding-top:34px!important;
  }
}
@media (max-width:520px){
  main > .hero.section{padding-bottom:28px!important;}
  main > .projects.section{padding-top:28px!important;}
}

/* V79 — mobile viewport lock: prevent any child from widening the page. */
html,body{width:100%;max-width:100%;overflow-x:clip}
@media(max-width:850px){
  main,.section,main > .hero.section,main > .projects.section{width:100%;max-width:100%;min-width:0}
  main > .hero.section{overflow:hidden!important}
  main > .hero.section .hero__definition{width:100%!important;max-width:100%!important;min-width:0!important}
  .hero .hero__title,.hero .hero__intro,.hero__meta{max-width:100%!important}
  .topbar{width:100%;max-width:100%;left:0;right:0}
}