/*
 * base.css: artbucket.io's foundation, on every page. The Artbucket design system as CSS: ink on paper, this week's
 * accent as the only color, Funnel Display 440 headlines whose second line is muted, pill buttons, hairline grids,
 * one dark band a page, motion of 180ms for feedback and 320ms for a reveal, nothing on load, reduced motion respected.
 *
 * Mobile first: the rules before a min-width block are the phone's; 641px (tablet), 1000px (desktop nav) and 1100px add.
 *
 * Tokens (custom properties on :root)
 *   --paper --panel --line --ink --muted          ink on paper; panel for demo frames; line for hairlines only
 *   --night --night-panel --night-line --night-ink --night-muted   the one dark band, code, recorded demos
 *   --accent --on-accent                          this week's accent, from BrandHub's live tokens (the stylesheet
 *                                                 https://hub.artbucket.io/artbucket/artbucket/tokens?format=css every
 *                                                 page loads first): a fill, never text; text on it is --on-accent
 *   --radius-sm (4) --radius-md (18) --radius-lg (24) --radius-pill
 *   --display --sans --mono                       Funnel Display, Funnel Sans, Geist Mono (public/fonts, OFL)
 *   --ease --fast (180ms feedback) --reveal (320ms)
 *
 * Classes
 *   Layout   .container (1240px, 16px gutter, 32px from 641px)  .sec (a section's padding)  .sec-flush (no top)
 *            .bg-panel (a panel band)  .night (the dark band)  .intro (headline beside its lede, 2 columns when wide)
 *   Type     .display-xl .display .heading-1 .heading-2 .heading-3 (Funnel Display 440, a .mut span is the muted line)
 *            .text-lede .text-small .text-label .mono .muted  .eb (eyebrow: <p class="eb"><i></i>Label</p>)
 *   Controls .btn (outlined pill)  .btn--primary (ink, accent halo)  .btn--sm  .btn--on-accent (on an accent fill)
 *            .choice (a chip that toggles: aria-pressed="true" or aria-selected="true" is on)  .tag  .tag--accent
 *            .text-link (a link with an arrow)
 *   Surfaces .hairline (a grid with 1px lines between cells)  .rows (a hairline list, one row a <div> or <li>)
 *            .frame (a demo frame on panel)  .night-card (a dark card)  .app-icon (the mark on an accent tile, --s sizes it)
 *            .logo-chip (a text chip for a brand Simple Icons has no logo for)
 *   Motion   .rise (rises in as it scrolls into view, CSS only)  .live (a pulsing status)  .is-new (a row arriving)
 *   Chrome   .skip  .site-header (.site-nav, .site-drop, .site-menu: the mega menus; .site-burger: the phone sheet)
 *            .site-footer. Both are copied into every page (scripts/site.test.mjs keeps them identical); site.js
 *            drives the menus.
 */
@font-face{font-family:'Funnel Display';font-style:normal;font-weight:300 800;font-display:swap;src:url(/fonts/funnel-display-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+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Funnel Sans';font-style:normal;font-weight:300 800;font-display:swap;src:url(/fonts/funnel-sans-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+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Geist Mono';font-style:normal;font-weight:100 900;font-display:swap;src:url(/fonts/geist-mono-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+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --paper:var(--color-background,#ffffff);--panel:var(--color-panel,#f5f4f8);--line:var(--color-border,#e6e5ee);
  --ink:var(--color-ink,#16152a);--muted:var(--color-muted,#5e5d73);
  --night:var(--color-dark,#0f0e1c);--night-panel:#1a1930;--night-line:#2c2b44;--night-ink:#f2f1f7;--night-muted:#a3a2b8;
  --accent:var(--color-primary,#c6f432);--on-accent:var(--color-on-primary,#16152a);
  --radius-sm:4px;--radius-md:18px;--radius-lg:24px;--radius-pill:999px;
  --display:'Funnel Display',system-ui,sans-serif;--sans:'Funnel Sans',system-ui,sans-serif;--mono:'Geist Mono',ui-monospace,monospace;
  --ease:cubic-bezier(.23,1,.32,1);--fast:180ms;--reveal:320ms;
  --header-h:64px;
  color-scheme:light;
}

/* Reset */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--header-h) + 24px)}
body{margin:0;background:var(--paper);color:var(--ink);font:400 1rem/1.55 var(--sans);font-kerning:normal;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
img,svg,video,iframe{display:block;max-width:100%}
img{height:auto}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
::selection{background:var(--accent);color:var(--on-accent)}
[hidden]{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip{position:fixed;left:16px;top:-80px;z-index:100;background:var(--paper);color:var(--ink);padding:10px 18px;border-radius:var(--radius-pill);border:1.5px solid var(--ink);font-weight:600;text-decoration:none}
.skip:focus{top:12px}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}

/* Layout */
.container{width:100%;max-width:1240px;margin-inline:auto;padding-inline:16px}
.sec{padding-block:72px}
.sec.sec-flush{padding-top:0}
.bg-panel{background:var(--panel)}
.night{background:var(--night);color:var(--night-ink)}
.night .muted,.night .mut{color:var(--night-muted)}
.intro{display:grid;gap:24px 40px;align-items:end;margin-bottom:40px}
@media (min-width:641px){.container{padding-inline:32px}.sec{padding-block:112px}}
@media (min-width:1000px){.intro{grid-template-columns:repeat(2,minmax(0,1fr));margin-bottom:56px}}

/* Type */
.display-xl,.display,.heading-1,.heading-2{font-family:var(--display);font-weight:440;margin:0}
.display-xl{font-size:clamp(2.75rem,1.2rem + 5.6vw,6rem);line-height:.95;letter-spacing:-.045em}
.display{font-size:clamp(2.5rem,1.6rem + 3.6vw,4.25rem);line-height:1;letter-spacing:-.03em}
.heading-1{font-size:clamp(2rem,1.5rem + 2vw,3rem);line-height:1.02;letter-spacing:-.03em}
.heading-2{font-size:clamp(1.625rem,1.35rem + 1vw,2.125rem);line-height:1.1;letter-spacing:-.02em}
.heading-3{font-family:var(--display);font-size:1.5rem;line-height:1.2;font-weight:600;letter-spacing:-.015em;margin:0}
.mut,.muted{color:var(--muted)}
.text-lede{font-size:clamp(1.125rem,1.05rem + .3vw,1.25rem);line-height:1.5;color:var(--muted);margin:0;max-width:640px;text-wrap:pretty}
.text-small{font-size:.875rem;line-height:1.5}
.text-label{font-size:.75rem;line-height:1.3;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.mono{font-family:var(--mono)}
.eb{display:flex;align-items:center;gap:10px;font-size:.875rem;line-height:1;font-weight:600;margin:0 0 20px}
.eb i{flex:none;display:block;width:14px;height:8px;border-radius:var(--radius-sm);background:var(--accent)}

/* Controls */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:48px;padding:0 24px;border-radius:var(--radius-pill);border:1.5px solid var(--ink);background:transparent;color:var(--ink);font:600 1rem var(--sans);text-decoration:none;white-space:nowrap;transition:transform var(--fast) var(--ease),background-color var(--fast) var(--ease)}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:scale(.97)}
.btn--primary{background:var(--ink);color:var(--paper);box-shadow:0 0 0 3px var(--accent)}
.btn--sm{height:40px;padding:0 18px;font-size:.9375rem}
.btn--on-accent{border-color:var(--on-accent);color:var(--on-accent)}
.btn--ink{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.choice{display:inline-flex;align-items:center;height:32px;padding:0 14px;border-radius:var(--radius-pill);border:1px solid var(--muted);background:var(--paper);color:var(--ink);font:500 .875rem var(--sans);white-space:nowrap;transition:background-color var(--fast) var(--ease),color var(--fast) var(--ease),border-color var(--fast) var(--ease)}
.choice:hover{background:var(--panel)}
.choice[aria-pressed=true],.choice[aria-selected=true]{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.choices{display:flex;flex-wrap:wrap;gap:8px}
.tag{display:inline-flex;align-items:center;height:22px;padding:0 8px;border-radius:var(--radius-pill);font:500 .6875rem var(--sans);letter-spacing:.04em;text-transform:uppercase;background:var(--panel);color:var(--muted);border:1px solid var(--line);white-space:nowrap;vertical-align:middle}
.tag--accent{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.text-link{font-weight:600;color:inherit;text-underline-offset:4px}
.text-link:hover{text-decoration-thickness:2px}

/* Surfaces */
.hairline{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius-md);overflow:hidden}
.hairline>*{background:var(--paper)}
.rows{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius-sm);overflow:hidden;margin:0;padding:0;list-style:none}
.rows>*{background:var(--paper);padding:14px 16px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.frame{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-lg);padding:18px}
.night-card{background:var(--night);color:var(--night-ink);border-radius:var(--radius-md);padding:24px}
.app-icon{--s:32px;flex:none;display:inline-grid;place-items:center;width:var(--s);height:var(--s);border-radius:25%;background:var(--accent);color:var(--on-accent)}
.app-icon::after{content:"";width:62%;height:62%;background:currentColor;-webkit-mask:url(/mark.svg) center/contain no-repeat;mask:url(/mark.svg) center/contain no-repeat}
.logo-chip{display:inline-flex;align-items:center;font-size:.6875rem;font-weight:600;border:1px solid var(--line);border-radius:var(--radius-pill);padding:2px 8px;white-space:nowrap}
@media (min-width:641px){.frame{padding:32px}}

/* Motion: feedback 180ms, a reveal 320ms, nothing on load; asked for less, none. */
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){.rise{animation:rise linear both;animation-timeline:view();animation-range:entry 0 entry 30%}}
  .live{animation:live 2.4s ease-in-out infinite}
  .is-new{animation:arrive var(--reveal) var(--ease) both}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:1ms!important;animation-iteration-count:1!important;transition-duration:1ms!important}}
@keyframes rise{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
@keyframes live{0%,100%{opacity:1}50%{opacity:.45}}
@keyframes arrive{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}

/* Header: sticky, frosted. Platform, Solutions and Resources open full-width mega menus from 1000px; below, the
   burger opens a sheet where they fold open in place. */
.site-header{position:sticky;top:0;z-index:50;border-bottom:1px solid var(--line);font-family:var(--sans)}
/* The frost sits on a layer of its own: a backdrop-filter on the header would make it the box the phone sheet's
   position:fixed measures from. */
.site-header::before{content:"";position:absolute;inset:0;z-index:-1;background:rgb(255 255 255 / .94);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.site-nav{display:flex;align-items:center;gap:6px;height:var(--header-h);position:static}
.site-logo{display:flex;align-items:center;gap:10px;margin-right:auto;color:var(--ink);text-decoration:none;font:500 1.375rem/1 var(--display);letter-spacing:-.02em}
.site-signin{display:none;padding:8px 14px;font-size:.9375rem;font-weight:500;color:var(--ink);text-decoration:none}
.site-cta.btn{height:40px;padding:0 18px;font-size:.9375rem}
.site-burger{display:grid;place-content:center;gap:5px;width:44px;height:44px;margin-left:4px;border:0;background:transparent;border-radius:var(--radius-pill)}
.site-burger span{display:block;width:20px;height:1.5px;background:var(--ink);transition:transform var(--fast) var(--ease)}
.site-burger[aria-expanded=true] span:first-child{transform:translateY(3.25px) rotate(45deg)}
.site-burger[aria-expanded=true] span:last-child{transform:translateY(-3.25px) rotate(-45deg)}
.site-links{display:none;position:fixed;inset:var(--header-h) 0 0;overflow-y:auto;overscroll-behavior:contain;background:var(--paper);padding:12px 16px 40px;border-top:1px solid var(--line)}
.site-links.is-open{display:block}
.site-link,.site-drop-btn{display:flex;align-items:center;justify-content:space-between;gap:6px;width:100%;padding:14px 4px;border:0;border-bottom:1px solid var(--line);background:transparent;color:var(--ink);font:500 1.0625rem var(--sans);text-decoration:none;text-align:left}
.site-chev{transition:transform var(--fast) var(--ease)}
.site-drop-btn[aria-expanded=true] .site-chev{transform:rotate(180deg)}
.site-menu{display:none;padding:8px 0 16px}
.site-drop-btn[aria-expanded=true]+.site-menu{display:block}
.site-menu-in{display:grid;gap:24px;padding:0}
.site-menu-cols{display:grid;gap:20px}
.site-menu-col{display:flex;flex-direction:column;gap:2px}
.site-menu-hd{margin:0 0 6px;font-size:.75rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.site-menu-item{display:flex;gap:12px;align-items:flex-start;padding:10px 12px;margin:0 -12px;border-radius:12px;color:var(--ink);text-decoration:none;transition:background-color var(--fast) var(--ease)}
.site-menu-item:hover{background:var(--panel)}
.site-menu-item svg{flex:none;width:20px;height:20px;margin-top:2px;color:var(--muted);fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.site-menu-item b{display:block;font-size:.9375rem;font-weight:600}
.site-menu-item small{display:block;margin-top:2px;font-size:.8125rem;line-height:1.4;color:var(--muted)}
.site-menu-feat{position:relative;overflow:hidden;display:flex;flex-direction:column;gap:10px;min-height:200px;padding:24px;border-radius:var(--radius-md);background:var(--night);color:var(--night-ink);text-decoration:none}
.site-menu-feat>*{position:relative}
.site-menu-feat .glow{position:absolute;right:-80px;bottom:-110px;width:260px;height:260px;border-radius:50%;background:var(--accent);opacity:.35;filter:blur(50px)}
.site-menu-feat .mono{font-size:.75rem;color:var(--night-muted)}
.site-menu-feat .feat-title{font:440 1.75rem/1.05 var(--display);letter-spacing:-.03em}
.site-menu-feat .feat-line{font-size:.875rem;line-height:1.45;color:var(--night-muted)}
.site-menu-feat .feat-cta{margin-top:auto;font-size:.875rem;font-weight:600}
.site-links .site-signin{display:flex}
@media (min-width:641px){.site-links{padding-inline:32px}.site-menu-cols{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:1000px){
  :root{--header-h:68px}
  .site-nav{height:68px}
  .site-logo{margin-right:16px}
  .site-burger{display:none}
  .site-signin{display:inline-flex;margin-left:auto}
  .site-links{display:flex;align-items:center;gap:2px;position:static;overflow:visible;padding:0;border:0;background:transparent}
  .site-links .site-signin{display:none}
  .site-link,.site-drop-btn{width:auto;padding:8px 14px;border:0;border-radius:var(--radius-pill);font-size:.9375rem;justify-content:flex-start;transition:background-color var(--fast) var(--ease)}
  .site-link:hover,.site-drop-btn:hover,.site-drop-btn[aria-expanded=true]{background:var(--panel)}
  .site-menu{position:absolute;left:0;right:0;top:100%;padding:0;background:var(--paper);border-bottom:1px solid var(--line);box-shadow:0 24px 48px -32px rgb(22 21 42 / .28)}
  .site-menu-in{grid-template-columns:minmax(0,1fr) 320px;gap:40px;padding:32px 32px 36px}
  .site-menu-cols{gap:32px}
  .site-menu-feat{min-height:240px}
}
@media (min-width:1000px) and (prefers-reduced-motion:no-preference){.site-drop-btn[aria-expanded=true]+.site-menu{animation:drop 220ms var(--ease) both}}
@keyframes drop{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
body.sheet-open{overflow:hidden}

/* Footer */
.site-footer{border-top:1px solid var(--line);padding:64px 0 40px;font-family:var(--sans);color:var(--ink)}
.site-footer-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 32px}
.site-footer-brand{grid-column:1/-1;display:flex;flex-direction:column;gap:14px;font-size:.875rem;color:var(--muted)}
.site-footer-brand .site-logo{margin:0}
.site-footer h2{margin:0 0 14px;font:600 .875rem/1.3 var(--sans);letter-spacing:0;color:var(--ink)}
.site-footer ul{list-style:none;margin:0;padding:0;display:grid;gap:10px;font-size:.875rem}
.site-footer ul a{color:var(--muted);text-decoration:none}
.site-footer ul a:hover{color:var(--ink)}
.site-footer-bottom{display:flex;flex-wrap:wrap;gap:12px 24px;justify-content:space-between;margin-top:56px;padding-top:24px;border-top:1px solid var(--line);font-size:.8125rem;color:var(--muted)}
.site-footer .legal-note{margin:16px 0 0;font-size:.75rem;line-height:1.5;color:var(--muted)}
@media (min-width:1000px){.site-footer-cols{grid-template-columns:1.4fr repeat(4,minmax(0,1fr))}.site-footer-brand{grid-column:auto}}