/* Mosaik Design System — "The Piece" (paper, ink, paprika; Archivo + IBM Plex Mono).
   Ported from the Claude Design project's _ds/mosaik-design-system tokens + components.
   Fonts load from Google Fonts in each page's <head>. */

/* Colors */
:root{
  --mk-paper:#F2EFE8;
  --mk-paper-raised:#F7F5F0;
  --mk-white:#FFFFFF;
  --mk-stone:#DAD5CA;
  --mk-stone-2:#B9B4A9;
  --mk-rule-soft:#D6D1C6;
  --mk-graphite:#6B6862;
  --mk-ink-2:#3A3935;
  --mk-ink:#151513;
  --mk-ink-raised:#222220;
  --mk-graphite-on-dark:#9A978F;
  --mk-paper-on-dark:#D9D6CE;
  --mk-paprika:#E5412B;
  --mk-paprika-dark:#C23420;
  --mk-paprika-tint:#F6D3CC;
  --mk-green:#3D6B45;

  --surface-page:var(--mk-paper);
  --surface-raised:var(--mk-paper-raised);
  --surface-card:var(--mk-white);
  --surface-inverse:var(--mk-ink);
  --surface-inverse-raised:var(--mk-ink-raised);
  --surface-accent:var(--mk-paprika);
  --surface-placeholder:var(--mk-stone);

  --text-primary:var(--mk-ink);
  --text-body:var(--mk-ink-2);
  --text-secondary:var(--mk-graphite);
  --text-inverse:var(--mk-paper);
  --text-inverse-body:var(--mk-paper-on-dark);
  --text-inverse-secondary:var(--mk-graphite-on-dark);
  --text-on-accent:var(--mk-ink);

  --border-strong:var(--mk-ink);
  --border-soft:var(--mk-rule-soft);
  --border-control:var(--mk-stone-2);

  --accent:var(--mk-paprika);
  --accent-hover:var(--mk-paprika-dark);
  --focus-ring:var(--mk-paprika);

  --state-error:var(--mk-paprika-dark);
  --state-success:var(--mk-green);
  --overlay:rgba(21,21,19,.45);
}

/* Typography */
:root{
  --font-sans:'Archivo',ui-sans-serif,system-ui,sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,Menlo,monospace;

  --wdth-condensed:62%;
  --wdth-narrow:85%;
  --wdth-normal:100%;
  --wdth-brand:112%;
  --wdth-display:125%;

  --fw-regular:400;
  --fw-semibold:600;
  --fw-bold:700;
  --fw-heavy:800;

  --fs-display-xl:clamp(56px,9.6vw,168px);
  --fs-display:clamp(44px,7vw,104px);
  --fs-h1:clamp(36px,5vw,72px);
  --fs-h2:clamp(28px,3vw,40px);
  --fs-h3:22px;
  --fs-body-lg:20px;
  --fs-body:16px;
  --fs-small:14px;
  --fs-label:11px;
  --fs-micro:10px;

  --lh-display:.86;
  --lh-heading:.95;
  --lh-body:1.5;
  --lh-label:1;

  --tr-display:-0.055em;
  --tr-heading:-0.035em;
  --tr-wordmark:-0.045em;
  --tr-label:.08em;
}

/* Spacing */
:root{
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:24px;
  --space-6:32px;
  --space-7:48px;
  --space-8:80px;
  --space-9:120px;
  --space-10:160px;

  --grid-columns:12;
  --grid-gutter:24px;
  --page-margin:clamp(20px,4vw,56px);
  --page-max:1320px;

  --radius-0:0;
  --radius-icon:10px;
  --border-width:1px;

  --piece:0.16em;
  --piece-lg:0.19em;
  --piece-ui:7px;

  --shadow-none:none;
  --shadow-object:0 10px 24px rgba(0,0,0,.14);

  --ease-out:cubic-bezier(.2,.7,.1,1);
  --dur-fast:120ms;
  --dur-base:220ms;
  --dur-slow:420ms;
}

/* Page base */
html{scroll-behavior:smooth}
body{margin:0;background:var(--surface-page);color:var(--text-primary);font-family:var(--font-sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
*{box-sizing:border-box}
a{color:inherit}
a:hover{color:var(--accent)}
summary::-webkit-details-marker{display:none}
::selection{background:var(--accent);color:var(--text-on-accent)}

/* Mosaik component classes. Prefix: mk- */
.mk-display{font-family:var(--font-sans);font-weight:var(--fw-heavy);font-stretch:var(--wdth-display);font-size:var(--fs-display-xl);line-height:var(--lh-display);letter-spacing:var(--tr-display);margin:0;text-wrap:balance}
.mk-h1{font-family:var(--font-sans);font-weight:var(--fw-heavy);font-stretch:var(--wdth-brand);font-size:var(--fs-h1);line-height:1.1;letter-spacing:-0.045em;margin:0}
.mk-h2{font-family:var(--font-sans);font-weight:var(--fw-heavy);font-stretch:var(--wdth-brand);font-size:var(--fs-h2);line-height:1.02;letter-spacing:-0.04em;margin:0}
.mk-h3{font-family:var(--font-sans);font-weight:var(--fw-bold);font-size:var(--fs-h3);line-height:1.1;letter-spacing:-0.01em;margin:0}
.mk-body-lg{font-family:var(--font-sans);font-size:var(--fs-body-lg);line-height:1.45;margin:0;text-wrap:pretty}
.mk-body{font-family:var(--font-sans);font-size:var(--fs-body);line-height:var(--lh-body);color:var(--text-body);margin:0;text-wrap:pretty}
.mk-small{font-family:var(--font-sans);font-size:var(--fs-small);line-height:1.5;color:var(--text-body);margin:0}
.mk-label{font-family:var(--font-mono);font-weight:500;font-size:var(--fs-label);line-height:var(--lh-label);letter-spacing:var(--tr-label);text-transform:uppercase;color:var(--text-secondary)}
.mk-label--ink{color:var(--text-primary)}
.mk-mono{font-family:var(--font-mono);font-size:12px;line-height:1.6}

/* Brand */
.mk-wordmark{display:inline-flex;align-items:baseline;font-family:var(--font-sans);font-weight:var(--fw-heavy);font-stretch:var(--wdth-brand);letter-spacing:var(--tr-wordmark);line-height:1;color:inherit;white-space:nowrap}
.mk-wordmark .mk-i{position:relative;display:inline-block}
.mk-wordmark .mk-i__dot{position:absolute;left:.065em;top:.06em;width:var(--piece);height:var(--piece);background:var(--accent)}
.mk-wordmark--small .mk-i__dot{left:.055em;top:.05em;width:.18em;height:.18em}
.mk-wordmark--mono .mk-i__dot{background:currentColor}
.mk-wordmark--on-accent .mk-i__dot{background:var(--mk-ink)}
.mk-symbol{position:relative;display:inline-block;font-family:var(--font-sans);font-weight:var(--fw-heavy);font-stretch:var(--wdth-brand);line-height:1;letter-spacing:-0.04em}
.mk-symbol__dot{position:absolute;right:-.14em;top:.1em;width:var(--piece);height:var(--piece);background:var(--accent)}
.mk-symbol--mono .mk-symbol__dot{background:currentColor}
.mk-appicon{display:inline-flex;align-items:center;justify-content:center;background:var(--surface-inverse);color:var(--text-inverse);border-radius:var(--radius-icon)}
.mk-favicon{display:inline-flex;align-items:flex-start;justify-content:flex-end;width:16px;height:16px;padding:2px;background:var(--surface-inverse)}
.mk-favicon::after{content:"";width:6px;height:6px;background:var(--accent)}
.mk-piece{display:inline-block;width:.19em;height:.19em;background:var(--accent);margin-left:.06em;vertical-align:baseline;transform:translate(.06em,-.06em)}
.mk-piece--ui{width:var(--piece-ui);height:var(--piece-ui);margin:0;transform:none;flex:none}

/* Buttons */
.mk-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font:600 15px/1 var(--font-sans);padding:14px 20px;border:1px solid var(--border-strong);background:transparent;color:var(--text-primary);cursor:pointer;text-decoration:none;border-radius:0;transition:background var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out)}
.mk-btn:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
.mk-btn:hover{background:var(--surface-inverse);color:var(--text-inverse)}
.mk-btn:active{transform:translateY(1px)}
.mk-btn--primary{background:var(--surface-inverse);color:var(--text-inverse)}
.mk-btn--primary:hover{background:var(--accent);border-color:var(--accent);color:var(--text-on-accent)}
.mk-btn--primary:hover .mk-piece--ui{background:var(--mk-ink)}
.mk-btn--accent{background:var(--accent);border-color:var(--accent);color:var(--text-on-accent)}
.mk-btn--accent:hover{background:var(--surface-inverse);border-color:var(--surface-inverse);color:var(--text-inverse)}
.mk-btn--ghost{border-color:transparent;padding-inline:0}
.mk-btn--ghost:hover{background:transparent;color:var(--accent)}
.mk-btn--inverse{border-color:var(--text-inverse);color:var(--text-inverse)}
.mk-btn--inverse:hover{background:var(--text-inverse);color:var(--text-primary)}
.mk-btn--sm{padding:10px 14px;font-size:13px}
.mk-btn--lg{padding:18px 26px;font-size:17px}
.mk-btn--icon{padding:0;width:44px;height:44px}
.mk-btn--icon.mk-btn--sm{width:34px;height:34px}
.mk-btn[disabled],.mk-btn--disabled{opacity:.38;cursor:not-allowed;pointer-events:none}
.mk-link{display:inline-flex;align-items:center;gap:8px;font:500 12px/1 var(--font-mono);letter-spacing:var(--tr-label);text-transform:uppercase;color:var(--text-primary);text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:4px;transition:color var(--dur-fast)}
.mk-link:hover{color:var(--accent)}

/* Forms */
.mk-field{display:flex;flex-direction:column;gap:8px;font-family:var(--font-sans)}
.mk-field__top{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.mk-field__help{font:400 12px/1.4 var(--font-mono);color:var(--text-secondary)}
.mk-field--error .mk-field__help{color:var(--state-error)}
.mk-field--error .mk-field__help::before{content:"■ "}
.mk-input,.mk-textarea,.mk-select select{width:100%;font:400 16px/1.4 var(--font-sans);color:var(--text-primary);background:transparent;border:0;border-bottom:1px solid var(--border-strong);border-radius:0;padding:10px 0;outline:none;transition:border-color var(--dur-fast),box-shadow var(--dur-fast)}
.mk-input::placeholder,.mk-textarea::placeholder{color:var(--text-secondary)}
.mk-input:focus,.mk-textarea:focus,.mk-select select:focus{border-color:var(--accent);box-shadow:0 1px 0 var(--accent)}
.mk-field--error .mk-input,.mk-field--error .mk-textarea{border-color:var(--state-error)}
.mk-input:disabled,.mk-textarea:disabled{opacity:.4}
.mk-textarea{resize:vertical;min-height:96px}
.mk-select{position:relative}
.mk-select select{appearance:none;-webkit-appearance:none;padding-right:28px;cursor:pointer}
.mk-select::after{content:"↓";position:absolute;right:0;top:50%;transform:translateY(-50%);font:500 13px var(--font-mono);pointer-events:none}
.mk-check{display:inline-flex;align-items:center;gap:12px;font:400 15px/1.3 var(--font-sans);color:var(--text-primary);cursor:pointer;user-select:none}
.mk-check input{position:absolute;opacity:0;width:0;height:0}
.mk-check__box{position:relative;width:18px;height:18px;border:1px solid var(--border-strong);flex:none;transition:background var(--dur-fast)}
.mk-check input:checked + .mk-check__box{background:var(--surface-inverse)}
.mk-check input:checked + .mk-check__box::after{content:"";position:absolute;right:-4px;top:-4px;width:7px;height:7px;background:var(--accent)}
.mk-check input:focus-visible + .mk-check__box{outline:2px solid var(--focus-ring);outline-offset:2px}
.mk-check--radio .mk-check__box{border-radius:50%}
.mk-check--radio input:checked + .mk-check__box{background:transparent;box-shadow:inset 0 0 0 4px var(--mk-paper),inset 0 0 0 9px var(--mk-ink)}
.mk-check--radio input:checked + .mk-check__box::after{display:none}
.mk-switch{display:inline-flex;align-items:center;gap:12px;font:400 15px/1.3 var(--font-sans);cursor:pointer;user-select:none}
.mk-switch input{position:absolute;opacity:0;width:0;height:0}
.mk-switch__track{position:relative;width:40px;height:22px;border:1px solid var(--border-strong);flex:none;transition:background var(--dur-base) var(--ease-out)}
.mk-switch__track::after{content:"";position:absolute;left:3px;top:3px;width:14px;height:14px;background:var(--mk-ink);transition:transform var(--dur-base) var(--ease-out),background var(--dur-base)}
.mk-switch input:checked + .mk-switch__track{background:var(--surface-inverse)}
.mk-switch input:checked + .mk-switch__track::after{transform:translateX(18px);background:var(--accent)}
.mk-switch input:focus-visible + .mk-switch__track{outline:2px solid var(--focus-ring);outline-offset:2px}

/* Content */
.mk-tag{display:inline-flex;align-items:center;gap:6px;font:500 11px/1 var(--font-mono);letter-spacing:.06em;text-transform:uppercase;padding:7px 9px;border:1px solid var(--border-control);color:var(--text-primary);background:transparent}
.mk-tag--solid{background:var(--surface-inverse);border-color:var(--surface-inverse);color:var(--text-inverse)}
.mk-tag--accent{background:var(--accent);border-color:var(--accent);color:var(--text-on-accent)}
.mk-tag--status::before{content:"";width:6px;height:6px;background:var(--accent)}
.mk-card{background:var(--surface-card);padding:24px;display:flex;flex-direction:column;gap:14px;color:var(--text-primary)}
.mk-card--outline{background:transparent;border:1px solid var(--border-strong)}
.mk-card--inverse{background:var(--surface-inverse);color:var(--text-inverse)}
.mk-placeholder{position:relative;display:flex;align-items:center;justify-content:center;background-color:var(--surface-placeholder);background-image:repeating-linear-gradient(135deg,rgba(21,21,19,.07) 0 1px,transparent 1px 12px);font:400 11px var(--font-mono);color:var(--text-secondary);overflow:hidden}
.mk-placeholder--inverse{background-color:var(--surface-inverse);background-image:repeating-linear-gradient(135deg,rgba(242,239,232,.06) 0 1px,transparent 1px 12px);color:var(--text-inverse-secondary)}
.mk-placeholder--accent{background-color:var(--accent);color:var(--mk-ink)}
.mk-project{display:flex;flex-direction:column;gap:14px;color:var(--text-primary);text-decoration:none}
.mk-project__media{aspect-ratio:4/3;transition:filter var(--dur-base)}
.mk-project__index{position:absolute;left:16px;top:16px;font:500 11px/1 var(--font-mono);letter-spacing:.08em;color:inherit}
.mk-project__meta{display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap}
.mk-project__title{font-weight:700;font-stretch:var(--wdth-brand);font-size:clamp(22px,2.2vw,30px);line-height:1.05;letter-spacing:-0.03em}
.mk-project:hover .mk-project__title{color:var(--accent)}
.mk-project:hover .mk-project__media{filter:brightness(.94)}
.mk-section-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap;padding-top:var(--space-7);border-top:1px solid var(--border-strong);margin-bottom:var(--space-6)}
.mk-stat{display:flex;flex-direction:column;gap:10px}
.mk-stat__value{font-family:var(--font-sans);font-weight:var(--fw-heavy);font-stretch:var(--wdth-display);font-size:clamp(56px,8vw,120px);line-height:.8;letter-spacing:-0.06em}
.mk-step{display:grid;grid-template-columns:56px 1fr;gap:16px;padding:20px 0;border-top:1px solid var(--border-strong)}
.mk-step__n{font:500 12px/1.6 var(--font-mono)}
.mk-step__title{font:700 20px/1.2 var(--font-sans);margin-bottom:6px}

/* Navigation */
.mk-nav{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--grid-gutter);align-items:center;padding:18px var(--page-margin);background:var(--surface-page);border-bottom:1px solid var(--border-strong)}
.mk-nav__links{display:flex;justify-content:flex-end;gap:clamp(14px,2.4vw,32px);font:600 15px var(--font-sans);flex-wrap:wrap}
.mk-nav__links a{color:var(--text-primary);text-decoration:none;display:inline-flex;align-items:center;gap:8px}
.mk-nav__links a:hover,.mk-nav__links a[aria-current]{color:var(--accent)}
.mk-tabs{display:flex;gap:28px;border-bottom:1px solid var(--border-soft)}
.mk-tab{position:relative;background:none;border:0;padding:0 0 12px;font:500 12px/1 var(--font-mono);letter-spacing:var(--tr-label);text-transform:uppercase;color:var(--text-secondary);cursor:pointer}
.mk-tab:hover{color:var(--text-primary)}
.mk-tab[aria-selected="true"]{color:var(--text-primary);box-shadow:inset 0 -2px 0 var(--mk-ink)}
.mk-tab[aria-selected="true"]::after{content:"";position:absolute;right:-9px;top:-4px;width:5px;height:5px;background:var(--accent)}

/* Feedback */
.mk-tooltip{display:inline-block;background:var(--surface-inverse);color:var(--text-inverse);font:500 11px/1.3 var(--font-mono);letter-spacing:.04em;padding:7px 9px;max-width:240px}
.mk-toast{display:flex;align-items:center;gap:14px;background:var(--surface-inverse);color:var(--text-inverse);padding:14px 16px;font:400 14px/1.4 var(--font-sans);min-width:280px;max-width:420px}
.mk-toast::before{content:"";width:8px;height:8px;background:var(--accent);flex:none}
.mk-toast--success::before{background:var(--mk-paper)}
.mk-toast__action{margin-left:auto;font:500 11px var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--text-inverse);background:none;border:0;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.mk-dialog-backdrop{position:fixed;inset:0;background:var(--overlay);display:flex;align-items:center;justify-content:center;padding:24px;z-index:100}
.mk-dialog{background:var(--surface-page);border:1px solid var(--border-strong);width:100%;max-width:480px;padding:28px;display:flex;flex-direction:column;gap:18px;position:relative}
.mk-dialog__actions{display:flex;justify-content:flex-end;gap:10px;margin-top:6px}

/* Site helpers (not in the DS) */
.mk-inverse-link{text-decoration:none;color:var(--text-inverse)}
.mk-inverse-link:hover{color:var(--accent)}
.mk-toast[hidden]{display:none}
@media (max-width:640px){
  .mk-nav-meta{display:none}
}
.mk-hero-title{font-size:clamp(48px,8.4vw,110px)}
@media (max-width:560px){
  .mk-hero-title{font-size:9.4vw}
}
.mk-page-title{font-size:var(--fs-display)}
.mk-case-title{font-size:clamp(48px,8vw,136px)}
@media (max-width:560px){
  .mk-page-title,.mk-case-title{font-size:9.4vw}
}

/* Home hero screenshot slider */
.mk-hero-slide{position:absolute;inset:0;display:block;opacity:0;visibility:hidden;transform:translateY(12px);z-index:0}
.mk-hero-slide img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;display:block}
.mk-hero-slide.is-active{opacity:1;visibility:visible;transform:translateY(0);z-index:2;transition:opacity 1400ms cubic-bezier(.2,.7,.1,1),transform 1400ms cubic-bezier(.2,.7,.1,1)}
.mk-hero-slide.is-leaving{visibility:visible;transform:translateY(0);z-index:1;transition:opacity 1400ms cubic-bezier(.2,.7,.1,1)}
.mk-hero-dot{width:7px;height:7px;padding:0;border:1px solid var(--text-primary);background:transparent;cursor:pointer}
.mk-hero-dot.is-active{background:var(--text-primary)}
/* Accent (paprika) CTA: ink piece on paprika; on dark bands hover to paper so it stays visible */
.mk-btn--accent .mk-piece--ui{background:var(--mk-ink)}
.mk-btn--accent:hover .mk-piece--ui{background:var(--accent)}
.mk-btn--accent.mk-btn--on-dark:hover{background:var(--text-inverse);border-color:var(--text-inverse);color:var(--text-primary)}
.mk-btn--accent.mk-btn--on-dark{color:var(--mk-white)}

/* Reference screenshots: phones get a mobile capture in a portrait frame */
.mk-shot-pic{display:block}
@media (max-width:640px){
  .mk-shot,.mk-hero-frame{aspect-ratio:4/5 !important}
}

/* Mobile nav: logo + audit CTA + menu toggle on one row; links open below */
.mk-nav__toggle{display:none}
@media (max-width:960px){
  nav:has(.mk-nav__toggle){flex-wrap:nowrap !important;align-items:center !important}
  nav:has(.mk-nav__toggle) > div:first-child{flex:1 1 auto;min-width:0}
  .mk-nav__toggle{display:inline-flex;flex-direction:column;justify-content:center;gap:6px;order:3;width:40px;height:40px;padding:0 9px;margin-left:4px;background:none;border:1px solid var(--border-strong);color:var(--text-primary);cursor:pointer;flex:none}
  .mk-nav__toggle span{display:block;height:2px;background:currentColor;transition:transform 200ms ease}
  nav.is-open .mk-nav__toggle span:first-child{transform:translateY(4px) rotate(45deg)}
  nav.is-open .mk-nav__toggle span:last-child{transform:translateY(-4px) rotate(-45deg)}
  .mk-nav__links{order:2;flex:none;flex-wrap:nowrap}
  .mk-nav__links a:not(.mk-btn){display:none}
  nav.is-open{flex-wrap:wrap !important}
  nav.is-open .mk-nav__links{order:4;flex:1 1 100%;flex-direction:column;align-items:stretch !important;gap:0;padding-top:8px}
  nav.is-open .mk-nav__links a:not(.mk-btn){display:flex;padding:14px 0;border-top:1px solid var(--border-soft);font-size:18px}
  nav.is-open .mk-nav__links .mk-btn{order:99;align-self:flex-start;margin:12px 0 8px}
}
@media (max-width:1140px){
  .mk-nav-meta{display:none}
}
/* Sticky side column only when it sits beside its content (stacks below ~880px) */
@media (min-width:900px){
  .mk-sticky-col{position:sticky;top:96px}
}