/* Loaded last. Logo in the gold of the headings, and the scene wheel on the left of the home page. */

/* Logo: the PNG becomes a mask filled with the same gold as "matière" in the titles. */
.brand-symbol,.brand-wordmark{background-image:none;background-color:var(--gold);-webkit-mask-image:url('assets/logo-maqexe-trim.png');mask-image:url('assets/logo-maqexe-trim.png');-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
.brand-symbol{-webkit-mask-size:76px auto;mask-size:76px auto;-webkit-mask-position:0 0;mask-position:0 0}
.brand-wordmark{-webkit-mask-size:115px auto;mask-size:115px auto;-webkit-mask-position:0 -96px;mask-position:0 -96px}
@media(max-width:700px){
  .brand-symbol{-webkit-mask-size:65px auto;mask-size:65px auto}
  .brand-wordmark{-webkit-mask-size:102px auto;mask-size:102px auto;-webkit-mask-position:0 -85px;mask-position:0 -85px}
}

/* Scene wheel: the current scene stays fixed in the centre, the other titles turn around it
   like a drum, growing as they reach the centre and shrinking as they move away.
   scenes.js sets --o (offset from the current scene) and --a (its absolute value) on each button. */
html.scenes-on .scene-dots.scene-wheel{position:fixed;z-index:15;left:26px;right:auto;top:50%;width:170px;height:230px;display:block;gap:0;transform:translateY(-50%);perspective:520px;perspective-origin:0 50%}
.scene-wheel:before{content:'';position:absolute;left:-14px;top:50%;width:7px;height:1px;background:var(--gold)}
.scene-wheel-track{position:absolute;inset:0;transform-style:preserve-3d}
.scene-wheel button{position:absolute;left:0;top:50%;width:100%;height:46px;min-height:0;margin-top:-23px;padding:0;display:flex;align-items:center;justify-content:flex-start;gap:0;background:none;box-shadow:none;transform-origin:0 50%;
  transform:translateY(calc(var(--o,0) * 64px)) rotateX(calc(var(--o,0) * -42deg)) scale(calc(1 - var(--a,0) * .34));
  opacity:calc(1 - var(--a,0) * .45);transition:transform .95s cubic-bezier(.2,.75,.25,1),opacity .95s ease}
.scene-wheel button:before,.scene-wheel button:after{display:none}
.scene-wheel .dot-label{position:static;order:0;opacity:1;transform:none;padding:0;background:none;-webkit-text-stroke:0;font:400 27px/1 var(--serif);letter-spacing:-.01em;text-transform:none;white-space:nowrap;color:#9a9083;transition:color .6s}
.scene-wheel button[aria-current] .dot-label{color:var(--ink)}
.scene-wheel button:not([aria-current]):hover .dot-label,.scene-wheel button:focus-visible .dot-label{color:#e6dccd}
.scene-wheel button:focus-visible{outline-offset:6px}
/* keep the scenes clear of the wheel */
html.scenes-on .scene-inner,html.scenes-on .intro-copy{padding-left:max(222px,var(--pad))}
@media(max-width:1200px){html.scenes-on .scene-dots.scene-wheel{left:14px;width:130px}.scene-wheel .dot-label{font-size:22px}html.scenes-on .scene-inner,html.scenes-on .intro-copy{padding-left:172px}}
@media(prefers-reduced-motion:reduce){.scene-wheel button{transition:none}}

/* Presentation below the scenes (phones, tablets, and the mobile version Google indexes). */
.scenes-on .home-about{display:none}
.home-about{max-width:1100px;margin:0 auto;padding:30px 6% 60px;color:#c9c0b4}
.home-about h2{font:400 clamp(32px,6vw,46px)/1.06 var(--serif);color:var(--ink);margin:0 0 18px;letter-spacing:-.02em}
.home-about h3{font:400 24px/1.15 var(--serif);color:var(--ink);margin:0 0 8px}
.home-about h3 a{border-bottom:1px solid #5e4c37}
.home-about p{font-size:15px;line-height:1.85;margin:0 0 14px}
.home-about p a{color:#e3ceb3;border-bottom:1px solid #6f5b42}
.home-about>div,.home-about-skills{padding:38px 0;border-top:1px solid var(--line)}
.home-about-skills{list-style:none;margin:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:26px 34px}
.home-about-method ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:22px;counter-reset:step}
.home-about-method li{counter-increment:step;padding-top:14px;border-top:1px solid #44392e}
.home-about-method li:before{content:'0' counter(step);display:block;font-size:11px;letter-spacing:.12em;color:var(--gold);margin-bottom:8px}