:root{--night:#10172d;--teal:#123c42;--gold:#d8b56c;--paper:#e6eefb;--white:#fff9ed;--ink:#1d2330;--muted:#bcc6c9;--line:rgba(216,181,108,.24);color-scheme:dark;--shell:1240px}
*{box-sizing:border-box}html{scroll-behavior:auto;scroll-padding-top:96px}body{margin:0;background:var(--night);color:var(--white);font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;line-height:1.7}a{color:inherit;text-decoration:none}button{font:inherit}img{max-width:100%;display:block}h1,h2,h3,p,figure{margin:0}h1,h2,h3{font-family:Georgia,"Times New Roman",serif;font-weight:400;line-height:1.06}em{font-weight:400}a,button{-webkit-tap-highlight-color:transparent}a:focus-visible,button:focus-visible{outline:3px solid var(--gold);outline-offset:6px;border-radius:3px}.shell{width:min(var(--shell),calc(100% - 112px));margin-inline:auto}.skip-link{position:fixed;left:16px;top:12px;z-index:20;padding:10px 20px;background:var(--gold);color:var(--night);transform:translateY(-150%)}.skip-link:focus{transform:none}.site-header{border-bottom:1px solid var(--line);background:var(--night);position:relative;z-index:5}.header-inner{min-height:100px;display:flex;align-items:center;justify-content:space-between;gap:32px}.brand{display:flex;align-items:center;gap:13px;letter-spacing:.17em;font-size:19px;font-weight:600}.brand img{flex:none}.header-inner nav{display:flex;align-items:center;gap:38px;font-size:14px}.header-inner nav a{padding:8px 0;transition:color .2s}.header-inner nav a:hover{color:var(--gold)}.nav-contact{border-bottom:1px solid var(--gold)}.nav-contact span{margin-left:14px;color:var(--gold)}.hero{overflow:hidden;position:relative;background:radial-gradient(ellipse at 86% 42%,rgba(18,60,66,.5),transparent 57%),var(--night)}.hero-grid{display:grid;grid-template-columns:1.03fr 1fr;gap:58px;align-items:center;padding-top:66px;padding-bottom:54px}.eyebrow{font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;line-height:1.65;color:var(--gold)}.eyebrow span{margin-right:9px;font-size:16px}h1{font-size:clamp(54px,5.2vw,78px);letter-spacing:-.045em;margin:25px 0 27px}h1 em{color:var(--gold)}.hero-intro{max-width:460px;color:var(--muted);font-size:17px;line-height:1.85}.button{display:inline-flex;align-items:center;justify-content:space-between;gap:32px;min-height:56px;padding:14px 24px;font-size:14px;font-weight:600;border:1px solid var(--gold);border-radius:3px;transition:background .2s,transform .2s,box-shadow .2s}.button-gold{background:var(--gold);color:var(--night)}.button:hover{background:#edce8f;box-shadow:0 8px 26px rgba(216,181,108,.12);transform:translateY(-2px)}.button span{font-size:23px;line-height:1}.hero-copy .button{margin-top:33px}.hero-note{margin-top:36px;font-size:11px;letter-spacing:.035em;color:#9faeb6;display:flex;gap:13px;align-items:center}.small-line{width:25px;height:1px;background:var(--gold)}.workshop{position:relative;max-width:540px;justify-self:end;width:100%}.art-frame{position:relative;border:1px solid var(--line);border-radius:48% 48% 3px 3px;overflow:hidden;background:#122f38;box-shadow:0 26px 70px rgba(0,0,0,.16)}.workshop-art{width:100%;height:auto;aspect-ratio:800/800;object-fit:cover;object-position:50% 50%}.workshop figcaption{display:flex;gap:10px;align-items:center;margin-top:15px;font-family:Georgia,serif;font-size:14px;color:#c8c9bb}.workshop figcaption>span:first-child{color:var(--gold);font-size:19px}.art-label{margin-left:auto;font-family:system-ui,sans-serif;font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:#9faeb6}.firefly{position:absolute;background:#ffe4a0;width:3px;height:3px;border-radius:50%;box-shadow:0 0 10px 3px #d8b56c55;opacity:.9}.fly-one{left:21%;top:68%}.fly-two{left:78%;top:54%}.fly-three{left:63%;top:80%}body[data-motion="on"] .firefly{animation:drift 4s ease-in-out infinite alternate}.fly-two{animation-delay:-2s!important}.fly-three{animation-delay:-1s!important}@keyframes drift{to{transform:translate(9px,-14px);opacity:.35}}.hero-bottom{border-top:1px solid var(--line);padding:22px 0;display:flex;align-items:center;justify-content:space-between;font-size:9px;letter-spacing:.17em;color:#9aaab2}.hero-bottom a{width:34px;height:34px;display:grid;place-items:center;border:1px solid var(--line);border-radius:50%;font-size:19px;color:var(--gold)}.studio{background:var(--paper);color:var(--ink);padding-top:104px;color-scheme:light}.studio .eyebrow,.approach .eyebrow{color:#726036}.studio-grid{display:grid;grid-template-columns:1fr 1fr;gap:100px}.studio h2,.section-heading h2{font-size:clamp(38px,3.7vw,55px);letter-spacing:-.035em;margin-top:24px}.studio h2 em{color:#53736b}.studio-copy{padding-top:2px;font-size:15px;color:#4d5d57}.studio-copy .lead{font-family:Georgia,serif;font-size:24px;line-height:1.5;color:var(--ink);margin-bottom:23px}.studio-copy p+p{margin-top:17px}.text-link{display:inline-flex;gap:30px;align-items:center;font-weight:600;font-size:13px;margin-top:25px;border-bottom:1px solid #9f956f;padding-bottom:5px;color:var(--ink)}.text-link:hover{color:#496d64}.text-link span{font-size:21px}.studio-divider{margin-top:82px;padding:26px 0;border-top:1px solid #23383725;border-bottom:1px solid #23383725;display:flex;justify-content:center;align-items:center;gap:28px}.studio-divider p{font-family:Georgia,serif;font-style:italic;font-size:20px;color:#536b5f}.studio-divider span{color:#9c8042}.approach{background:var(--paper);color:var(--ink);padding:83px 0 100px;color-scheme:light}.section-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:45px}.section-heading>p{color:#5a675e;font-size:14px;padding-bottom:4px}.values{display:grid;grid-template-columns:repeat(3,1fr);margin-top:51px;border:1px solid #2338372c;border-radius:4px;overflow:hidden}.value{padding:32px 30px 28px;background:rgba(247,248,250,.35);transition:background .25s}.value+.value{border-left:1px solid #2338372c}.value:hover{background:rgba(247,248,250,.8)}.value-top{display:flex;align-items:flex-start;justify-content:space-between}.value-number{font-family:Georgia,serif;font-size:13px;color:#68603d}.value-top svg{width:74px;height:74px;fill:none;stroke:#8d763f;stroke-width:1.2}.value h3{font-size:34px;margin-top:20px;letter-spacing:-.025em}.value p{font-size:14px;color:#5a675e;margin-top:15px;min-height:76px;max-width:290px}.value-foot{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:8px;letter-spacing:.1em;border-top:1px solid #23383720;margin-top:29px;padding-top:18px;font-weight:600;color:#5d674a}.value-foot>span{font-size:20px;font-weight:400;color:#8d763f}.contact{position:relative;overflow:hidden;background:radial-gradient(ellipse at 50% 120%,#23616055,transparent 65%),var(--teal);border-top:1px solid #d8b56c30;padding:83px 0 91px}.contact:before,.contact:after{content:"";position:absolute;border:1px solid #d8b56c15;width:560px;height:560px;border-radius:50%;top:20px;pointer-events:none}.contact:before{left:-400px}.contact:after{right:-400px}.contact-inner{text-align:center;position:relative}.contact-spark{color:var(--gold);font-size:31px;display:block;margin-top:23px}.contact h2{font-size:clamp(42px,4.3vw,64px);letter-spacing:-.035em;margin-top:18px}.contact h2 em{color:var(--gold)}.contact p:not(.eyebrow){font-size:15px;color:#c3d0ca;margin-top:25px}.contact .button{margin-top:29px}.site-footer{border-top:1px solid var(--line);background:#0e202a}.footer-inner{min-height:106px;display:flex;align-items:center;justify-content:space-between;gap:28px}.site-footer .brand{font-size:13px;letter-spacing:.16em;gap:11px}.footer-inner p{font-family:Georgia,serif;font-size:13px;font-style:italic;color:#a8b6b5}.copyright{font-size:10px;color:#a8b6b5}.motion-toggle{background:none;border:1px solid #d8b56c40;color:#c7d0c7;border-radius:3px;font-size:10px;padding:7px 10px;cursor:pointer;min-height:38px}.motion-toggle:hover{border-color:var(--gold)}.studio a:focus-visible,.approach a:focus-visible{outline-color:#536b5f}
@media(min-width:1600px){.hero-grid{padding-top:90px;padding-bottom:70px}.workshop{max-width:570px}.hero-grid{gap:80px}}
@media(max-width:1000px){.shell{width:calc(100% - 64px)}.hero-grid{gap:32px}.hero-copy .eyebrow{font-size:9px}h1{font-size:56px}.hero-intro{font-size:15px}.hero-note{font-size:10px}.studio-grid{gap:50px}.value{padding:25px 23px}.value-foot{font-size:7px}.workshop figcaption{font-size:12px}.art-label{font-size:8px}.header-inner nav{gap:28px}.footer-inner{gap:20px}}
@media(max-width:760px){html{scroll-padding-top:24px}.shell{width:calc(100% - 40px)}.header-inner{min-height:85px;gap:20px}.brand{font-size:15px;gap:9px}.brand img{width:27px;height:27px}.header-inner nav{gap:18px;font-size:12px}.header-inner nav a:nth-child(2){display:none}.nav-contact span{margin-left:6px}.hero-grid{grid-template-columns:1fr;padding-top:43px;padding-bottom:34px;gap:42px}.hero-copy{max-width:520px}.hero-copy .eyebrow{font-size:10px}h1{font-size:clamp(50px,9vw,70px);margin-top:23px}.hero-intro{font-size:16px}.hero-copy .button{margin-top:25px}.hero-note{margin-top:24px;font-size:10px}.workshop{max-width:520px;justify-self:center}.workshop-art{aspect-ratio:800/640;object-position:50% 55%}.workshop figcaption{font-size:13px}.art-label{font-size:8px}.hero-bottom{padding:17px 0;font-size:8px;letter-spacing:.1em}.hero-bottom>span:last-child{display:none}.studio{padding-top:59px}.studio-grid{grid-template-columns:1fr;gap:30px}.studio h2,.section-heading h2{font-size:42px;margin-top:18px}.studio-copy .lead{font-size:23px}.studio-divider{margin-top:45px;gap:16px;padding:23px 0}.studio-divider p{font-size:16px;text-align:center}.approach{padding:51px 0 59px}.section-heading{display:block}.section-heading>p{margin-top:22px}.values{grid-template-columns:1fr;margin-top:32px}.value{padding:26px}.value+.value{border-left:none;border-top:1px solid #2338372c}.value h3{margin-top:0;font-size:35px}.value p{min-height:0;max-width:440px;padding-right:15px}.value-top svg{width:64px;height:64px}.value-foot{margin-top:23px;font-size:8px}.contact{padding:53px 0 62px}.contact h2{font-size:45px}.contact p:not(.eyebrow){font-size:14px}.contact p br{display:none}.contact .button{font-size:13px;padding-inline:20px}.footer-inner{padding:28px 0;min-height:140px;display:grid;grid-template-columns:1fr auto;gap:17px}.footer-inner p{grid-row:2}.motion-toggle{grid-column:2;grid-row:1}.copyright{grid-column:2;grid-row:2}.site-footer .brand{font-size:12px}}
@media(max-width:370px){.shell{width:calc(100% - 32px)}.header-inner nav{gap:12px;font-size:11px}.brand{font-size:13px}.header-inner nav a:first-child{display:none}h1{font-size:46px}.eyebrow{letter-spacing:.12em}.hero-copy .eyebrow{font-size:9px}.hero-note{font-size:9px}.studio-divider{gap:10px}.studio-divider p{font-size:15px}.footer-inner p{font-size:11px}.contact h2{font-size:40px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}.button:hover{transform:none}}
body[data-motion="off"]{scroll-behavior:auto}body[data-motion="off"] *{animation:none!important;transition:none!important}

html[data-motion="on"]{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html[data-motion="on"]{scroll-behavior:auto}}

/* Readable supporting copy and complete navigation at narrow widths. */
.art-label{font-size:11px;letter-spacing:.06em}
.hero-note{font-size:12px}
.hero-bottom{font-size:11px;letter-spacing:.1em}
.value-number{font-size:15px}
.value-foot{font-size:11px;letter-spacing:.06em;line-height:1.6}
.footer-inner p{font-size:14px}
.copyright{font-size:12px}
.motion-toggle{font-size:12px;min-height:44px}
@media(max-width:760px){
  .header-inner{display:grid;grid-template-columns:1fr;gap:4px;padding:18px 0 10px;min-height:122px}
  .header-inner>.brand{justify-content:center;font-size:16px}
  .header-inner nav{justify-content:space-between;gap:14px;font-size:12px;width:100%}
  .header-inner nav a{display:inline-flex!important;align-items:center;min-height:44px;padding:6px 0}
  .workshop figcaption{flex-wrap:wrap;font-size:14px;line-height:1.6}
  .art-label{font-size:11px}
  .hero-note{font-size:12px;line-height:1.7}
  .hero-bottom{font-size:10px}
  .value-foot{font-size:11px}
  .footer-inner{grid-template-columns:1fr auto;gap:14px}
  .footer-inner p{grid-column:1/-1;grid-row:2;font-size:14px}
  .copyright{grid-column:1/-1;grid-row:3;font-size:12px}
}

/* Workshop discovery stays usable without animation or JavaScript. */

.awake:after{content:"";position:absolute;inset:28% 17% 14%;background:radial-gradient(ellipse,#ffd47835,transparent 65%);pointer-events:none}.awake .firefly{width:5px;height:5px;box-shadow:0 0 18px 6px #d8b56c55}
.workshop-door{display:block;width:100%;height:100%;border:0;border-radius:45% 45% 4px 4px;background:transparent;cursor:pointer;color:var(--gold)}
.workshop-door[hidden]{display:none}.workshop-door:hover,.workshop-door:focus-visible{background:#d8b56c18;box-shadow:inset 0 0 0 3px var(--gold);outline:none}
.knocking .workshop-door{animation:door-knock .19s ease-in-out 2}
@keyframes door-knock{50%{transform:translateX(2px);background:#d8b56c30}}
.workshop-status{text-align:center;font-family:Georgia,serif;font-style:italic;color:var(--muted);font-size:14px;min-height:24px;margin-top:8px}
/* Independent lamps make sleep a scene state, not a dimmed image. */
.workshop-art{filter:none;display:block;overflow:hidden}
.shop-light{fill:#173b48;transition:fill .7s ease}
.awake .shop-light{fill:#ffe4a0;transition-delay:.25s}
.awake g.shop-light{transition-delay:.65s}
.awake g.shop-light path,.awake g.shop-light circle{fill:inherit}
.chimney-smoke{opacity:0;transform-box:fill-box;transform-origin:center}
.awake .chimney-smoke{opacity:.4;animation:smoke-rise 4s ease-in-out infinite}
@keyframes smoke-rise{0%,100%{transform:translateY(0);opacity:.15}50%{transform:translate(3px,-12px);opacity:.5}}
.familiar-companion{position:absolute;right:13%;bottom:10%;width:90px;height:100px;border:0;background:none;padding:0;cursor:pointer;z-index:2;transform-origin:bottom center}
.familiar-companion .familiar-face{filter:saturate(.65);transform:rotate(-9deg);transition:opacity 1.2s ease,filter 1.2s ease;position:absolute;inset:0;width:100%;height:100%}.familiar-companion .familiar-awake{opacity:0}
.familiar-companion .familiar-face{animation:sleep-breathe 4s ease-in-out infinite}.awake .familiar-companion .familiar-face{animation:familiar-wake 1.8s ease both,familiar-bob 3s 1.8s ease-in-out infinite}
.awake .familiar-companion .familiar-face{filter:none;transform:rotate(0)}
.familiar-speech{position:absolute;bottom:100%;right:-25px;min-width:90px;max-width:160px;padding:5px 10px;border:1px solid var(--line);border-radius:12px;background:var(--night);color:var(--gold);font-size:12px;white-space:normal}
@keyframes sleep-breathe{0%,100%{transform:rotate(-9deg)}50%{transform:rotate(-9deg) scale(1.025)}}
@keyframes familiar-bob{50%{transform:translateY(-7px) rotate(3deg)}}
body[data-motion="on"] .contact-spark{animation:spark-turn 8s ease-in-out infinite}
body[data-motion="on"] .value-top svg{transition:transform .5s}
body[data-motion="on"] .value:hover .value-top svg{transform:rotate(15deg) scale(1.08)}
@keyframes spark-turn{50%{transform:rotate(90deg) scale(1.12)}}
/* Celestial filigree: the studio's selected identity. */
:root{--leaf:#234b4c;--gold:#d8b56c}
.header-inner>.brand img{width:60px;height:60px}.site-footer .brand img{width:44px;height:44px}
.brand{letter-spacing:.17em}.site-header{border-bottom:3px double var(--line)}
.art-frame{border:3px double #d8b56c65;box-shadow:0 24px 65px #0003,0 0 0 7px #d8b56c08}
.studio-divider{border-block:3px double #9c804245}
.value{position:relative}.value:after{content:"";position:absolute;right:9px;bottom:8px;width:58px;height:58px;background:url('/assets/filigree-corner.svg') center/contain no-repeat;transform:rotate(180deg);opacity:.35;pointer-events:none}.value-foot{padding-right:35px}
.contact-inner{padding:38px 50px;border:3px double var(--line)}
.contact-inner:before,.contact-inner:after{content:"";position:absolute;width:130px;height:130px;background:url('/assets/filigree-corner.svg') center/contain no-repeat;pointer-events:none;opacity:.8}.contact-inner:before{left:10px;top:10px}.contact-inner:after{right:10px;bottom:10px;transform:rotate(180deg)}
.studio-seal{margin:0 auto 25px;width:112px;height:112px;box-shadow:0 12px 30px #0002}
.button-gold{border:1px solid #f4dba0;box-shadow:inset 0 0 0 3px #10172d12}
@media(max-width:760px){.header-inner>.brand img{width:52px;height:52px}.site-footer .brand img{width:40px;height:40px}.contact-inner{padding:35px 20px}.contact-inner:before,.contact-inner:after{width:65px;height:65px}.studio-seal{width:88px;height:88px}.familiar-companion{right:8%;bottom:5%;width:75px;height:80px}}
/* The illuminated initial supplies the M in the complete wordmark. */
.header-inner>.brand,.site-footer .brand{gap:3px;align-items:flex-end;letter-spacing:0}
.brand-word{font-family:Georgia,"Times New Roman",serif;font-style:italic;font-weight:400;font-size:48px;line-height:1;letter-spacing:-.045em;color:var(--gold);padding-bottom:3px}
.site-footer .brand-word{font-size:35px;padding-bottom:2px}
@media(max-width:760px){.header-inner>.brand .brand-word{font-size:42px}.site-footer .brand-word{font-size:32px}}

/* A stretch and crossfade let the familiar wake before it starts to float. */
.awake .familiar-sleeping{opacity:0}.awake .familiar-companion .familiar-awake{opacity:1}
@keyframes familiar-wake{0%{transform:rotate(-9deg) scale(.96,.9)}35%{transform:rotate(-5deg) scale(.92,1.12)}65%{transform:translateY(-9px) rotate(4deg) scale(1.04,.97)}100%{transform:translateY(0) rotate(0)}}
body[data-motion="on"] .value{transition:background .25s,box-shadow .35s,transform .35s}
body[data-motion="on"] .value:hover{transform:translateY(-4px);box-shadow:inset 0 3px 0 #9c804280}
.button-gold{position:relative;overflow:hidden}.button-gold:after{content:"";position:absolute;inset:-50% auto -50% -65%;width:40%;background:linear-gradient(90deg,transparent,#fff9ed65,transparent);transform:skewX(-20deg);pointer-events:none}
body[data-motion="on"] .button-gold:hover:after,body[data-motion="on"] .button-gold:focus-visible:after{animation:gold-shimmer .8s ease}
@keyframes gold-shimmer{to{left:135%}}

.wake-workshop{display:block;margin:18px auto 0;background:transparent;border:1px solid var(--gold);border-radius:30px;padding:10px 22px;color:var(--gold);min-height:48px;cursor:pointer}
.wake-workshop[hidden]{display:none}.wake-workshop:hover{background:#d8b56c15}

.products{padding:80px 0;background:var(--night);border-top:1px solid var(--line)}
.product-card{display:grid;grid-template-columns:1fr 1.3fr;align-items:center;gap:48px;margin-top:38px;padding:38px;border:3px double var(--line);background:#123c4228}
.product-card h3{font:42px Georgia,serif;color:var(--gold);margin:12px 0 20px}.product-card p:not(.eyebrow){color:var(--muted);max-width:540px}.product-card .button{margin-top:25px}
.product-preview{position:relative;border:1px solid var(--gold);border-radius:10px;background:#10172d;padding:18px;box-shadow:0 18px 35px #0003}
.product-logo{display:block;width:min(100%,240px);height:auto;margin:auto}
@media(max-width:760px){.products{padding:55px 0}.product-card{grid-template-columns:1fr;gap:28px;padding:24px}.product-preview{max-width:350px;width:100%}.header-inner nav{gap:10px;flex-wrap:wrap}}

.familiar-speech{transition:opacity .6s ease,transform .6s ease}.knocking .familiar-speech{opacity:0;transform:translateY(6px)}

/* Quiet, irregular glimmers sit behind the content, never above links or text. */
.hero,.studio,.approach,.products,.contact{position:relative;isolation:isolate}
.ambient-sparks{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:-1}
.ambient-sparks span{position:absolute;left:var(--x);top:var(--y);width:var(--size);height:var(--size);background:var(--gold);opacity:0;clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%)}
.studio .ambient-sparks span,.approach .ambient-sparks span{background:#8d763f}
body[data-motion="on"] .ambient-sparks span{animation:ambient-glimmer var(--duration) var(--delay) ease-in-out infinite}
@keyframes ambient-glimmer{0%,100%{opacity:0;transform:rotate(calc(var(--turn) - 10deg)) scale(.85)}45%{opacity:.23}65%{opacity:.12;transform:rotate(calc(var(--turn) + 10deg)) scale(1)}}
@media(max-width:760px){.ambient-sparks span:nth-child(even){display:none}}
body[data-motion="off"] .ambient-sparks{display:none}
@media(prefers-reduced-motion:reduce){.ambient-sparks{display:none}}

.familiar-eyes,.familiar-happy-eyes{transition:opacity .65s ease-in-out}
.familiar-happy-eyes{opacity:0}
.familiar-companion[data-expression="soft"] .familiar-eyes{opacity:0}
.familiar-companion[data-expression="soft"] .familiar-happy-eyes{opacity:1}

.familiar-gaze{transform:translate(var(--gaze-x,0px),var(--gaze-y,0px));transition:transform .45s ease-out}

.familiar-curious-eyes,.familiar-thoughtful-eyes,.familiar-wonder-eyes{opacity:0;transition:opacity .65s ease-in-out}
.familiar-companion[data-expression="curious"] .familiar-eyes,.familiar-companion[data-expression="thoughtful"] .familiar-eyes,.familiar-companion[data-expression="wonder"] .familiar-eyes{opacity:0}
.familiar-companion[data-expression="curious"] .familiar-curious-eyes,.familiar-companion[data-expression="thoughtful"] .familiar-thoughtful-eyes,.familiar-companion[data-expression="wonder"] .familiar-wonder-eyes{opacity:1}

/* The same leaf scrolls frame each chapter of the page. */
.section-ornament{position:relative;z-index:2;left:50%;transform:translateX(-50%);width:min(calc(100% - 40px),1240px);height:0;display:flex;align-items:center;gap:18px;color:var(--gold);pointer-events:none}
.section-ornament:before,.section-ornament:after{content:"";flex:1;height:4px;border-block:1px solid #d8b56c55}
.section-ornament:before{mask-image:linear-gradient(90deg,transparent,#000)}
.section-ornament:after{mask-image:linear-gradient(270deg,transparent,#000)}
.section-ornament>span{position:relative;display:grid;place-items:center;flex:0 0 160px;height:48px;font-size:23px}
.section-ornament>span:before,.section-ornament>span:after{content:"";position:absolute;top:0;width:54px;height:48px;background:url('/assets/filigree-corner.svg') center/contain no-repeat}
.section-ornament>span:before{left:8px;transform:rotate(-45deg)}
.section-ornament>span:after{right:8px;transform:scaleX(-1) rotate(-45deg)}
.studio-divider{position:relative;border-block:0;padding-block:32px}
.studio-divider:before,.studio-divider:after{content:"";position:absolute;left:10%;right:10%;height:4px;border-block:1px solid #9c804245;mask-image:linear-gradient(90deg,transparent,#000 20%,#000 80%,transparent)}
.studio-divider:before{top:0}.studio-divider:after{bottom:0}
.studio-divider>span{font-size:25px;color:#9c8042}
@media(max-width:760px){.section-ornament{gap:8px}.section-ornament>span{flex-basis:110px;height:34px;font-size:18px}.section-ornament>span:before,.section-ornament>span:after{width:36px;height:34px}.section-ornament>span:before{left:3px}.section-ornament>span:after{right:3px}}

/* Keep the scroll cue on the same centerline as the section ornament. */
.hero-bottom{position:relative}
.hero-bottom>a{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}
.hero-bottom>span{max-width:calc(50% - 30px)}
.hero-bottom>span:last-child{margin-left:auto;text-align:right}

/* Five sleepy nudges earn a small spell without waking the workshop. */
.sleepy-spell{position:absolute;inset:-20px;pointer-events:none;opacity:0;border:1px solid #d8b56c70;border-radius:50%;box-shadow:0 0 24px #d8b56c30}
.sleepy-spell i{position:absolute;left:50%;top:50%;font-style:normal;font-size:15px;color:var(--gold);line-height:1;transform:translate(-50%,-50%) rotate(var(--angle)) translateY(-65px) rotate(calc(-1 * var(--angle)))}
.familiar-companion[data-spell="casting"] .sleepy-spell{opacity:.85}
body[data-motion="on"] .familiar-companion[data-spell="casting"] .sleepy-spell{animation:dream-spell 4.2s ease-in-out both}
body[data-motion="on"] .familiar-companion[data-spell="casting"] .familiar-face{animation:dream-float 4.2s ease-in-out both}
@keyframes dream-spell{0%,100%{opacity:0;transform:scale(.65) rotate(-20deg)}25%,70%{opacity:.85}50%{transform:scale(1.1) rotate(30deg)}100%{transform:scale(1.25) rotate(65deg)}}
@keyframes dream-float{0%,100%{transform:translateY(0) rotate(-9deg)}35%{transform:translateY(-18px) rotate(6deg)}65%{transform:translateY(-18px) rotate(-6deg)}}
.sleepy-spell i:nth-child(1){--angle:0deg}
.sleepy-spell i:nth-child(2){--angle:45deg}
.sleepy-spell i:nth-child(3){--angle:90deg}
.sleepy-spell i:nth-child(4){--angle:135deg}
.sleepy-spell i:nth-child(5){--angle:180deg}
.sleepy-spell i:nth-child(6){--angle:225deg}
.sleepy-spell i:nth-child(7){--angle:270deg}
.sleepy-spell i:nth-child(8){--angle:315deg}

/* The sleepy spell wakes the stars, while the workshop itself stays asleep. */
.familiar-companion[data-spell="casting"] .familiar-sleeping{opacity:0}
.familiar-companion[data-spell="casting"] .familiar-awake{opacity:1;filter:none}
body[data-motion="on"][data-spell="casting"] .ambient-sparks span{animation:spell-stars 4.2s ease-in-out both}
@keyframes spell-stars{0%,100%{opacity:0;transform:rotate(var(--turn)) scale(.85)}35%,55%{opacity:.85;transform:rotate(calc(var(--turn) + 25deg)) scale(2.8)}80%{opacity:.3;transform:rotate(calc(var(--turn) + 35deg)) scale(1.4)}}
body:after{content:"";position:fixed;inset:0;z-index:10;pointer-events:none;opacity:0;background:radial-gradient(ellipse at 75% 55%,#f5d68a30,transparent 65%)}
body[data-motion="on"][data-spell="casting"]:after{animation:spell-glow 4.2s ease-in-out both}
@keyframes spell-glow{0%,100%{opacity:0;transform:scale(.7)}45%{opacity:1;transform:scale(1.4)}80%{opacity:.25;transform:scale(1.8)}}

/* Announce workshop updates without repeating the familiar's visible dialogue. */
.workshop-status{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.familiar-speech{font-family:system-ui,-apple-system,"Segoe UI",sans-serif;font-size:14px;line-height:1.5}
.hero-grid{padding-bottom:64px}
@media(max-width:760px){.hero-grid{padding-bottom:40px}}

.familiar-dock{transform-origin:top left;position:absolute;width:90px;height:100px;z-index:8;pointer-events:none}
.familiar-dock[hidden]{display:none}
.familiar-dock .familiar-companion{position:relative;right:auto;bottom:auto;pointer-events:auto;width:90px;height:100px}
.familiar-dock .familiar-speech{right:0;width:205px;max-width:205px;font-size:14px;line-height:1.5;padding:10px 13px;box-shadow:0 8px 28px #0003}
@media(max-width:760px){.familiar-dock{width:62px;height:70px}.familiar-dock .familiar-companion{width:62px;height:70px}.familiar-dock .familiar-speech{right:0;bottom:100%;width:170px;max-width:170px;font-size:13px}}

.brand-mark{position:relative;display:block;flex:none}
.brand-mark:after{content:"";position:absolute;inset:0;pointer-events:none;mask:url('/assets/magikorp-glint-mask.svg') center/contain no-repeat;background:linear-gradient(110deg,transparent 40%,#fff9ed 50%,transparent 60%) 100% 0/300% 100%;opacity:0}
body[data-motion="on"] .brand:is(:hover,:focus-visible) .brand-mark:after{opacity:1;animation:letter-glint 1.1s ease both}
body[data-motion="on"] .brand:is(:hover,:focus-visible) .brand-word{background:linear-gradient(110deg,var(--gold) 40%,#fff9ed 50%,var(--gold) 60%) 100% 0/300% 100%;background-clip:text;-webkit-background-clip:text;color:transparent;animation:letter-glint 1.1s .15s ease both}
@keyframes letter-glint{from{background-position:100% 0}to{background-position:0% 0}}
.familiar-companion[data-expression="idle"] .familiar-gaze{transform-box:fill-box;transform-origin:center;animation:idle-blink 7.3s ease-in-out infinite,idle-glance 13.7s ease-in-out infinite}
.familiar-companion[data-expression="idle"][data-tracking="true"] .familiar-gaze{translate:0 0;animation:idle-blink 7.3s ease-in-out infinite}
@keyframes idle-blink{0%,38%,42%,75%,79%,100%{scale:1 1}40%,77%{scale:1 .08}}
@keyframes idle-glance{0%,20%,48%,72%,100%{translate:0 0}28%,40%{translate:-2px -1px}80%,91%{translate:2px 1px}}
.familiar-companion[data-blink="closed"] .familiar-gaze,.familiar-companion[data-blink="opening"] .familiar-gaze{animation:none;transform-box:fill-box;transform-origin:center;transition:scale .14s ease-in-out;scale:1 .02}
.familiar-companion[data-blink="opening"] .familiar-gaze{scale:1 1;transition-duration:.18s}
.familiar-companion[data-blink="closed"] .familiar-gaze *,.familiar-companion[data-blink="opening"] .familiar-gaze *{transition:none}

.familiar-dock[data-side="left"] .familiar-speech{left:0;right:auto}

.familiar-face{transform-origin:50% 90%}
.familiar-companion[data-sleeping="true"]:not([data-spell="casting"]) .familiar-face{animation:familiar-settle 1.4s ease-in-out both,sleep-breathe 4s 1.4s ease-in-out infinite}
.familiar-companion[data-sleeping="true"]:not([data-spell="casting"]) .familiar-sleeping{opacity:1}
.familiar-companion[data-sleeping="true"]:not([data-spell="casting"]) .familiar-awake{opacity:0}
@keyframes familiar-settle{0%{transform:rotate(0)}40%{transform:translateY(3px) rotate(-4deg) scale(1.04,.94)}100%{transform:rotate(-9deg)}}
.familiar-dreams{position:absolute;inset:0;pointer-events:none}
.familiar-travel-spark,.scene-travel-spark,.contact-success-sparks span,.brand-sparks span{position:absolute;left:0;top:0;z-index:7;pointer-events:none;color:var(--gold);font-size:24px;line-height:1;text-shadow:0 0 10px #fff0b599,0 0 20px #d8b56c88}
.familiar-dreams span{position:absolute;left:60%;top:10%;font:italic 24px Georgia,serif;color:#d8b56c;opacity:0}
body[data-motion="on"] .familiar-companion[data-dreaming="true"] .familiar-dreams span{animation:dream-letter 4.8s var(--dream-delay) ease-in-out infinite}
.familiar-companion[data-dreaming="true"] .familiar-speech{opacity:0}
body[data-motion="off"] .familiar-companion[data-dreaming="true"] .familiar-dreams span:first-child{opacity:.8}
@keyframes dream-letter{0%{opacity:0;transform:translate(0,0) rotate(-12deg) scale(1)}15%{opacity:.8}35%{transform:translate(10px,-25px) rotate(12deg) scale(.85)}65%{opacity:.55;transform:translate(-4px,-52px) rotate(-10deg) scale(.6)}100%{opacity:0;transform:translate(12px,-85px) rotate(8deg) scale(.25)}}

.familiar-sleepy-eyes,.familiar-wink-eyes{opacity:0;transition:opacity .65s ease-in-out}
.familiar-companion:is([data-expression="curious-right"],[data-expression="sleepy"],[data-expression="wink"]) .familiar-eyes{opacity:0}
.familiar-companion[data-expression="curious-right"] .familiar-curious-eyes{opacity:1;transform:translateX(120px) scaleX(-1)}
.familiar-companion[data-expression="sleepy"] .familiar-sleepy-eyes,.familiar-companion[data-expression="wink"] .familiar-wink-eyes{opacity:1}

/* Decorative travel must not widen the page during mobile scrolling. */
html,body{overflow-x:clip}

.values{align-items:start;overflow:visible}
.value{min-width:0}
.value-experiment{margin-top:20px;overflow:hidden;border-top:1px solid #23383725}
.value-experiment summary{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:48px;cursor:pointer;list-style:none;color:var(--ink);font-size:13px;font-weight:600}
.value-experiment summary::-webkit-details-marker{display:none}
.value-experiment summary span{color:#8d763f;font-size:22px;transition:transform .4s}
.value-experiment[open] summary span{transform:rotate(90deg)}
.value-experiment summary:focus-visible{outline:2px solid #53736b;outline-offset:-3px}
.value-scene{position:relative;background:radial-gradient(ellipse at bottom,#23535b,#10172d);border:1px solid #d8b56c55;border-radius:8px;aspect-ratio:260/170;overflow:hidden;color:#fff0b5;transform-origin:top center}
.value-scene svg{display:block;width:100%;height:100%}
.value .scene-caption{font-size:12px;line-height:1.6;min-height:0;margin:12px 0 2px;padding:0}
.constellation{fill:none;stroke:#d8b56c;stroke-width:1;stroke-dasharray:4 6;opacity:.35}
.wonder-threads{stroke:#fff0b5;stroke-width:2;filter:drop-shadow(0 0 3px #d8b56c)}
.scene-star{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);width:44px;height:44px;border:0;background:none;color:#ffe3a0;font-size:25px;cursor:pointer;text-shadow:0 0 12px #d8b56c99}
.play-shape{position:absolute;bottom:48px;width:35px;height:35px;border:1px solid #fff0b5;cursor:pointer;box-shadow:0 4px 18px #0003}
.shape-circle{left:18%;border-radius:50%;background:#d8b56c}
.shape-square{left:44%;border-radius:5px;background:#80b3ad}
.shape-triangle{left:70%;background:#c597ae;clip-path:polygon(50% 0,100% 100%,0 100%)}
.scene-replay{position:absolute;bottom:9px;left:50%;transform:translateX(-50%);white-space:nowrap;background:none;border:0;border-bottom:1px solid #d8b56c55;color:#fff0b5;cursor:pointer;font-size:12px;min-height:32px}
.craft-scene svg{height:calc(100% - 30px)}
.craft-piece{transform-box:fill-box;transform-origin:center}
.site-version{display:block;font:10px system-ui,sans-serif;opacity:.75}
.familiar-companion[data-resting="true"] .familiar-face{animation:none!important;transform:rotate(-12deg) scale(1.08,.82)}
.scene-star[aria-pressed="true"]{background:#d8b56c33;border:2px solid #ffe3a0;border-radius:50%;color:white;text-shadow:0 0 18px #fff0b5;box-shadow:0 0 18px #d8b56c88}
.scene-star:focus-visible{outline:2px solid white;outline-offset:2px;border-radius:50%}
.wonder-scene.won{box-shadow:0 0 22px #d8b56c99;border-color:#d8b56c}
.wonder-reset{margin-top:10px;min-height:44px;padding:8px 16px;border:1px solid currentColor;border-radius:6px;background:transparent;color:var(--ink);cursor:pointer}
.wonder-shower{position:fixed;inset:0;z-index:20;pointer-events:none;overflow:hidden;background:radial-gradient(ellipse at center,#d8b56c25,transparent 70%)}
.wonder-shower span{position:absolute;top:-60px;color:#e8b94f;-webkit-text-stroke:1px #76501c;text-shadow:0 2px 3px #241b3b80,0 0 14px #d8b56c;animation:wonder-fall 4.8s ease-in both}
@keyframes wonder-fall{0%{opacity:0;transform:translateY(0) rotate(0) scale(.4)}15%{opacity:1}65%{opacity:.85}100%{opacity:0;transform:translateY(105vh) rotate(var(--spin,160deg)) scale(.3)}}
.contact-form{max-width:640px;margin:36px auto 20px;text-align:left;position:relative}
.contact-fields{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.contact-form label{display:block;font-size:14px;color:var(--cream);margin-bottom:20px}
.contact-form input,.contact-form textarea{display:block;width:100%;margin-top:8px;border:1px solid #d8b56c66;border-radius:7px;padding:12px 14px;background:#10172dcc;color:#fff9ed;font:16px/1.5 system-ui,sans-serif}
.contact-form textarea{resize:vertical;min-height:150px}
.contact-form input:focus,.contact-form textarea:focus{outline:2px solid #d8b56c;outline-offset:3px}
.contact-form .contact-privacy,.contact-form .contact-status{font:13px/1.6 system-ui,sans-serif;margin:12px 0;max-width:none}
.contact-status{min-height:24px}
.contact-challenge{margin:18px 0}
.contact-form button:disabled{opacity:.55;cursor:not-allowed}
.contact-trap{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.contact-alternative a{color:var(--gold);text-underline-offset:4px}
@media(max-width:760px){.contact-fields{grid-template-columns:1fr;gap:0}.contact-form{margin-top:28px}.contact-challenge{max-width:100%;overflow:hidden}}
.action-icon{display:inline-block;width:21px;height:21px;flex:none;fill:none;stroke:currentColor;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round;vertical-align:middle}
.nav-contact .action-icon{width:17px;height:17px;margin-left:10px;color:var(--gold)}
.scene-replay .action-icon{width:15px;height:15px;margin-left:6px}
.value-scene .action-icon{display:inline-block;width:15px;height:15px}
.contact-actions{display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:18px;margin-top:24px;padding-top:22px;border-top:1px solid var(--line)}
.contact-actions .contact-challenge{margin:0}
.contact-actions .button{margin:0 0 0 auto;gap:16px}
.contact-form[hidden],.contact-success[hidden]{display:none}
.contact-success{max-width:640px;margin:36px auto 24px;padding:36px 24px;border:1px solid var(--line);border-radius:12px;background:#10172d40;outline-offset:5px}
.contact-success-mark{display:grid;place-items:center;width:54px;height:54px;margin:0 auto 20px;border:1px solid var(--gold);border-radius:50%;color:var(--gold);background:#d8b56c12}
.contact-success-mark .action-icon{width:28px;height:28px}
.contact-success h3{font-size:30px;color:var(--white)}
.contact .contact-success p{margin:16px auto 0;max-width:400px;font-size:15px}
.contact-form .contact-status:empty{display:none}
.contact-actions .contact-button-label{font-size:14px;line-height:1.4}
.contact-spinner{width:18px;height:18px;flex:none;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:contact-spin 1s linear infinite}
.contact-actions button[data-state="ready"] .contact-spinner,.contact-actions button[data-state="error"] .contact-spinner,.contact-actions button:not([data-state="ready"]) .action-icon{display:none}
.contact-actions button:disabled:hover{transform:none;box-shadow:none;background:var(--gold)}
@keyframes contact-spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.contact-spinner{animation:none}}
body[data-motion="off"] .contact-spinner{animation:none}

.contact-success{position:relative;box-sizing:border-box}
.contact-transition{position:relative;display:flow-root;max-width:640px;margin-inline:auto}
.contact-success-sparks{position:absolute;top:36px;left:8px;right:8px;pointer-events:none;z-index:8}
.contact-success-sparks[hidden]{display:none}
.contact-success-sparks span{opacity:0;animation:contact-spark 3.4s ease-in-out both;font-size:36px}
@keyframes contact-spark{0%{opacity:0;transform:translate(-50%,-50%) scale(.5) rotate(0deg)}12%{opacity:1}65%{opacity:.8}100%{opacity:0;transform:translate(calc(-50% + var(--drift-x)),calc(-50% + var(--drift-y))) scale(.1) rotate(var(--turn))}}
@media(prefers-reduced-motion:reduce){.contact-success-sparks{display:none}}
body[data-motion="off"] .contact-success-sparks{display:none}

.brand{position:relative}
.brand-sparks{position:absolute;inset:0;pointer-events:none}
.brand-sparks span{opacity:0;font-size:12px;left:14%;top:10%;--drift-x:-8px;--drift-y:-12px;--turn:100deg}
.brand-sparks span:nth-child(2){left:38%;top:82%;font-size:9px;--drift-y:10px;--turn:-130deg;animation-delay:.12s}
.brand-sparks span:nth-child(3){left:69%;top:18%;font-size:14px;--drift-x:8px;animation-delay:.25s}
.brand-sparks span:nth-child(4){left:90%;top:70%;font-size:10px;--drift-y:8px;animation-delay:.38s}
@media(hover:hover) and (prefers-reduced-motion:no-preference){body[data-motion="on"] .brand:hover .brand-sparks span{animation-name:contact-spark;animation-duration:1.5s;animation-fill-mode:both;animation-timing-function:ease-out}}
@media(prefers-reduced-motion:no-preference){body[data-motion="on"] .brand:focus-visible .brand-sparks span{animation-name:contact-spark;animation-duration:1.5s;animation-fill-mode:both;animation-timing-function:ease-out}}

.footer-inner .footer-signature{display:flex;align-items:center;justify-content:center;gap:16px;line-height:1.6;padding:18px 0}.footer-signature img{width:112px;height:auto;flex:none;filter:drop-shadow(0 5px 8px #0003)}
@media(max-width:760px){.footer-inner .footer-signature{justify-content:flex-start;padding:8px 0;grid-column:1/-1;grid-row:1}.footer-inner .motion-toggle{grid-column:1;grid-row:2}.footer-inner .copyright{grid-column:2;grid-row:2}.footer-signature img{width:96px}}