/* Geist (SIL OFL, see /fonts/OFL.txt), self-hosted: the variable weight axis, Latin only (with tabular figures).
   The fallback is Arial scaled to Geist's width and line metrics, so text barely moves when Geist arrives. */
@font-face {
  font-family: "Geist"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url(/fonts/geist-1.7.2-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2190-21FF, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Geist Fallback"; src: local("Arial"), local("ArialMT"), local("Helvetica");
  size-adjust: 102.27%; ascent-override: 98.27%; descent-override: 28.85%; line-gap-override: 0%;
}

/* ARSWORD shared chrome: masthead with menu, buttons and footer.
   Loaded by every page, including the POS configurator (after its tokens in styles.css),
   so it sets no element resets and only uses tokens both stylesheets define. */

/* ---------- masthead */
/* the bar is frosted glass: the page shows through it, blurred, as it scrolls underneath (no rule under it).
   The glass sits on a pseudo-element: a backdrop-filter on the bar itself would become the containing block of
   the phone menu, which is position: fixed inside it */
.masthead {
  position: sticky; top: 0; z-index: 50;
  height: var(--topbar);
}
.masthead::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: var(--canvas);
  background: color-mix(in srgb, var(--canvas) 70%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .masthead::before, html.menu-open .masthead::before { background: var(--canvas); }
}
.mh-in {
  height: 100%;
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 12px;
  padding: 0 clamp(16px, 2vw, 28px);
}
.logo {
  display: inline-flex; align-items: center; gap: 11px; justify-self: start;
  padding: 6px 4px; border-radius: var(--r-row, 10px);
  color: var(--ink); text-decoration: none;
}
.logo-mark { width: 31px; height: auto; aspect-ratio: 292.5 / 228.5; }
.logo-word { width: 104px; height: auto; aspect-ratio: 690.5 / 64; }

.mnav { display: flex; align-items: center; gap: 2px; }
.mnav a {
  padding: 8px 14px; border-radius: var(--r-pill);
  color: var(--ink-2); font-size: var(--fs-md); font-weight: 500; text-decoration: none;
  transition: background-color .15s, color .15s;
}
.mnav a:hover { background: var(--sunken); color: var(--ink); }
.mnav a[aria-current="page"] { background: var(--sunken); color: var(--ink); }
.mnav .mnav-cta { display: none; }
.mh-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; grid-column: 3; }

.menu-btn { display: none; }
/* the three bars fold into a cross as the menu opens */
.i-menu path { transform-box: view-box; transform-origin: 12px 12px; transition: transform .5s var(--ease), opacity .25s var(--ease); }
.menu-btn[aria-expanded="true"] .i-menu .l1 { transform: rotate(45deg) translateY(5px); }
.menu-btn[aria-expanded="true"] .i-menu .l2 { opacity: 0; transform: scaleX(0); }
.menu-btn[aria-expanded="true"] .i-menu .l3 { transform: rotate(-45deg) translateY(-5px); }

@media (max-width: 899.98px) {
  .mh-actions .cta { display: none; }
  .menu-btn { display: inline-grid; }
  /* the phone menu. The glass bar itself drops to fill the screen (its frosted layer grows down, unclipping, and
     thickens a little), the links rise out of their lines one by one, the WhatsApp button settles at the foot, where
     a thumb reaches it, and the three bars fold into a cross (html.menu-open, set by site.js). Closing, the links drop
     away and the glass rolls back up into the bar */
  .masthead::before {
    inset: 0 0 auto 0; height: var(--topbar);
    clip-path: inset(0 0 calc(100% - var(--topbar)) 0);
    transition: clip-path .5s cubic-bezier(.76, 0, .24, 1) .06s, height 0s .56s, background-color .5s var(--ease);
  }
  html.menu-open .masthead::before {
    height: 100vh; height: 100lvh; clip-path: inset(0);
    background-color: color-mix(in srgb, var(--canvas) 86%, transparent);
    transition: clip-path .7s cubic-bezier(.76, 0, .24, 1), background-color .7s var(--ease);
  }
  html.menu-open { overflow: hidden; } /* the page holds still; only the root (a scrolling body would unstick the bar) */
  /* while open (and until the glass has rolled back up) the bar stands above the page's own fixed bars, such as the
     configurator's summary bar */
  .masthead { transition: z-index 0s .56s; }
  html.menu-open .masthead { z-index: 70; transition: none; }
  .mnav {
    position: fixed; inset: var(--topbar) 0 0 0; z-index: 49;
    display: flex; flex-direction: column; align-items: stretch; gap: 0;
    padding: clamp(12px, 3svh, 28px) var(--gutter) calc(20px + env(safe-area-inset-bottom));
    overflow-y: auto; overscroll-behavior: contain;
    visibility: hidden; pointer-events: none; transition: visibility 0s .56s;
  }
  html.menu-open .mnav { visibility: visible; pointer-events: auto; transition: none; }
  .mnav a:not(.mnav-cta) {
    display: block; flex: none; overflow: clip; padding: 3px 0 5px; border-radius: 0; background: none;
    font-size: clamp(2.5rem, 12vw, 3.25rem); font-weight: 600; line-height: 1.08; letter-spacing: -.045em; color: var(--ink);
  }
  .mnav a:not(.mnav-cta):hover { background: none; color: var(--ink-2); }
  .mnav a[aria-current="page"], .mnav a[aria-current="page"]:hover { background: none; color: var(--ink-3); }
  .mnav-t { display: block; transform: translateY(108%); transition: transform .32s cubic-bezier(.4, 0, 1, 1); }
  html.menu-open .mnav-t { transform: none; transition: transform .95s var(--ease) calc(.2s + var(--i, 0) * .07s); }
  .mnav .mnav-cta {
    display: flex; flex: none; margin-top: auto; font-size: var(--fs-base); letter-spacing: 0; color: var(--on-inverse);
    opacity: 0; transform: translateY(16px); transition: opacity .2s var(--ease), transform .3s var(--ease);
  }
  html.menu-open .mnav .mnav-cta { opacity: 1; transform: none; transition: opacity .6s .42s var(--ease), transform .95s .42s var(--ease); }
  .mnav .mnav-cta:hover { background: var(--inverse-hover); color: var(--on-inverse); }
}
@media (max-width: 419.98px) {
  .logo-word { width: 92px; }
  .mh-actions { gap: 8px; }
}

/* ---------- buttons */
.cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 24px;
  border: 1px solid transparent; border-radius: var(--r-pill);
  background: var(--inverse); color: var(--on-inverse);
  font-size: var(--fs-base); font-weight: 600; text-decoration: none; white-space: nowrap;
  transition: background-color .2s, border-color .2s, color .2s, transform .12s;
}
.cta:hover { background: var(--inverse-hover); }
.cta:active { transform: scale(.985); }
.cta .ico { width: 19px; height: 19px; }
.cta.ghost { background: transparent; border-color: var(--line-strong); color: var(--ink); }
.cta.ghost:hover { background: var(--sunken); border-color: var(--ink-3); }
.cta.sm { min-height: 40px; padding: 0 16px; font-size: var(--fs-md); gap: 8px; }
.cta.sm .ico { width: 17px; height: 17px; }
.cta .i-arrow { transition: transform .25s var(--ease); }
.cta:hover .i-arrow { transform: translateX(3px); }

.more-link {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--ink); font-weight: 600; text-decoration: underline; text-decoration-color: var(--line-strong);
  transition: text-decoration-color .2s;
}
.more-link:hover { text-decoration-color: currentColor; }
.more-link .ico { width: 18px; height: 18px; transition: transform .25s var(--ease); }
.more-link:hover .ico { transform: translateX(3px); }

/* ---------- footer */
.colophon { border-top: 1px solid var(--line); padding: clamp(48px, 5vw, 72px) 0 36px; }
.colo-top { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr)); gap: 36px 48px; }
.colo-brand .logo { margin: -6px 0 0 -4px; }
.colo-brand .logo-mark { width: 38px; }
.colo-brand .logo-word { width: 124px; }
.colo-brand p { margin-top: 14px; max-width: 34ch; font-size: var(--fs-md); color: var(--ink-3); }
.colophon h2 { font-size: var(--fs-sm); font-weight: 500; color: var(--ink-3); }
.colophon ul { list-style: none; padding: 0; margin-top: 14px; display: grid; gap: 10px; }
.colophon ul a { font-size: var(--fs-md); color: var(--ink-2); text-decoration: none; overflow-wrap: anywhere; }
.colophon ul a:hover { color: var(--ink); text-decoration: underline; }
.colo-bottom { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: clamp(40px, 4vw, 64px); padding-top: 22px; border-top: 1px solid var(--line); font-size: var(--fs-sm); color: var(--ink-3); }

@media (max-width: 899.98px) {
  .colo-top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .colo-brand { grid-column: 1 / -1; }
}
@media (max-width: 479.98px) {
  .colo-top { grid-template-columns: minmax(0, 1fr); gap: 32px; }
}
@media (prefers-reduced-motion: reduce) {
  .masthead::before, .mnav, .mnav-t, .mnav .mnav-cta, .i-menu path { transition-duration: .01s !important; transition-delay: 0s !important; }
}

/* ---------- page transition into and out of the portfolio: a cross-document view transition (Chrome, Edge,
   Safari; other browsers simply navigate). Going in, the dark portfolio rises over the light page like a sheet
   with a softly rounded leading edge while the page behind recedes; coming out, the sheet drops away. The head
   script sets html[data-vt] to in / out and skips every other navigation, which stays instant. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}
html[data-vt]::view-transition-old(root),
html[data-vt]::view-transition-new(root) { mix-blend-mode: normal; }
html[data-vt="in"]::view-transition-old(root) { animation: vt-recede 1.1s cubic-bezier(.76, 0, .24, 1) both; }
html[data-vt="in"]::view-transition-new(root) { animation: vt-rise 1.1s cubic-bezier(.76, 0, .24, 1) both; }
html[data-vt="out"]::view-transition-old(root) { z-index: 1; animation: vt-fall .95s cubic-bezier(.76, 0, .24, 1) both; }
html[data-vt="out"]::view-transition-new(root) { animation: vt-return .95s cubic-bezier(.76, 0, .24, 1) both; }
@keyframes vt-rise { from { clip-path: inset(100% 0 0 0 round 36px 36px 0 0); translate: 0 10%; } to { clip-path: inset(0 0 0 0 round 0); translate: 0 0; } }
@keyframes vt-recede { to { scale: .94; opacity: .5; } }
@keyframes vt-fall { from { clip-path: inset(0 0 0 0 round 0); } to { clip-path: inset(100% 0 0 0 round 36px 36px 0 0); translate: 0 10%; } }
@keyframes vt-return { from { scale: .94; opacity: .5; } }

/* ---------- splash intro: plays once per browser session, skipped under reduced motion.
   The A rises, the blade slashes and uncovers the name, then the canvas lifts like a curtain. */
html.splash-on body::before {
  content: ""; position: fixed; inset: 0; z-index: 999; background: var(--canvas);
  animation: splash-failsafe 0s linear 4s forwards; /* never keep the page covered if the script fails */
}
@keyframes splash-failsafe { to { visibility: hidden; } }
.splash {
  position: fixed; inset: 0; z-index: 1000;
  display: grid; place-items: center;
  background: var(--canvas); color: var(--ink);
  cursor: pointer; -webkit-user-select: none; user-select: none;
  transition: transform .8s cubic-bezier(.76, 0, .24, 1);
}
.splash-logo { display: grid; justify-items: center; gap: clamp(20px, 2.6vw, 30px); transition: opacity .35s ease, transform .6s var(--ease); }
.splash-mark { position: relative; width: clamp(92px, 10.5vw, 136px); aspect-ratio: 292.5 / 228.5; }
.splash-mark svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; fill: currentColor; }
.splash-word { width: clamp(156px, 17vw, 224px); height: auto; aspect-ratio: 690.5 / 64; fill: currentColor; }
.splash .m-apex { clip-path: inset(100% 0 0 0); animation: splash-reveal .7s var(--ease) .08s forwards; }
.splash .m-lower { clip-path: inset(100% 0 0 0); animation: splash-reveal .6s var(--ease) .26s forwards; }
.splash .m-blade {
  clip-path: inset(0 100% 0 0); transform: translate(-7%, 5%);
  animation: splash-slash .46s cubic-bezier(.7, 0, .12, 1) .56s forwards;
}
.splash .m-glint rect { fill: var(--canvas); opacity: .8; animation: splash-glint .6s cubic-bezier(.45, 0, .2, 1) 1.02s forwards; }
.splash-word { clip-path: inset(0 100% 0 0); animation: splash-reveal .7s var(--ease) .84s forwards; }
@keyframes splash-reveal { to { clip-path: inset(0 0 0 0); } }
@keyframes splash-slash { to { clip-path: inset(0 0 0 0); transform: none; } }
:root[data-theme="dark"] .splash .m-glint { display: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .splash .m-glint { display: none; } }
@keyframes splash-glint { to { transform: translateX(350px); } }
.splash.is-out { transform: translateY(-100%); }
.splash.is-out .splash-logo { opacity: 0; transform: translateY(-28px); }
.splash.is-quick { transition-duration: .5s; }
html.splash-settle .masthead, html.splash-settle main { animation: splash-settle .9s var(--ease) both; }
@keyframes splash-settle { from { transform: translateY(18px); opacity: .5; } }