/* 8MG tokens. Change here, whole site moves. */
:root{
  --canvas:#0f0d08;      /* oklch(0.160 0.011 89.3) */
  --ink:#efe9dc;         /* oklch(0.935 0.018 86.1) */
  --gold:#c9a84c;        /* oklch(0.743 0.117 89.5) */
  --gold-deep:#a3843c;   /* oklch(0.628 0.098 85.9) */
  --red:#b8483c;         /* oklch(0.550 0.148 28.9) */
  --muted:#8a8272;       /* oklch(0.609 0.025 84.6) */
  --display:'M PLUS Rounded 1c',sans-serif;
  --body:'Arvo',serif;
  --t-caption:16px;
  --t-body:clamp(18px,1.4vw,20px);
  --t-lead:clamp(22.5px,2.2vw,28px);
  --t-h3:clamp(28px,3.4vw,44px);
  --t-h2:clamp(35px,4.4vw,55px);
  --t-h1:clamp(44px,6vw,69px);
  --t-hero:clamp(72px,14vw,176px);
  --header-h:64px;
  --gutter:clamp(20px,6vw,96px);
  --s1:8px;--s2:16px;--s3:24px;--s4:40px;--s5:64px;--s6:104px;--s7:168px;
  --ease:cubic-bezier(0.22,1,0.36,1);
  --d-feedback:120ms;--d-state:240ms;--d-layout:400ms;--d-entrance:700ms;
}
html{background:var(--canvas)}
main section,footer,header{box-sizing:border-box}
body{margin:0;background:var(--canvas);color:var(--ink);font-family:var(--body);-webkit-font-smoothing:antialiased;text-wrap:pretty}
a{color:var(--gold);transition:color var(--d-state) var(--ease),opacity var(--d-state) var(--ease),transform var(--d-feedback) var(--ease)}
a:hover{color:var(--ink)}
a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
input::placeholder{color:var(--muted);opacity:1}
[data-btn]{transition:transform var(--d-feedback) var(--ease),opacity var(--d-state) var(--ease),background-color var(--d-state) var(--ease),color var(--d-state) var(--ease)}
[data-btn]:hover{transform:translateY(-2px)}
[data-btn]:hover>span{transform:translateX(2px)}
[data-btn]:active{transform:translateY(0) scale(0.98)}
[data-btn][disabled],[data-btn][data-state="disabled"]{opacity:0.45;pointer-events:none}
[data-btn][data-state="loading"]{pointer-events:none;color:transparent;position:relative}
[data-btn][data-state="loading"]::after{content:"";position:absolute;inset:0;margin:auto;width:18px;height:18px;border:2px solid var(--canvas);border-right-color:transparent;border-radius:50%;animation:spin 700ms linear infinite}
[data-btn][data-state="error"]{outline:2px solid var(--red);outline-offset:2px}
[data-btn][data-state="success"]{background:var(--ink)}
[data-field][data-state="error"]{border-bottom-color:var(--red)}
[data-field][data-state="success"]{border-bottom-color:var(--gold)}
/* motion: reveal, parallax, hover */
[data-reveal]{opacity:0;transform:translate3d(0,28px,0);transition:opacity var(--d-entrance) var(--ease),transform var(--d-entrance) var(--ease);transition-delay:calc(var(--i,0) * 90ms)}
[data-reveal][data-inview]{opacity:1;transform:none}
[data-motion="off"] [data-reveal]{opacity:1;transform:none;transition:none}
[data-parallax]{transform:translate3d(0,var(--py,0%),0) scale(1.12);transition:transform var(--d-layout) var(--ease);will-change:transform}
[data-btn]{position:relative;overflow:hidden}
[data-btn]::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform var(--d-state) var(--ease)}
[data-btn]:hover::after,[data-btn]:focus-visible::after{transform:scaleX(1)}
[data-btn]>svg{transition:transform var(--d-state) var(--ease)}
[data-btn]:hover>svg{transform:translateX(3px)}
nav a,footer a,[data-link]{position:relative}
nav a::after,footer a::after,[data-link]::after{content:"";position:absolute;left:0;right:0;bottom:6px;height:1px;background:var(--gold);transform:scaleX(0);transform-origin:right;transition:transform var(--d-state) var(--ease)}
nav a:hover::after,footer a:hover::after,[data-link]:hover::after{transform:scaleX(1);transform-origin:left}
nav a[aria-current="page"]::after{display:none}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes spin{to{transform:rotate(360deg)}}
[data-rise]{animation:rise var(--d-entrance) var(--ease) both}
@keyframes rise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
[data-tapbar]{display:none}
@media (max-width:899px){
  [data-tapbar]{display:flex}
  body{padding-bottom:64px}
  [data-desktop-only]{display:none!important}
}
@media (min-width:900px){
  html{scroll-snap-type:y proximity;scroll-padding-top:var(--header-h)}
  [data-snap]{scroll-snap-align:start}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  html{scroll-snap-type:none}
}
