@font-face{font-family:Outfit;src:url('Outfit-Regular.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:Outfit;src:url('Outfit-Medium.ttf') format('truetype');font-weight:500;font-display:swap}
*{box-sizing:border-box}html,body{margin:0;background:transparent;color:#24221f;font-family:Outfit,Arial,sans-serif}
.mf-infini{max-width:1440px;margin:auto;padding:46px 32px 20px;background:transparent}
header{position:relative;text-align:center}.brand{position:absolute;left:1%;top:0;text-align:left;font-size:23px;line-height:1.05;font-weight:500}h1{font-size:clamp(32px,4.3vw,61px);line-height:1.12;letter-spacing:-.035em;font-weight:400;margin:5px 0 15px}h1 span{color:#82705a}header>p{font-size:18px;color:#625c54;margin:0}
.orbit{position:relative;width:100%;aspect-ratio:1200/580;margin-top:40px}.arrows{position:absolute;inset:0;width:100%;height:100%;color:#947c5d;overflow:visible}.arrows>path{fill:none;stroke:currentColor;stroke-width:1.35;marker-end:url(#arrow)}
.sculpture{position:absolute;width:53%;height:auto;left:23.5%;top:28%;object-fit:contain}.note{position:absolute;max-width:28%}.note h2{font-size:clamp(18px,1.9vw,27px);font-weight:500;line-height:1.15;margin:0 0 12px;letter-spacing:-.025em}.note p{font-size:clamp(14px,1.35vw,19px);line-height:1.45;color:#625c54;margin:0}.design{left:6%;top:22%}.fabrication{left:43%;top:0}.circular{left:77%;top:22%}.carbon{left:77%;top:58%}.progress{left:1%;top:58%}
footer{text-align:center;margin-top:4px}footer p{font-size:22px;margin:0 0 11px}footer small{font-size:13px;color:#625c54}nav{display:flex;justify-content:center;gap:20px;margin-top:25px}button{font:inherit;font-size:13px;color:#625c54;background:transparent;border:0;border-bottom:1px solid #b7aa96;padding:8px 1px;cursor:pointer}button:hover{color:#24221f}button:focus-visible{outline:2px solid #82705a;outline-offset:5px}
.arrows>path.arrow-tip{stroke:none;fill:none}
.arrows>path{stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.signature{position:absolute;width:11.5%;height:auto;left:44.25%;top:20%;object-fit:contain}
.sculpture{top:37%;width:43%;left:28.5%;isolation:isolate}
.sculpture>img{display:block;width:100%;height:auto}
.kraft-finish{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:0}
.running .kraft-finish{animation:kraft-colours 10s ease-in-out 1.5s both}
@keyframes kraft-colours{0%,100%{opacity:0;fill:#68705a}12%,25%{opacity:.82;fill:#68705a}37%,47%{opacity:.82;fill:#b9897a}59%,69%{opacity:.82;fill:#81909b}81%,88%{opacity:.82;fill:#8f9a7f}96%{opacity:0;fill:#8f9a7f}}
.fabrication{left:35%;width:30%;max-width:30%;text-align:center}
.running .signature{animation:signature-in .8s cubic-bezier(.22,1,.36,1) 5.35s both}
.running .note{animation-name:text-in;animation-duration:.65s;animation-timing-function:cubic-bezier(.22,1,.36,1)}
@keyframes text-in{from{opacity:0}to{opacity:1}}
@keyframes signature-in{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
.running .sculpture{animation:reveal .7s both}.running .note{animation:reveal .55s var(--delay) both}.running .arrows>path:not(.arrow-tip){marker-end:none;animation:trace 1s linear var(--delay) both}.running .arrows>path.arrow-tip{animation:tip-on 1s steps(1,end) var(--delay) both}.running footer{animation:reveal .6s 1.5s both}@keyframes reveal{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}@keyframes trace{0%{stroke-dasharray:1;stroke-dashoffset:1;opacity:0}1%{opacity:1}100%{stroke-dasharray:1;stroke-dashoffset:0;opacity:1}}@keyframes tip-on{from{opacity:0}to{opacity:1}}
.running .note{animation:text-in .65s cubic-bezier(.22,1,.36,1) var(--delay) both}
@media(max-width:700px){.mf-infini{padding:26px 24px}.brand{position:static;text-align:center;font-size:18px;margin-bottom:28px}header>p{font-size:16px}.orbit{aspect-ratio:auto;display:flex;flex-direction:column;margin-top:25px;gap:25px}.sculpture{position:static;width:100%;height:auto;order:0}.arrows{display:none}.note{position:static;max-width:none;text-align:center;order:1}.note h2{font-size:23px;margin-bottom:7px}.note p{font-size:17px}footer{margin-top:34px}footer p{font-size:21px}footer small{display:block;line-height:1.5}}
@media(prefers-reduced-motion:reduce){.running .sculpture,.running .note,.running .arrows>path,.running footer{animation:none!important}}
@media(max-width:700px){.signature{position:static;align-self:center;width:100px;order:2;margin-top:8px}.fabrication{width:auto;max-width:none}.sculpture{position:static;width:100%}.running .signature{animation-delay:2.1s}}
@media(prefers-reduced-motion:reduce){.running .signature{animation:none!important}}
@media(prefers-reduced-motion:reduce){.running .kraft-finish{animation:none!important;opacity:0}}
/* Bound the animated colour mask to the sculpture rather than the mobile orbit. */
@media(max-width:700px){.sculpture{position:relative;inset:auto;contain:paint}}

/* Enabled only by the desktop Maison embed; standalone and mobile stay fluid. */
html.mf-signature-screen, .mf-signature-screen body { height: 100%; overflow: hidden; }
.mf-signature-screen .mf-infini {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1048px;
  max-width: none;
  margin: 0;
  padding: 8px 88px;
  transform: translate(-50%, -50%) scale(var(--signature-scale, 1));
}
.mf-signature-screen h1 { font-size: 40px; margin: 0 0 10px; }
.mf-signature-screen header > p { font-size: 17px; }
.mf-signature-screen .orbit { margin-top: 22px; }
.mf-signature-screen .note h2 { font-size: 22px; }
.mf-signature-screen .note p { font-size: 17px; }
.mf-signature-screen footer p { font-size: 20px; margin-bottom: 6px; }
.mf-signature-screen nav { margin-top: 10px; }

.mf-signature-screen .note { width: 30%; max-width: 30%; background: #f1ede5; }
.mf-signature-screen .design { left: 2%; }
.mf-signature-screen .circular, .mf-signature-screen .carbon { left: 76%; width: 34%; max-width: 34%; }
.mf-signature-screen .progress { left: -3%; top: 52%; }
.mf-signature-screen .carbon { top: 48%; }
.mf-signature-screen footer small { font-size: 15px; }
.mf-signature-screen button { font-size: 16px; }

/* A narrow desktop panel still uses the complete diagram, even when its iframe
   crosses the mobile breakpoint. Touch layouts keep their original flow. */
.mf-signature-screen .orbit { display: block; aspect-ratio: 1200 / 580; }
.mf-signature-screen .arrows { display: block; }
.mf-signature-screen .note { position: absolute; text-align: left; }
.mf-signature-screen .fabrication { text-align: center; }
.mf-signature-screen .signature {
  position: absolute; width: 11.5%; left: 44.25%; top: 20%; margin-top: 0;
}
.mf-signature-screen .sculpture {
  position: absolute; width: 43%; left: 28.5%; top: 37%; contain: none;
}
.mf-signature-screen footer { margin-top: 4px; }
.mf-signature-screen footer small { display: inline; line-height: normal; }
.mf-signature-screen .running .signature { animation-delay: 5.35s; }

/* The desktop title is now in the parent editorial column. */
.mf-signature-screen .mf-infini > header { display: none; }

/* The narrow touch layout keeps the cycle around the sculpture at readable
   type sizes. It reflows the diagram instead of shrinking desktop text. */
.arrows--phone, .mf-signature-screen .arrows--phone { display: none; }
.mf-signature-embed .mf-infini > header { display: none; }
@media (max-width: 700px) {
  html:not(.mf-signature-screen) .mf-infini { padding: 8px 10px; }
  html:not(.mf-signature-screen) .orbit { display: block; height: 420px; aspect-ratio: auto; margin-top: 12px; }
  html:not(.mf-signature-screen) .arrows--wide { display: none; }
  html:not(.mf-signature-screen) .arrows--phone { display: block; }
  html:not(.mf-signature-screen) .arrows--phone > path { stroke-width: 1.3; marker-end: url(#arrow-phone); }
  html:not(.mf-signature-screen) .running .arrows--phone > path:not(.arrow-tip) { marker-end: none; }
  html:not(.mf-signature-screen) .note { position: absolute; width: 46%; max-width: none; text-align: left; background: #f1ede5; }
  html:not(.mf-signature-screen) .note h2 { font-size: 13px; line-height: 1.2; margin-bottom: 6px; }
  html:not(.mf-signature-screen) .note p { font-size: 11.5px; line-height: 1.35; }
  html:not(.mf-signature-screen) .fabrication { left: 17%; top: 0; width: 66%; text-align: center; }
  html:not(.mf-signature-screen) .design { left: 0; top: 72px; }
  html:not(.mf-signature-screen) .circular { left: auto; right: 0; top: 72px; }
  html:not(.mf-signature-screen) .progress { left: 0; top: 322px; }
  html:not(.mf-signature-screen) .carbon { left: auto; right: 0; top: 314px; width: 48%; }
  html:not(.mf-signature-screen) .signature { position: absolute; width: 48px; left: calc(50% - 24px); top: 157px; margin: 0; }
  html:not(.mf-signature-screen) .sculpture { position: absolute; left: 0; right: 0; top: 194px; width: 54%; max-width: 174px; margin-inline: auto; contain: none; }
  html:not(.mf-signature-screen) footer { margin-top: 6px; }
  html:not(.mf-signature-screen) footer p { font-size: 14px; line-height: 1.4; margin-bottom: 6px; }
  html:not(.mf-signature-screen) footer small { font-size: 11px; line-height: 1.4; }
  html:not(.mf-signature-screen) nav { margin-top: 6px; gap: 20px; }
  html:not(.mf-signature-screen) button { min-height: 44px; font-size: 12px; }
}