/* Alive layer (Oct 18 2026, preview on Home): typing headline, spinning seal, hand-drawn ink, slow name ticker.
   Each block is independent; remove one by deleting its section here and in alive.js. */

/* 1 · Typing headline */
.al-type{position:relative;white-space:nowrap}
.al-caret{position:absolute;right:-6px;top:.12em;display:block;width:2px;height:.86em;background:currentColor;opacity:.8;animation:alBlink 1.05s steps(1) infinite}
@keyframes alBlink{50%{opacity:0}}
.al-ink{position:absolute;left:-2%;bottom:-.32em;width:104%;height:.5em;overflow:visible;pointer-events:none}
.al-ink path{fill:none;stroke:#7E3247;stroke-width:2.4;stroke-linecap:round;opacity:.72;stroke-dasharray:var(--L,400);stroke-dashoffset:var(--L,400);transition:stroke-dashoffset 900ms cubic-bezier(.65,0,.35,1)}
.al-ink.on path{stroke-dashoffset:0}

/* 2 · Spinning seal */
.al-seal{position:absolute;z-index:4;width:132px;height:132px;left:calc(50% - 18px);bottom:56px;pointer-events:none;
  border-radius:50%;background:rgba(60,40,51,.62);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  box-shadow:0 18px 40px -18px rgba(30,18,23,.6)}
.al-seal svg{width:100%;height:100%;display:block}
.al-seal .ring{transform-origin:66px 66px;animation:alSpin 42s linear infinite}
.al-seal text{fill:#E8E3DA;font-family:'Space Mono',ui-monospace,monospace;font-size:9.6px;letter-spacing:.24em;text-transform:uppercase}
.al-seal .mono{font-family:'Fraunces',Georgia,serif;font-style:italic;font-size:30px;letter-spacing:0;text-transform:none;fill:#F4F1EB}
@keyframes alSpin{to{transform:rotate(360deg)}}
@media (max-width:760px){.al-seal{display:none}}

/* 3 · Hand-drawn ink arrow (contact) */
.al-arrow{position:absolute;pointer-events:none;overflow:visible}
.al-arrow path{fill:none;stroke:#E8E3DA;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;opacity:.75;
  stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1600ms cubic-bezier(.65,0,.35,1)}
.al-arrow path.head{transition-delay:1350ms;transition-duration:500ms}
.al-arrow.on path{stroke-dashoffset:0}
@media (max-width:760px){.al-arrow{display:none}}

/* 4 · Slow name ticker */
.al-ticker{position:relative;overflow:hidden;background:#F4F1EB;border-top:1px solid rgba(60,40,51,.12);border-bottom:1px solid rgba(60,40,51,.12);
  padding:17px 0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
.al-track{display:flex;width:max-content;animation:alTick 75s linear infinite}
.al-ticker:hover .al-track{animation-play-state:paused}
.al-item{display:inline-flex;align-items:center;white-space:nowrap;font-family:'Space Mono',ui-monospace,monospace;font-size:12px;letter-spacing:.26em;text-transform:uppercase;color:#3C2833}
.al-item em{font-family:'Fraunces',Georgia,serif;font-style:italic;text-transform:none;letter-spacing:.01em;font-size:16px;color:#4D5861;margin:0 .55em}
.al-dot{display:inline-block;width:5px;height:5px;border-radius:50%;background:#7E3247;opacity:.55;margin:0 34px}
@keyframes alTick{to{transform:translateX(-50%)}}

/* Visitors who ask for less motion: everything still, nothing missing */
@media (prefers-reduced-motion: reduce){
  .al-caret{display:none}.al-seal .ring,.al-track{animation:none}.al-ink path,.al-arrow path{stroke-dashoffset:0;transition:none}
  .al-track{flex-wrap:wrap;width:auto;justify-content:center}
}
/* let the underline sit below the line once the headline has arrived */
h1.is-in .m-line:has(.al-type){overflow:visible}

/* 5 · Count-up proof strip (18e) */
.al-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin:34px 0 40px;border-top:1px solid rgba(60,40,51,.16);border-bottom:1px solid rgba(60,40,51,.16)}
.al-stat{padding:26px 22px 22px;border-left:1px solid rgba(60,40,51,.12)}
.al-stat:first-child{border-left:0;padding-left:0}
.al-num{font-family:'Fraunces',Georgia,serif;font-style:italic;font-size:clamp(40px,5vw,68px);line-height:1;color:#281A22;letter-spacing:-.01em;white-space:nowrap}
.al-num .from{font-size:.42em;color:#79636D;font-style:normal;margin-right:.3em;vertical-align:.55em}
.al-lab{margin-top:10px;font-family:'Space Mono',ui-monospace,monospace;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:#4D5861;line-height:1.6}
.al-src{grid-column:1/-1;padding:0 0 14px;font-size:12px;color:#6B6460}
@media (max-width:760px){.al-stats{grid-template-columns:1fr}.al-stat{border-left:0;border-top:1px solid rgba(60,40,51,.12);padding-left:0}.al-stat:first-child{border-top:0}}

/* 6 · Service chooser (18e) */
.al-pick{margin:30px 0 26px}
.al-pick p{margin:0 0 12px;font-family:'Space Mono',ui-monospace,monospace;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:#4D5861}
.al-chips{display:flex;flex-wrap:wrap;gap:10px}
.al-chip{font:inherit;font-family:'Fraunces',Georgia,serif;font-style:italic;font-size:16px;color:#3C2833;background:#FCFAF7;border:1px solid rgba(60,40,51,.28);border-radius:999px;padding:9px 18px;cursor:pointer;transition:background .25s,color .25s,border-color .25s,transform .25s}
.al-chip:hover{transform:translateY(-2px);border-color:#3C2833}
.al-chip[aria-pressed="true"]{background:#3C2833;color:#F4F1EB;border-color:#3C2833}
.services-grid.al-choosing .service-card{transition:opacity .45s ease,transform .45s ease,box-shadow .45s ease}
.services-grid.al-choosing .service-card:not(.al-on){opacity:.38}
.services-grid.al-choosing .service-card.al-on{transform:translateY(-8px);box-shadow:0 34px 60px -30px rgba(40,22,30,.5)}

/* 7 · "Hi, I'm Sonia" note on the portrait (18e) */
.about-teaser .portrait{position:relative}
.al-note{position:absolute;left:-14px;top:18px;z-index:3;background:#F7EDBF;color:#3C2833;font-family:'Fraunces',Georgia,serif;font-style:italic;font-size:17px;padding:8px 16px 9px;transform:rotate(-6deg);box-shadow:0 10px 18px -10px rgba(40,22,30,.45);transition:transform .5s cubic-bezier(.34,1.56,.64,1)}
.al-note::before{content:"";position:absolute;left:50%;top:-7px;width:44px;height:14px;margin-left:-22px;background:rgba(232,227,218,.75);transform:rotate(3deg)}
.about-teaser .portrait:hover .al-note{transform:rotate(-2deg) translateY(-3px)}

/* 8 · Open-to status (18e) */
.al-status{display:inline-flex;align-items:center;gap:10px;margin-top:22px;font-family:'Space Mono',ui-monospace,monospace;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:#E8E3DA;opacity:.85}
.al-status i{width:8px;height:8px;border-radius:50%;background:#A8C3A0;box-shadow:0 0 0 0 rgba(168,195,160,.6);animation:alPulse 2.4s ease-out infinite}
@keyframes alPulse{0%{box-shadow:0 0 0 0 rgba(168,195,160,.55)}80%,100%{box-shadow:0 0 0 12px rgba(168,195,160,0)}}

/* 9 · Signature wordmark at the very bottom (18e) */
.al-mark{overflow:hidden;line-height:.78!important;font-size:inherit!important;margin-top:28px;pointer-events:none;user-select:none}
.al-mark span{display:block!important;font-size:clamp(28px,9.2vw,160px)!important;font-family:'Fraunces',Georgia,serif;font-style:italic;font-size:clamp(56px,12.4vw,190px);letter-spacing:-.02em;color:#3C2833;opacity:.1;white-space:nowrap;transform:translateY(12%);transition:transform 1600ms cubic-bezier(.16,1,.3,1),opacity 1600ms ease}
.al-mark.on span{transform:translateY(0);opacity:.16}
@media (prefers-reduced-motion: reduce){.al-status i{animation:none}.al-mark span{transform:none}}