/* Home page: brand collage. Project pairs (one photograph beside a bento of brand pieces drawn in HTML),
   quiet captions, scrapbook offset. Every size inside a bento is a multiple of --p, one 672nd of the
   bento width, so the whole panel scales like a picture from phone to wide desktop. */
@font-face{font-family:'Instrument Serif';src:url('/assets/fonts/concepts/instrument-serif-normal-1.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Instrument Serif';src:url('/assets/fonts/concepts/instrument-serif-italic-0.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'Outfit';src:url('/assets/fonts/concepts/outfit-normal-0.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:'EO Playfair';src:url('/assets/fonts/concepts/playfair-normal-1.woff2') format('woff2');font-weight:400 900;font-style:normal;font-display:swap}
@font-face{font-family:'EO Playfair';src:url('/assets/fonts/concepts/playfair-italic-0.woff2') format('woff2');font-weight:400 900;font-style:italic;font-display:swap}

.collage{overflow:hidden}

/* ---------- head ---------- */
.collage-head{max-width:none;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:28px 48px;align-items:end;margin-bottom:clamp(40px,5vw,72px)}
.collage-head-copy{max-width:900px}
.collage-head-side{display:flex;flex-direction:column;align-items:flex-end;gap:16px}
.collage-pause{display:inline-flex;align-items:center;gap:9px;min-height:36px;padding:0 14px 0 12px;border-radius:999px;border:1px solid var(--line-light);background:none;color:rgba(255,255,255,.78);font:600 13px/1 var(--sans);letter-spacing:.02em;cursor:pointer;transition:color .2s,border-color .2s}
.collage-pause::before{content:"";width:9px;height:11px;border-inline:3px solid currentColor;box-sizing:border-box}
.collage-pause[data-paused]::before{width:0;height:0;border:6px solid transparent;border-left:10px solid currentColor;border-right:0}
.collage-pause:hover{color:#fff;border-color:rgba(255,255,255,.5)}

/* ---------- project pair ---------- */
.cg-project{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:18px;align-items:start}
.cg-project + .cg-project{margin-top:clamp(88px,13vw,200px)}
.cg-pane{position:relative;margin:0;aspect-ratio:3/4;border-radius:10px;overflow:hidden;isolation:isolate}
.cg-photo{background:#1B2030}
.cg-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cg-photo .tag{position:absolute;left:16px;top:16px;margin:0}
.cg-photo::after{content:"";position:absolute;inset:0;background:radial-gradient(60% 45% at 50% 50%,rgba(20,12,10,.22),transparent 70%);pointer-events:none}
.cg-mark{position:absolute;z-index:1;left:50%;top:50%;width:37%;aspect-ratio:1;transform:translate(-50%,-50%);display:grid;place-items:center;color:#fff;border-radius:50%;container-type:inline-size}
.cg-mark--solene{border:max(4px,.9vw) solid #fff;border-width:clamp(5px,.75vw,11px);font:400 0/1 'Instrument Serif',serif}
.cg-mark--solene::before{content:"S";font-size:78cqw;line-height:1;transform:translateY(-4%)}
.cg-mark--ember{border:clamp(5px,.75vw,11px) solid #fff}
.cg-mark--ember .cg-flame{width:44%;height:auto}

.cg-project--a .cg-caption{grid-column:1/-1;margin-left:calc((100% - 18px*11)/12*2 + 36px);max-width:860px}
.cg-project--b .cg-bento{grid-column:1;grid-row:1}
.cg-project--b .cg-photo{grid-column:2;grid-row:1/span 2;margin-top:clamp(70px,13vw,200px)}
.cg-project--b .cg-caption{grid-column:1;grid-row:2;padding-right:clamp(0px,3vw,48px)}

.cg-caption{padding-top:clamp(36px,5vw,68px)}
.cg-name{font:500 20px/1.5 var(--sans);letter-spacing:-.005em;color:#EEEDE6}
.cg-meta{font-size:20px;line-height:1.5;color:#8C8F98}
.cg-meta a{color:inherit;text-decoration:none;background:linear-gradient(currentColor,currentColor) 0 100%/100% 1px no-repeat;padding-bottom:2px;transition:color .2s}
.cg-meta a:hover{color:var(--yellow)}
.cg-line{margin-top:clamp(18px,2.4vw,30px);font-size:clamp(1.38rem,.95rem + 1.5vw,2.15rem);line-height:1.24;font-weight:300;letter-spacing:-.015em;color:#EEEDE6;text-wrap:pretty}

/* ---------- bento frame ---------- */
.cg-bento{container-type:inline-size}
.cg-bento--solene{background:#4B1F2C}
.cg-bento--ember{background:#15281F}
.cg-grid{--p:calc(100cqw/672);position:absolute;inset:0;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:184fr 183fr 183fr 281fr;gap:calc(var(--p)*12);padding:calc(var(--p)*12);font-family:'Outfit',var(--sans);line-height:1}
.cg-tile{position:relative;overflow:hidden;min-width:0;min-height:0;border-radius:calc(var(--p)*10);transition:transform .45s var(--ease);isolation:isolate}
.cg-tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cg-tile b{font-weight:400}
.cg-tile em{font-style:italic}
.cg-tile ul{list-style:none;margin:0;padding:0}
@media (hover:hover){.cg-tile:hover{transform:translateY(calc(var(--p)*-4)) scale(1.012)}}

/* Solène map: cards + ticker / phone and reel beside the logo / wordmark + pieces */
.s-cards{grid-area:1/1/2/8}.s-tick{grid-area:1/8/2/13}
.s-phone{grid-area:2/1/3/5}.s-reel{grid-area:3/1/4/5}.s-logo{grid-area:2/5/4/13}
.s-word{grid-area:4/1/5/9}.s-fade{grid-area:4/9/5/13}
/* Ember and Oak map, mirrored */
.e-tick{grid-area:1/1/2/6}.e-goods{grid-area:1/6/2/13}
.e-logo{grid-area:2/1/4/9}.e-phone{grid-area:2/9/3/13}.e-reel{grid-area:3/9/4/13}
.e-fade{grid-area:4/1/5/5}.e-word{grid-area:4/5/5/13}

/* ---------- shared tile kinds ---------- */
/* ticker */
.cg-tick{display:flex;align-items:center}
.cg-tick-track{display:flex;width:max-content;animation:cg-tick 18s linear infinite}
.cg-tick-run{display:flex;align-items:center;flex:none}
.cg-tick-run span{white-space:nowrap;padding-inline:calc(var(--p)*22)}
.cg-tick-run b{flex:none;width:calc(var(--p)*20);height:calc(var(--p)*20);border-radius:50%;background:currentColor;opacity:.55}
@keyframes cg-tick{to{transform:translateX(-50%)}}

/* cross fade between three pieces */
.cg-layer{position:absolute;inset:0;opacity:0;animation:cg-fade 13.5s linear infinite}
.cg-layer:nth-child(1){opacity:1}
.cg-layer:nth-child(2){animation-delay:-9s}
.cg-layer:nth-child(3){animation-delay:-4.5s}
@keyframes cg-fade{0%,29%{opacity:1}34%,95%{opacity:0}100%{opacity:1}}
.cg-pill{position:absolute;z-index:3;left:50%;bottom:calc(var(--p)*16);transform:translateX(-50%);display:inline-flex;align-items:center;gap:calc(var(--p)*7);padding:calc(var(--p)*8) calc(var(--p)*13) calc(var(--p)*8) calc(var(--p)*9);border-radius:calc(var(--p)*12);background:#fff;color:#16130F;font:600 calc(var(--p)*17)/1 'Outfit',var(--sans);letter-spacing:-.01em;white-space:nowrap;box-shadow:0 calc(var(--p)*4) calc(var(--p)*14) rgba(0,0,0,.22)}
.cg-pill i{width:calc(var(--p)*15);height:calc(var(--p)*15);border-radius:calc(var(--p)*5);background:var(--pill,#A65663)}

/* vertical reel of photographs */
.cg-reel-track{position:absolute;left:50%;top:50%;width:calc(var(--p)*128);margin-left:calc(var(--p)*-64);margin-top:calc(var(--p)*-208);display:grid;gap:calc(var(--p)*16);animation:cg-reel 12s cubic-bezier(.7,0,.2,1) infinite}
.cg-reel-track span{position:relative;display:block;height:calc(var(--p)*128);border-radius:calc(var(--p)*26);overflow:hidden;box-shadow:0 0 0 calc(var(--p)*5) var(--frame,#fff)}
@keyframes cg-reel{0%,24%{transform:translateY(0)}33.3%,57%{transform:translateY(calc(var(--p)*-144))}66.6%,90%{transform:translateY(calc(var(--p)*-288))}100%{transform:translateY(calc(var(--p)*-432))}}

/* phone */
.cg-phone{position:absolute;left:50%;top:calc(var(--p)*18);width:calc(var(--p)*156);height:calc(var(--p)*320);margin-left:calc(var(--p)*-78);padding:calc(var(--p)*6);border-radius:calc(var(--p)*28);background:#0E0E10;transform:rotate(-7deg);transform-origin:50% 0;box-shadow:0 calc(var(--p)*14) calc(var(--p)*30) rgba(0,0,0,.35)}
.cg-screen{position:relative;height:100%;border-radius:calc(var(--p)*22);overflow:hidden}
.cg-screen::before{content:"";position:absolute;z-index:2;left:50%;top:calc(var(--p)*7);width:calc(var(--p)*44);height:calc(var(--p)*12);margin-left:calc(var(--p)*-22);border-radius:99px;background:#0E0E10}
.cg-scroll{display:grid;gap:calc(var(--p)*7);padding:calc(var(--p)*30) calc(var(--p)*13) 0;animation:cg-scroll 9s cubic-bezier(.6,0,.3,1) infinite}
@keyframes cg-scroll{0%,18%{transform:translateY(0)}45%,68%{transform:translateY(calc(var(--p)*-62))}95%,100%{transform:translateY(0)}}
.ph-brand{font-size:calc(var(--p)*25)}
.ph-kicker{font:600 calc(var(--p)*8.5)/1 'Outfit',var(--sans);letter-spacing:.2em;text-transform:uppercase}
.ph-row{display:flex;justify-content:space-between;align-items:center;padding:calc(var(--p)*8) calc(var(--p)*9);border-radius:calc(var(--p)*8);font:500 calc(var(--p)*10)/1 'Outfit',var(--sans)}
.ph-row i{font-style:normal}
.ph-btn{padding:calc(var(--p)*10);border-radius:99px;text-align:center;font:600 calc(var(--p)*10.5)/1 'Outfit',var(--sans)}
.ph-days{display:grid;grid-template-columns:repeat(4,1fr);gap:calc(var(--p)*5)}
.ph-days i{font:600 calc(var(--p)*9)/1 'Outfit',var(--sans);font-style:normal;text-align:center;padding:calc(var(--p)*8) 0;border-radius:calc(var(--p)*7)}

/* wordmark with construction lines */
.cg-word{display:grid;grid-template-rows:1fr 1fr}
.cg-word-top,.cg-word-bot{position:relative;display:grid;place-items:center;overflow:hidden}
.cg-word-top::before,.cg-word-bot::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,currentColor 1px,transparent 1px) 50% 0/calc(var(--p)*30) 100%,linear-gradient(currentColor 1px,transparent 1px) 0 50%/100% calc(var(--p)*30);opacity:.1}
.cg-word b{position:relative;white-space:nowrap}
.cg-word-bot b{animation:cg-wipe 10s cubic-bezier(.6,0,.2,1) infinite}
@keyframes cg-wipe{0%{clip-path:inset(0 100% 0 0)}7%{clip-path:inset(0 100% 0 0)}26%,92%{clip-path:inset(0 0 0 0);opacity:1}100%{clip-path:inset(0 0 0 0);opacity:0}}
.cg-guides{position:absolute;inset:0;pointer-events:none;color:var(--guide,#fff)}
.cg-guides i{position:absolute;background:currentColor;opacity:.75}
.cg-guides .gx{left:0;right:0;height:1px;transform-origin:0 50%;animation:cg-gx 10s cubic-bezier(.6,0,.2,1) infinite}
.cg-guides .gy{top:0;bottom:0;width:1px;transform-origin:50% 0;animation:cg-gy 10s cubic-bezier(.6,0,.2,1) infinite}
.cg-guides .g1{top:14%}.cg-guides .g2{top:36.5%}.cg-guides .g3{top:64%}.cg-guides .g4{top:86.5%}
.cg-guides .g5{left:var(--gl,12%)}.cg-guides .g6{left:var(--gm1,38%)}.cg-guides .g7{left:var(--gm2,62%)}.cg-guides .g8{left:var(--gr,88%)}
.cg-guides .g2,.cg-guides .g6{animation-delay:.25s}.cg-guides .g3,.cg-guides .g7{animation-delay:.5s}.cg-guides .g4,.cg-guides .g8{animation-delay:.75s}
@keyframes cg-gx{0%{transform:scaleX(0);opacity:.75}16%,88%{transform:scaleX(1);opacity:.75}96%,100%{transform:scaleX(1);opacity:0}}
@keyframes cg-gy{0%{transform:scaleY(0);opacity:.75}16%,88%{transform:scaleY(1);opacity:.75}96%,100%{transform:scaleY(1);opacity:0}}

/* colour stripes and cropped photograph at the edges of the logo tile */
.cg-stripes{position:absolute;top:calc(var(--p)*34);width:calc(var(--p)*50);display:grid;gap:0}
.cg-stripes i{height:calc(var(--p)*17)}
.cg-ring{position:absolute;inset:0;width:100%;height:100%;animation:cg-spin 36s linear infinite}
.cg-ring text{font:600 12.5px/1 'Outfit',sans-serif;letter-spacing:.2em;text-transform:uppercase;fill:currentColor}
@keyframes cg-spin{to{transform:rotate(360deg)}}

/* ---------- Solène pieces ---------- */
.cg-bento--solene{--rose:#A65663;--blush:#E3B7BB;--cream:#F3EAE1;--milk:#F9F3EC;--cocoa:#2B2223;--pill:#A65663}
.cg-bento--solene .cg-tile b,.cg-bento--solene .ph-brand,.s-mono{font-family:'Instrument Serif',serif}

.s-cards{background:#EBD9D2}
.s-card{position:absolute;width:calc(var(--p)*196);height:calc(var(--p)*114);border-radius:calc(var(--p)*6);padding:calc(var(--p)*15) calc(var(--p)*16);display:flex;flex-direction:column;justify-content:space-between;box-shadow:0 calc(var(--p)*10) calc(var(--p)*24) rgba(60,25,30,.22)}
.s-card p{font:600 calc(var(--p)*7.6)/1.6 'Outfit',var(--sans);letter-spacing:.18em;text-transform:uppercase}
.s-card--back{left:calc(var(--p)*22);top:calc(var(--p)*22);background:var(--milk);color:#5E4E4D;transform:rotate(-7deg);animation:s-float-a 7s ease-in-out infinite alternate}
.s-card--back .s-mono{width:calc(var(--p)*34);height:calc(var(--p)*34);border:calc(var(--p)*1.2) solid var(--rose);border-radius:50%;display:grid;place-items:center;font-size:calc(var(--p)*24);color:var(--rose);padding-bottom:calc(var(--p)*2)}
.s-card--front{right:calc(var(--p)*22);bottom:calc(var(--p)*18);background:var(--rose);color:#F9F1EA;transform:rotate(4deg);animation:s-float-b 7s ease-in-out infinite alternate}
.s-card--front b{font-size:calc(var(--p)*36);line-height:.9}
@keyframes s-float-a{from{transform:rotate(-7deg) translateY(0)}to{transform:rotate(-4deg) translateY(calc(var(--p)*-5))}}
@keyframes s-float-b{from{transform:rotate(4deg) translateY(0)}to{transform:rotate(2deg) translateY(calc(var(--p)*6))}}

.s-tick{background:var(--rose);color:#F9F1EA;font:400 calc(var(--p)*128)/1 'Instrument Serif',serif;letter-spacing:-.02em}
.s-tick .cg-tick-track{padding-bottom:calc(var(--p)*12)}

.s-phone{background:var(--cocoa)}
.s-phone .cg-screen{background:var(--milk);color:var(--cocoa)}
.s-phone .ph-kicker{color:var(--rose)}
.s-phone .ph-row{background:#F0E4DA}
.s-phone .ph-row i{width:calc(var(--p)*9);height:calc(var(--p)*9);border-radius:50%;border:calc(var(--p)*1.2) solid #B9A29C}
.s-phone .ph-row.is-on{background:var(--rose);color:#fff}
.s-phone .ph-row.is-on i{background:#fff;border-color:#fff}
.s-phone .ph-days i{background:#F0E4DA}
.s-phone .ph-days i.is-on{background:var(--cocoa);color:#fff}
.s-phone .ph-btn{background:var(--cocoa);color:#fff}

.s-reel{background:#F1DCD8;--frame:#fff}

.s-logo{background:var(--milk);color:var(--cocoa)}
.s-logo .cg-stripes{left:0}
.s-logo .cg-stripes i:nth-child(1){background:var(--rose)}.s-logo .cg-stripes i:nth-child(2){background:var(--blush)}.s-logo .cg-stripes i:nth-child(3){background:#EBD9D2}.s-logo .cg-stripes i:nth-child(4){background:var(--cocoa)}.s-logo .cg-stripes i:nth-child(5){background:#C98A92}.s-logo .cg-stripes i:nth-child(6){background:var(--cream)}
.s-logo-photo{position:absolute;right:calc(var(--p)*-34);bottom:calc(var(--p)*30);width:calc(var(--p)*104);height:calc(var(--p)*190);border-radius:calc(var(--p)*52) calc(var(--p)*52) calc(var(--p)*8) calc(var(--p)*8);overflow:hidden}
.s-logo-lockup{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding-bottom:calc(var(--p)*6)}
.s-logo-mark{position:relative;width:calc(var(--p)*206);height:calc(var(--p)*206);display:grid;place-items:center;color:var(--rose)}
.s-logo-mark .s-mono{width:calc(var(--p)*128);height:calc(var(--p)*128);border:calc(var(--p)*2.4) solid var(--rose);border-radius:50%;display:grid;place-items:center;font-size:calc(var(--p)*92);line-height:1;padding-bottom:calc(var(--p)*8)}
.s-logo-lockup b{font-size:calc(var(--p)*68);letter-spacing:-.01em;margin-top:calc(var(--p)*10)}
.s-logo-lockup small{font:600 calc(var(--p)*11.5)/1 'Outfit',var(--sans);letter-spacing:.42em;text-transform:uppercase;color:#8A6A6C;margin-top:calc(var(--p)*10);padding-left:.42em}

.s-word{--guide:#fff}
.s-word b{font-size:calc(var(--p)*134);letter-spacing:-.015em;line-height:1;padding-bottom:calc(var(--p)*14)}
.s-word .cg-word-top{background:var(--rose);color:#C98A92}
.s-word .cg-word-bot{background:var(--cream);color:var(--cocoa)}
.s-word .cg-word-bot ~ .cg-guides .g3,.s-word .cg-guides .g4,.s-word .cg-guides .g3{color:var(--rose)}

.s-fade{background:var(--cocoa)}
.s-flyer{background:var(--cocoa);color:var(--cream)}
.s-flyer img{height:56%;object-position:50% 30%}
.s-flyer div{position:absolute;left:calc(var(--p)*16);right:calc(var(--p)*14);top:60%}
.s-flyer small,.s-menu small,.s-post small{display:block;font:700 calc(var(--p)*7.4)/1 'Outfit',var(--sans);letter-spacing:.24em;text-transform:uppercase}
.s-flyer small{color:var(--blush)}
.s-flyer b{display:block;font-size:calc(var(--p)*27);line-height:.96;margin-top:calc(var(--p)*8)}
.s-flyer em{color:var(--blush)}
.s-menu{background:var(--milk);color:var(--cocoa);padding:calc(var(--p)*20) calc(var(--p)*17)}
.s-menu small{color:var(--rose)}
.s-menu b{display:block;font-size:calc(var(--p)*36);margin:calc(var(--p)*6) 0 calc(var(--p)*8)}
.s-menu li{display:flex;justify-content:space-between;align-items:baseline;gap:calc(var(--p)*6);padding:calc(var(--p)*8.5) 0;border-bottom:1px solid rgba(43,34,35,.16);font:500 calc(var(--p)*10.5)/1 'Outfit',var(--sans);white-space:nowrap}
.s-menu li span{font-size:calc(var(--p)*8.5);color:#8A6A6C}
.s-post{color:#fff}
.s-post::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(30,18,18,.8),rgba(30,18,18,0) 62%)}
.s-post div{position:absolute;z-index:2;left:calc(var(--p)*16);right:calc(var(--p)*12);bottom:calc(var(--p)*62)}
.s-post b{display:block;font-size:calc(var(--p)*32);line-height:.95}
.s-post small{margin-top:calc(var(--p)*8)}

/* ---------- Ember and Oak pieces ---------- */
.cg-bento--ember{--char:#15110E;--ember:#D8612C;--bone:#EFE3CF;--oak:#6B4226;--gold:#C9A063;--pill:#D8612C}
.cg-bento--ember .cg-tile b,.cg-bento--ember .ph-brand,.e-coaster span{font-family:'EO Playfair',Georgia,serif}
.cg-bento--ember .cg-tile b em,.cg-bento--ember .ph-brand em,.e-coaster em{font-style:italic;font-weight:400}

.e-tick{background:var(--char);color:var(--bone);font:italic 500 calc(var(--p)*104)/1 'EO Playfair',Georgia,serif;letter-spacing:-.02em}
.e-tick .cg-tick-run b{background:var(--ember);opacity:1}
.e-tick .cg-tick-track{padding-bottom:calc(var(--p)*10)}

.e-goods{background:var(--ember)}
.e-coaster{position:absolute;left:calc(var(--p)*26);top:50%;width:calc(var(--p)*150);height:calc(var(--p)*150);margin-top:calc(var(--p)*-75);border-radius:50%;background:var(--bone);color:var(--char);display:grid;place-items:center;box-shadow:0 calc(var(--p)*10) calc(var(--p)*22) rgba(60,20,0,.3),inset 0 0 0 calc(var(--p)*3) var(--bone),inset 0 0 0 calc(var(--p)*4) rgba(21,17,14,.35)}
.e-coaster .cg-ring{inset:calc(var(--p)*9);width:auto;height:auto;animation-duration:28s}
.e-coaster .cg-ring text{font-size:12px;letter-spacing:.16em}
.e-coaster span{font-size:calc(var(--p)*38);font-weight:600;letter-spacing:-.03em}
.e-coaster em{color:var(--ember);padding-inline:.04em}
.e-match{position:absolute;right:calc(var(--p)*34);top:calc(var(--p)*24);width:calc(var(--p)*104);height:calc(var(--p)*150);border-radius:calc(var(--p)*5);background:var(--char);color:var(--bone);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(var(--p)*8);transform:rotate(8deg);box-shadow:0 calc(var(--p)*12) calc(var(--p)*24) rgba(60,20,0,.35);animation:e-tilt 8s ease-in-out infinite alternate}
.e-match i{position:absolute;left:0;right:0;bottom:0;height:calc(var(--p)*20);background:repeating-linear-gradient(90deg,#3A2A20 0 calc(var(--p)*2),#241A14 calc(var(--p)*2) calc(var(--p)*4));border-radius:0 0 calc(var(--p)*5) calc(var(--p)*5)}
.e-match .cg-flame{width:calc(var(--p)*20);height:auto;color:var(--ember);margin-top:calc(var(--p)*-14)}
.e-match b{font-size:calc(var(--p)*19);line-height:1.02;text-align:center;font-weight:600}
.e-match b em{color:var(--gold)}
@keyframes e-tilt{from{transform:rotate(8deg) translateY(0)}to{transform:rotate(5deg) translateY(calc(var(--p)*-5))}}

.e-logo{background:var(--char);color:var(--bone)}
.e-logo .cg-stripes{right:0;top:auto;bottom:calc(var(--p)*30)}
.e-logo .cg-stripes i:nth-child(1){background:var(--ember)}.e-logo .cg-stripes i:nth-child(2){background:var(--gold)}.e-logo .cg-stripes i:nth-child(3){background:var(--bone)}.e-logo .cg-stripes i:nth-child(4){background:var(--oak)}.e-logo .cg-stripes i:nth-child(5){background:#15281F}.e-logo .cg-stripes i:nth-child(6){background:#8C3A17}
.e-logo-photo{position:absolute;left:calc(var(--p)*-34);top:calc(var(--p)*30);width:calc(var(--p)*100);height:calc(var(--p)*128);border-radius:calc(var(--p)*8);overflow:hidden}
.e-glow{position:absolute;left:50%;top:44%;width:calc(var(--p)*340);height:calc(var(--p)*340);margin:calc(var(--p)*-170) 0 0 calc(var(--p)*-170);background:radial-gradient(closest-side,rgba(216,97,44,.42),rgba(216,97,44,0));animation:e-glow 3.6s ease-in-out infinite alternate}
@keyframes e-glow{from{opacity:.45;transform:scale(.92)}to{opacity:1;transform:scale(1.06)}}
.e-logo-lockup{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.e-logo-lockup .cg-flame{width:calc(var(--p)*58);height:auto;color:var(--ember)}
.e-logo-lockup b{font-size:calc(var(--p)*56);font-weight:600;letter-spacing:-.025em;margin-top:calc(var(--p)*22);white-space:nowrap}
.e-logo-lockup b em{color:var(--gold)}
.e-logo-lockup small{font:600 calc(var(--p)*11.5)/1 'Outfit',var(--sans);letter-spacing:.4em;text-transform:uppercase;color:var(--gold);margin-top:calc(var(--p)*18);padding:calc(var(--p)*12) 0 0 .4em;border-top:1px solid rgba(201,160,99,.5)}

.e-phone{background:var(--bone)}
.e-phone .cg-phone{transform:rotate(6deg)}
.e-phone .cg-screen{background:var(--char);color:var(--bone)}
.e-phone .cg-screen::before{background:#2A221C}
.e-phone .cg-scroll{justify-items:center;text-align:center}
.e-phone .ph-brand{font-size:calc(var(--p)*17);font-weight:600}
.e-phone .ph-brand em{color:var(--gold)}
.ph-check{width:calc(var(--p)*34);height:calc(var(--p)*34);border-radius:50%;background:var(--ember);position:relative;margin-top:calc(var(--p)*4)}
.ph-check::after{content:"";position:absolute;left:34%;top:26%;width:26%;height:44%;border:solid #fff;border-width:0 calc(var(--p)*3) calc(var(--p)*3) 0;transform:rotate(42deg)}
.ph-title{font:600 calc(var(--p)*12.5)/1.15 'Outfit',var(--sans)}
.e-phone .ph-row{width:100%;background:#241C17;color:#CDBFA9}
.e-phone .ph-row i{color:var(--bone);font-weight:600}
.e-phone .ph-btn{width:100%;background:var(--ember);color:#fff}

.e-reel{background:#0E0C0A;--frame:#2A221C}

.e-fade{background:var(--char)}
.e-menu{background:var(--bone);color:var(--char);padding:calc(var(--p)*20) calc(var(--p)*17)}
.e-menu small,.e-post small,.e-gift small{display:block;font:700 calc(var(--p)*7.4)/1 'Outfit',var(--sans);letter-spacing:.24em;text-transform:uppercase}
.e-menu small{color:var(--ember)}
.e-menu b{display:block;font-size:calc(var(--p)*32);font-weight:600;letter-spacing:-.02em;margin:calc(var(--p)*7) 0 calc(var(--p)*8)}
.e-menu li{display:flex;justify-content:space-between;align-items:baseline;gap:calc(var(--p)*6);padding:calc(var(--p)*8.5) 0;border-bottom:1px solid rgba(21,17,14,.18);font:600 calc(var(--p)*10.5)/1 'Outfit',var(--sans);white-space:nowrap}
.e-menu li span{font:italic 400 calc(var(--p)*9.5)/1 'EO Playfair',Georgia,serif;color:var(--oak)}
.e-gift{background:#221A15}
.e-gift-card{position:absolute;left:50%;top:40%;width:calc(var(--p)*164);height:calc(var(--p)*104);margin:calc(var(--p)*-52) 0 0 calc(var(--p)*-82);border-radius:calc(var(--p)*9);background:linear-gradient(135deg,#E2703A,#B94A1C);color:#fff;transform:rotate(-9deg);padding:calc(var(--p)*13) calc(var(--p)*14);box-shadow:0 calc(var(--p)*14) calc(var(--p)*26) rgba(0,0,0,.45)}
.e-gift-card .cg-flame{width:calc(var(--p)*15);height:auto;color:#FFE2C8}
.e-gift-card b{display:block;font-size:calc(var(--p)*21);font-weight:600;letter-spacing:-.02em;margin-top:calc(var(--p)*17)}
.e-gift-card small{margin-top:calc(var(--p)*7);opacity:.9}
.e-post{color:#fff}
.e-post::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(10,6,4,.85),rgba(10,6,4,0) 66%)}
.e-post div{position:absolute;z-index:2;left:calc(var(--p)*16);right:calc(var(--p)*12);bottom:calc(var(--p)*62)}
.e-post b{display:block;font-size:calc(var(--p)*23);font-weight:500;line-height:1.02;letter-spacing:-.02em}
.e-post small{margin-top:calc(var(--p)*9);color:var(--gold)}

.e-word{--guide:#fff}
.e-word b{font-size:calc(var(--p)*68);font-weight:600;letter-spacing:-.03em;padding-bottom:calc(var(--p)*6)}
.e-word .cg-word-top{background:var(--ember);color:#F0A27C}
.e-word .cg-word-bot{background:var(--bone);color:var(--char)}
.e-word .cg-word-bot b em{color:var(--ember)}
.e-word .cg-guides .g3,.e-word .cg-guides .g4{color:var(--ember)}

/* ---------- pause, rest while off screen, reduced motion ---------- */
.collage.is-paused *,.collage.is-resting *{animation-play-state:paused!important}
@media (prefers-reduced-motion:reduce){
  .collage *,.collage *::before,.collage *::after{animation:none!important}
  .collage-pause{display:none}
  .cg-tile{transition:none}
}

/* ---------- narrower screens ---------- */
@media (max-width:1100px){
  .cg-project--a .cg-caption{margin-left:0}
  .cg-name,.cg-meta{font-size:18px}
}
@media (max-width:860px){
  .collage-head{grid-template-columns:1fr}
  .collage-head-side{flex-direction:row;align-items:center;justify-content:space-between;flex-wrap:wrap}
}
@media (max-width:760px){
  .cg-project{grid-template-columns:minmax(0,1fr);row-gap:12px}
  .cg-project--b .cg-photo{grid-column:1;grid-row:1;margin-top:0}
  .cg-project--b .cg-bento{grid-row:2}
  .cg-project--b .cg-caption{grid-row:3;padding-right:0}
  .cg-project--a .cg-photo{margin-right:9%}
  .cg-project--a .cg-bento{margin-left:0}
  .cg-project--b .cg-photo{margin-left:9%}
  .cg-pane{border-radius:10px}
  .cg-caption{padding-top:26px}
  .cg-name,.cg-meta{font-size:17px}
}
html:not(.js) .collage-pause{display:none}
.collage-pause{min-height:44px}