/* Nade, an independent AI studio. Almost monochrome: ink on a cool mist paper. Color appears only inside the glass
   lens (the Goldfish orange and aqua), so it reads as attention, not decoration.
   Layout: one full-height hero (statement up top, the giant wordmark at its base, the lens drifting over it),
   then a two-row index and the legal line. Host Grotesk for everything, Fragment Mono for small labels. */
:root{
  --paper:#F1F2F4; --ink:#0C0D10; --ink-2:#41454D; --mute:#727782; --line:rgba(12,13,16,.12);
  --amber:#FF7A1F; --aqua:#1FA9C9;
  --display:'Host Grotesk',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'Fragment Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --gutter:clamp(16px,3.4vw,48px);
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){--paper:#0A0B0D;--ink:#ECEDEF;--ink-2:#B7BCC4;--mute:#868C96;--line:rgba(236,237,239,.13);--amber:#FF8A3A;--aqua:#3CC4E0;color-scheme:dark}
}
:root[data-theme="dark"]{--paper:#0A0B0D;--ink:#ECEDEF;--ink-2:#B7BCC4;--mute:#868C96;--line:rgba(236,237,239,.13);--amber:#FF8A3A;--aqua:#3CC4E0;color-scheme:dark}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--paper)}
body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.55 var(--display);-webkit-font-smoothing:antialiased;font-synthesis:none}
a{color:inherit}
a:focus-visible{outline:2px solid var(--ink);outline-offset:4px;border-radius:6px}

/* the lens mark: a small glass disc */
.mark{width:14px;height:14px;border-radius:50%;flex:none;display:inline-block;
  background:radial-gradient(circle at 32% 28%,rgba(255,255,255,.95) 0 14%,transparent 34%),linear-gradient(135deg,var(--amber),var(--aqua));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.35),0 1px 3px rgba(0,0,0,.18)}

/* header floats over the hero */
.top{position:absolute;inset:0 0 auto 0;z-index:3;display:flex;align-items:center;gap:20px;
  padding:calc(var(--gutter)*.75 + env(safe-area-inset-top,0px)) var(--gutter) 0}
.brand{display:inline-flex;align-items:center;gap:9px;text-decoration:none;font-weight:800;font-size:21px;letter-spacing:-.045em;line-height:1}
.top nav{margin-left:auto;display:flex;gap:clamp(16px,2.4vw,30px)}
.top nav a{text-decoration:none;font-size:15px;font-weight:500;color:var(--ink-2)}
.top nav a:hover{color:var(--ink)}

/* hero */
.hero{position:relative;display:flex;flex-direction:column;overflow:hidden;isolation:isolate;
  min-height:max(600px,100vh,var(--need,0px))}
@supports (height:100svh){.hero{min-height:max(600px,100svh,var(--need,0px))}}
.lens{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:0;opacity:0;transition:opacity .7s ease}
.gl-ready .lens{opacity:1}
.intro{position:relative;z-index:1;padding:calc(var(--gutter)*.75 + 104px + env(safe-area-inset-top,0px)) var(--gutter) 0;max-width:1000px}
.eyebrow{margin:0 0 22px;font:12px/1.2 var(--mono);text-transform:uppercase;letter-spacing:.16em;color:var(--mute)}
h1{margin:0;font-weight:500;font-size:clamp(40px,5.6vw,84px);line-height:.98;letter-spacing:-.045em;text-wrap:balance}
.lede{margin:24px 0 0;max-width:42ch;font-size:clamp(17px,1.3vw,19px);line-height:1.5;color:var(--ink-2);text-wrap:pretty}
/* the CSS wordmark: shown only without WebGL (the canvas draws its own) */
.wordmark{position:relative;z-index:0;margin:auto 0 0;padding:calc(var(--gutter)*1.2) var(--gutter) calc(var(--gutter)*.55);
  font-weight:800;font-size:calc((100vw - 2 * var(--gutter)) / 2.1);line-height:.74;letter-spacing:-.04em;color:var(--ink);
  white-space:nowrap;pointer-events:none;user-select:none}
.js .wordmark{display:none}
.js.nogl .wordmark{display:block}

/* index */
.index{padding:clamp(48px,7vw,104px) var(--gutter) clamp(40px,6vw,88px);display:grid}
.row{display:grid;grid-template-columns:56px minmax(150px,240px) minmax(0,1fr) auto 28px;align-items:center;gap:clamp(14px,2.2vw,28px);
  padding:20px 0;border-top:1px solid var(--line);text-decoration:none}
.row:last-child{border-bottom:1px solid var(--line)}
.icon{width:56px;height:56px;border-radius:13px;display:block}
.mark-lg{border-radius:50%;width:44px;height:44px;margin:6px;
  background:radial-gradient(circle at 32% 28%,rgba(255,255,255,.95) 0 12%,transparent 32%),linear-gradient(135deg,var(--amber),var(--aqua));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.35),0 6px 18px -6px rgba(0,0,0,.35)}
.name{font-size:clamp(20px,1.9vw,26px);font-weight:600;letter-spacing:-.025em;line-height:1.1}
.desc{color:var(--ink-2);font-size:16px}
.meta{font:12px/1.3 var(--mono);text-transform:uppercase;letter-spacing:.12em;color:var(--mute);text-align:right}
.go{font-size:20px;color:var(--mute);transition:transform .25s ease,color .25s ease;justify-self:end}
.row:hover .go{transform:translate(3px,-3px);color:var(--ink)}
.row:hover .name{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1.5px}

/* footer */
.foot{display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px;padding:0 var(--gutter) calc(32px + env(safe-area-inset-bottom,0px));
  font:12px/1.4 var(--mono);text-transform:uppercase;letter-spacing:.1em;color:var(--mute)}
.foot .grow{flex:1}
.foot a{text-decoration:none}
.foot a:hover{color:var(--ink)}

/* privacy and terms */
.page .top{position:static;padding-bottom:var(--gutter)}
.doc{padding:clamp(32px,6vw,72px) var(--gutter) 64px;max-width:calc(68ch + 2 * var(--gutter))}
.doc h1{font-size:clamp(36px,5vw,60px);font-weight:500}
.doc .updated{margin:14px 0 36px;font:12px var(--mono);text-transform:uppercase;letter-spacing:.12em;color:var(--mute)}
.doc h2{margin:36px 0 10px;font-size:21px;font-weight:600;letter-spacing:-.02em}
.doc p,.doc li{color:var(--ink-2);line-height:1.65}
.doc ul{padding-left:20px;margin:10px 0}
.doc li{margin:6px 0}
.doc li b{color:var(--ink);font-weight:600}
.doc a{text-underline-offset:3px}
.page .foot{border-top:1px solid var(--line);padding-top:24px}

@media (max-width:720px){
  .hero{min-height:max(520px,var(--need,0px))}
  .intro{padding-top:calc(var(--gutter) + 84px + env(safe-area-inset-top,0px))}
  .eyebrow{margin-bottom:16px;font-size:11px}
  .lede{margin-top:18px}
  .row{grid-template-columns:48px minmax(0,1fr) 24px;grid-template-areas:"icon name go" "icon desc go" "icon meta go";row-gap:4px;padding:18px 0}
  .row .icon{grid-area:icon;width:48px;height:48px;border-radius:11px;align-self:start}
  .row .mark-lg{width:38px;height:38px;margin:5px;border-radius:50%}
  .row .name{grid-area:name}
  .row .desc{grid-area:desc;font-size:15px}
  .row .meta{grid-area:meta;text-align:left;font-size:11px}
  .row .go{grid-area:go;align-self:center}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}