/* shdw.work · the site's shared styles, one copy (his brief 10-14): every page loads tokens.css, then this. The main page (index.html)
   keeps only what is its own (the 3D scene, the features, the cards, the sections' frames); terms.html and privacy.html use these as they are.
   The type is D1 Cut (his pick 10-15, mockup WSibbyfnpX4mA246yULX1j): every title a credit burned into the picture (Archivo's narrow cut,
   capitals), the lines in Archivo at 72%, the index and the facts as slate marks in IBM Plex Mono, amber on the numbers and the download */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { background: var(--site-bg); color: var(--site-txt); font-family: var(--site-font); }

/* ---------- the type, one copy per job (any page) ---------- */
/* a title: narrow capitals; a line under it; a small mark (an index, a chapter, a caption) with an amber number and an amber rule */
.cut { font-family: var(--site-font); font-stretch: var(--ttl-stretch); font-weight: 700; text-transform: uppercase; --ls: -.01em; letter-spacing: var(--ls); line-height: .9; color: var(--site-txt); }
.label, :is(.ttl, .shead, .clist) .idx, .fm-here small, .fm-all p em, .cn-soon { font: 400 var(--t-label)/1.2 var(--site-mono); --ls: .14em; letter-spacing: var(--ls); text-transform: uppercase; color: var(--site-mark); }
.num { color: var(--amber); }
.rule { display: inline-block; width: 48px; height: 1px; margin: 0 12px; background: var(--amber); vertical-align: middle; }
/* the site's row title, one copy: an open card's chapters, the map's list, the cards' own titles */
.row-title, .clist .t, .fm-all h4, .ctx b { font: 700 var(--cl-ttl)/.92 var(--site-font); font-stretch: var(--ttl-stretch); text-transform: uppercase; --ls: -.01em; letter-spacing: var(--ls); color: var(--site-txt); }

/* ---------- site nav: floats above everything ---------- */
#site-nav { position: fixed; z-index: 10; top: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between;
  padding: var(--site-pad) calc(var(--bx, 0px) + var(--site-pad)); perspective: 700px; pointer-events: none; } /* its band spans the screen; its name and links line up with the content's width (the size cap) */
/* a soft black under the nav (D1), so it reads over whatever passes beneath it */
body:not(.page) #site-nav::before { content: ""; position: absolute; z-index: -1; left: 0; right: 0; top: 0; height: 110px; pointer-events: none; background: linear-gradient(rgba(5, 5, 6, .82), rgba(5, 5, 6, 0)); }
@media (max-width: 700px) { body:not(.page) #site-nav::before { height: 100px; background: linear-gradient(rgba(5, 5, 6, .95) 60%, rgba(5, 5, 6, 0)); } }
#site-nav .ni { pointer-events: auto; opacity: 0; text-decoration: none; }
#site-nav .ni:not(.pill) { color: var(--site-txt); }
.brand { display: flex; align-items: baseline; gap: 10px; }
.brand b { font: 700 var(--t-wordmark)/1 "Helvetica Neue", Helvetica, Arial, sans-serif; letter-spacing: -.01em; } /* the wordmark keeps its pre-Cut face (his call 10-15) */
.brand .mark { flex: none; align-self: center; width: var(--t-mark); height: var(--t-mark); } /* the app's own icon (his call 10-15) */
.brand small { font: 400 var(--t-nav)/1 var(--site-mono); letter-spacing: .14em; color: var(--site-mark); }
.links { display: flex; align-items: center; gap: var(--site-nav-gap); font: 400 var(--t-nav)/1 var(--site-mono); letter-spacing: .14em; text-transform: uppercase; }
@media (max-width: 700px) { .links a:not(.pill) { display: none; } }
/* THE PILL, one copy (his brief): the nav's download, the map's skip. solid = the amber one (outlined, it fills amber on hover); line = a
   warm-white outline that fills on hover. Set like the slate marks: mono capitals; nearly square corners */
.pill { display: inline-flex; align-items: center; gap: .6em; padding: var(--pill-py, .62em) var(--pill-px, 1.1em); border-radius: 2px;
  font: 400 var(--pill-fs, var(--t-nav)) / 1 var(--site-mono); letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; text-decoration: none; cursor: pointer; transition: background .2s, color .2s; }
.pill.solid { border: 1px solid var(--amber); color: var(--amber); background: rgba(5, 5, 6, .35); }
.pill.solid:hover { background: var(--amber); color: var(--on-accent); }
.pill.line { border: 1px solid rgba(238, 232, 218, .35); background: rgba(5, 5, 6, .35); color: var(--site-txt); }
.pill.line:hover { background: var(--site-txt); color: var(--site-bg); }
.pill svg { width: 1em; height: 1em; flex: none; fill: currentColor; }

/* the way text comes on, one copy for every title (feature titles, the cards' header, the cards' chapter lists, Download's pieces, the map's
   corner, a title on any page = .rise): his pick M1 Focus pull, softened (10-15): each line racks into focus, from a little soft, large and
   loose to sharp, one after another (--d); out = it goes soft and fades. Its numbers in tokens.css. The spread runs on --sp, so every piece of
   text inside takes it on top of its own spacing (--ls) */
@property --sp { syntax: '<number>'; inherits: true; initial-value: 0; }
:is(.ttl, .shead, .clist, .dl-set, .upd-set, .fm-here, .rise) .m { display: block; padding: 0 .06em .1em; }
:is(.ttl, .shead, .clist, .dl-set, .upd-set, .fm-here, .rise) .m > span { display: block; opacity: 0; filter: blur(var(--fp-blur)); transform: scale(var(--fp-zoom)); transform-origin: 0 60%; --sp: var(--fp-spread);
  transition: opacity calc(var(--rise) * .6) var(--ease-out) var(--d, 0s), filter var(--rise) var(--ease-focus) var(--d, 0s), transform var(--rise) var(--ease-focus) var(--d, 0s), --sp var(--rise) var(--ease-focus) var(--d, 0s); }
:is(.ttl, .shead, .clist, .dl-set, .upd-set, .fm-here, .rise) .m > span, :is(.ttl, .shead, .clist, .dl-set, .upd-set, .fm-here, .rise) .m > span * { letter-spacing: calc(var(--ls, 0em) + var(--sp, 0) * 1em); }
:is(.ttl, .shead, .clist, .dl-set, .upd-set, .fm-here, .rise).on .m > span { opacity: 1; filter: none; transform: none; --sp: 0; }
:is(.ttl, .shead, .clist, .dl-set, .upd-set, .fm-here, .rise).out .m > span { opacity: 0; filter: blur(var(--fp-blur)); transform: none; --sp: 0; transition-duration: calc(var(--rise) * .45); transition-delay: 0s; }
:is(.ttl, .shead, .clist, .dl-set, .upd-set, .fm-here, .rise).snap .m > span { transition: none; }
@media (prefers-reduced-motion: reduce) { :is(.ttl, .shead, .clist, .dl-set, .upd-set, .fm-here, .rise) .m > span { filter: none; transform: none; --sp: 0; transition-property: opacity; } }
:is(.ttl, .shead, .clist, .rise) .big { font: 700 var(--ttl-size)/.9 var(--site-font); font-stretch: var(--ttl-stretch); text-transform: uppercase; --ls: -.01em; color: var(--site-txt); }
:is(.ttl, .shead, .clist, .rise) .line { font: 400 var(--ttl-line)/1.4 var(--site-font); --ls: -.005em; color: var(--site-line); }

/* the footer's text and marks (its places on the main page are LAYOUT.footer; the other pages lay it out flat, below): one treatment, the
   slate marks' mono in capitals at the nav's size, his site as written; a small SHDW mark */
.ft-logo { display: block; width: calc(var(--ft-mark) * var(--k, 1) * var(--s, 1)); height: calc(var(--ft-mark) * var(--k, 1) * var(--s, 1)); color: var(--site-txt); opacity: .7; }
.ft-logo svg { display: block; width: 100%; height: 100%; }
.ft-cr, .ft-lg { font: 400 calc(var(--t-nav) * var(--s, 1)) / 1.2 var(--site-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--site-line); }
.ft-cr b { font-weight: 400; color: var(--site-txt); }
.ft-cr .url { text-transform: none; letter-spacing: .04em; }
.ft-cr .sep { display: inline-block; width: 2.2em; }
:is(.ft-cr, .ft-lg) a, a.ft-logo { color: inherit; text-decoration: none; transition: color .2s; }
.ft-cr a.url:hover, .ft-lg a:hover { color: var(--site-txt); }
/* stacked (the phone): KOAN, "lead dev", his site one under another */
.ft-cr.stack :is(b, .url, .tip) { display: block; width: max-content; }
.ft-cr.stack :is(.url, .tip) { margin-top: 8px; }
.ft-cr.stack .sep { display: none; }
/* the tooltip on "lead dev" (his 10-14): a small dark label in the mono, over it on hover */
.tip { position: relative; cursor: default; pointer-events: auto; }
.tip::after { content: attr(data-tip); position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translate(-50%, 4px); padding: 5px 9px;
  border-radius: var(--r-btn); border: 1px solid var(--line); background: var(--raised); font: 11px / 1 var(--site-mono); letter-spacing: .04em; text-transform: none;
  color: var(--site-txt); white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; }
.tip:hover::after { opacity: 1; transform: translate(-50%, 0); }
.ft-lg { display: flex; gap: 2em; }
.ft-so { display: flex; gap: calc(18px * var(--s, 1)); color: var(--site-txt); }
.ft-so svg { display: block; width: calc(18px * var(--s, 1)); height: calc(18px * var(--s, 1)); fill: currentColor; opacity: .88; }

/* ---------- a long page (terms, privacy): the nav at the top, a title that comes on, one readable column, the footer flat at the foot ---------- */
body.page { min-height: 100vh; background: radial-gradient(ellipse at 20% -10%, var(--surface-a) 0%, var(--site-bg) 60%) fixed, var(--site-bg); }
body.page #site-nav { pointer-events: auto; background: linear-gradient(var(--site-bg), transparent); }
body.page #site-nav .ni { opacity: 1; }
.doc { max-width: calc(var(--ttl-w) + 220px); margin: 0 0 0 var(--ttl-x); padding: 26vh 0 120px; }
.doc-head .m + .m { margin-top: 8px; }
.doc-head .line { max-width: var(--ttl-w); }
.doc section { display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: 12px; margin-top: 56px; }
.doc section .label { padding-top: .4em; }
.doc section .row-title { margin-bottom: 14px; }
.doc p, .doc li { max-width: 62ch; font: 400 var(--t-body)/1.6 var(--site-font); --ls: -.005em; color: var(--site-line); }
.doc p + p, .doc p + ul, .doc ul + p { margin-top: 12px; }
.doc ul { list-style: none; }
.doc li.m { position: relative; padding-left: 20px; } /* .m: over the shared padding */
.doc li + li { margin-top: 8px; }
.doc li::before { content: ""; position: absolute; left: 2px; top: .75em; width: 8px; height: 1px; background: var(--amber); }
.doc a { color: var(--site-txt); text-decoration: underline; text-decoration-color: var(--amber); text-underline-offset: 3px; }
.doc .end { margin-top: 72px; }
.foot { display: flex; align-items: center; gap: 28px; margin: 0 var(--ttl-x); padding: 48px 0 56px; border-top: 1px solid var(--surface-line); }
.foot .ft-logo { --ft-mark: 26px; }
.foot-col { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; }
@media (max-width: 700px) {
  .doc { margin: 0 20px; padding-top: 18vh; }
  .doc section { grid-template-columns: minmax(0, 1fr); }
  .doc section .label { padding: 0 0 6px; }
  .foot { align-items: flex-start; margin: 0 20px; }
  .foot-col { display: grid; }
  .foot .ft-cr { display: grid; gap: 8px; }
  .foot .ft-cr .sep { display: none; }
}