inductiveML/monarch-webgpu

1/* Inductive ML — elegant crimson-silk lava system (shared) */2/* Fonts are loaded via <link> in Layout.astro for non-blocking delivery. */3 4:root {5  --ink: #fbf6ef;6  --ink-2: #e7d9cc;7  --mute: rgba(251, 246, 239, 0.62);8  --faint: rgba(251, 246, 239, 0.4);9 10  --dark: #140503;11  --dark-2: #1c0805;12  --line: rgba(251, 246, 239, 0.12);13  --line-2: rgba(251, 246, 239, 0.07);14 15  --ember: #ff6a1a;16  --amber: #ffb066;17 18  --display: "Space Grotesk", "Inter Tight", system-ui, sans-serif;19  --body: "Spectral", Georgia, serif;20  --mono: "JetBrains Mono", ui-monospace, monospace;21 22  --pad: clamp(26px, 5vw, 72px);23  --measure: 66ch;24}25 26* {27  box-sizing: border-box;28}29html,30body {31  margin: 0;32}33html {34  scroll-behavior: smooth;35}36body {37  font-family: var(--body);38  color: var(--ink);39  background: var(--dark);40  -webkit-font-smoothing: antialiased;41}42a {43  color: inherit;44  text-decoration: none;45}46button {47  font: inherit;48  color: inherit;49  background: none;50  border: none;51  cursor: pointer;52  padding: 0;53}54canvas {55  display: block;56}57::selection {58  background: rgba(255, 106, 26, 0.32);59  color: #fff;60}61 62/* ---------- texture overlays ---------- */63.grain {64  position: absolute;65  inset: 0;66  pointer-events: none;67  z-index: 1;68  opacity: 0.28;69  mix-blend-mode: soft-light;70  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");71  background-size: 170px 170px;72}73#embers {74  position: absolute;75  inset: 0;76  z-index: 1;77  pointer-events: none;78}79 80/* faint etched generative glyphs scattered in the lava */81.etch {82  position: absolute;83  z-index: 1;84  pointer-events: none;85  color: #fff;86  opacity: 0.085;87}88.etch-tree {89  top: 8%;90  right: 6%;91  width: 150px;92}93.etch-figs {94  bottom: 12%;95  right: 9%;96  width: 220px;97}98.etch-sun {99  top: 14%;100  left: 40%;101  width: 92px;102  opacity: 0.06;103}104@media (max-width: 700px) {105  .etch-tree,106  .etch-figs {107    display: none;108  }109}110 111/* ---------- home: full lava ---------- */112.lava-stage {113  position: fixed;114  inset: 0;115  overflow: hidden;116  background:117    radial-gradient(60% 70% at 30% 20%, #e0402a, transparent 60%),118    radial-gradient(70% 80% at 80% 70%, #c81200, transparent 60%),119    radial-gradient(100% 100% at 50% 100%, #5e0c04, transparent 70%), #8c1206;120}121#lava {122  position: absolute;123  inset: 0;124  width: 100%;125  height: 100%;126}127 128.overlay {129  position: relative;130  z-index: 3;131  height: 100vh;132  display: flex;133  flex-direction: column;134  justify-content: space-between;135  padding: var(--pad);136  pointer-events: none;137}138.overlay a,139.overlay button {140  pointer-events: auto;141}142.overlay::after {143  content: "";144  position: absolute;145  inset: 0;146  z-index: -1;147  pointer-events: none;148  background:149    radial-gradient(120% 90% at 0% 66%, rgba(120, 38, 0, 0.16), transparent 60%),150    linear-gradient(180deg, transparent 64%, rgba(120, 38, 0, 0.18) 100%);151}152 153/* ---------- brand / meta / nav ---------- */154.brand {155  display: inline-flex;156  align-items: center;157  gap: 12px;158  white-space: nowrap;159  font-family: var(--display);160  font-weight: 500;161  font-size: 22px;162  letter-spacing: 0.01em;163  text-shadow: 0 1px 22px rgba(50, 10, 0, 0.5);164}165.brand svg {166  display: block;167}168.meta {169  font-family: var(--mono);170  font-size: 11px;171  letter-spacing: 0.2em;172  text-transform: uppercase;173  color: var(--ink-2);174  text-shadow: 0 1px 16px rgba(50, 10, 0, 0.5);175}176 177header.bar {178  display: flex;179  align-items: center;180  justify-content: space-between;181}182.top-nav {183  display: flex;184  gap: 26px;185  font-family: var(--mono);186  font-size: 11px;187  letter-spacing: 0.16em;188  text-transform: uppercase;189}190.top-nav a {191  color: var(--ink);192  position: relative;193  padding: 4px 0;194  transition: opacity 180ms ease;195  text-shadow: 0 1px 14px rgba(90, 26, 0, 0.4);196}197.top-nav a:hover,198.top-nav a.on {199  opacity: 0.7;200}201 202/* ---------- home hero — left rail ---------- */203.home-main {204  flex: 1;205  display: flex;206  align-items: center;207  position: relative;208}209.home-rail {210  position: absolute;211  left: 0;212  top: 0;213  bottom: 0;214  display: flex;215  align-items: center;216}217.home-rail span {218  writing-mode: vertical-rl;219  transform: rotate(180deg);220  font-family: var(--mono);221  font-size: 11px;222  letter-spacing: 0.3em;223  text-transform: uppercase;224  color: var(--ink-2);225  text-shadow: 0 1px 14px rgba(90, 26, 0, 0.4);226}227.home-body {228  margin-left: 64px;229}230.home-kicker {231  font-family: var(--mono);232  font-size: 11px;233  letter-spacing: 0.24em;234  text-transform: uppercase;235  color: #ffd9a8;236  margin: 0 0 22px;237  text-shadow: 0 1px 16px rgba(90, 26, 0, 0.45);238}239.mission {240  font-family: var(--display);241  font-weight: 400;242  font-size: clamp(38px, 6.6vw, 96px);243  line-height: 1;244  letter-spacing: -0.025em;245  margin: 0;246  max-width: 15ch;247  text-wrap: balance;248  text-shadow:249    0 2px 30px rgba(120, 40, 0, 0.34),250    0 1px 2px rgba(80, 24, 0, 0.28);251}252.mission .it {253  font-style: italic;254}255.mission .soft {256  font-style: italic;257  color: var(--ink-2);258}259@media (max-width: 680px) {260  .home-rail {261    display: none;262  }263  .home-body {264    margin-left: 0;265  }266}267 268.links {269  display: flex;270  flex-wrap: wrap;271  gap: 12px 28px;272  margin-top: 36px;273}274.links a {275  position: relative;276  font-family: var(--mono);277  font-size: 12px;278  font-weight: 400;279  letter-spacing: 0.12em;280  text-transform: uppercase;281  display: inline-flex;282  align-items: center;283  gap: 8px;284  border-bottom: 1px solid rgba(255, 240, 230, 0.4);285  text-shadow: 0 1px 18px rgba(45, 9, 0, 0.5);286  padding-bottom: 3px;287}288.links a .ar {289  font-size: 14px;290  opacity: 0.8;291  transition: transform 220ms ease;292}293.links a::after {294  content: "";295  position: absolute;296  left: 0;297  bottom: 0;298  height: 1px;299  width: 100%;300  background: currentColor;301  opacity: 0.5;302  transform: scaleX(0);303  transform-origin: left;304  transition: transform 300ms cubic-bezier(0.2, 0.7, 0.2, 1);305}306.links a:hover::after {307  transform: scaleX(1);308}309.links a:hover .ar {310  transform: translate(2px, -2px);311}312 313footer.bar {314  display: flex;315  justify-content: space-between;316  align-items: baseline;317  gap: 16px;318}319footer.bar .meta {320  opacity: 0.82;321}322 323/* ---------- inner pages (writing / about / post) ---------- */324.page {325  position: relative;326  min-height: 100vh;327}328/* persistent ambient ember glow on the dark reading surface */329.page::before {330  content: "";331  position: fixed;332  inset: 0;333  z-index: 0;334  pointer-events: none;335  background:336    radial-gradient(45% 38% at 88% 92%, rgba(255, 90, 0, 0.16), transparent 70%),337    radial-gradient(40% 34% at 6% 4%, rgba(255, 120, 40, 0.1), transparent 70%);338}339.page > * {340  position: relative;341  z-index: 2;342}343 344.masthead {345  position: relative;346  min-height: clamp(320px, 46vh, 460px);347  display: flex;348  overflow: hidden;349  border-bottom: 1px solid var(--line);350}351.masthead #lava {352  position: absolute;353  inset: 0;354  width: 100%;355  height: 100%;356}357.masthead::after {358  content: "";359  position: absolute;360  inset: 0;361  z-index: 2;362  pointer-events: none;363  background: linear-gradient(364    180deg,365    rgba(20, 4, 0, 0.34) 0%,366    transparent 30%,367    rgba(20, 5, 3, 0.55) 78%,368    var(--dark) 100%369  );370}371.masthead-inner {372  position: relative;373  z-index: 3;374  flex: 1;375  width: 100%;376  max-width: 1080px;377  margin: 0 auto;378  padding: var(--pad);379  display: flex;380  flex-direction: column;381  justify-content: space-between;382  gap: 40px;383}384.mh-top {385  display: flex;386  align-items: center;387  justify-content: space-between;388}389.mh-back {390  white-space: nowrap;391  font-family: var(--mono);392  font-size: 11px;393  letter-spacing: 0.16em;394  text-transform: uppercase;395  color: var(--ink-2);396  display: inline-flex;397  gap: 9px;398  align-items: center;399}400.mh-back:hover {401  color: var(--ink);402}403.page-kicker {404  font-family: var(--mono);405  font-size: 11px;406  letter-spacing: 0.22em;407  text-transform: uppercase;408  color: var(--amber);409  margin-bottom: 14px;410}411.page-title {412  font-family: var(--display);413  font-weight: 400;414  font-size: clamp(40px, 5.4vw, 72px);415  line-height: 1.05;416  letter-spacing: -0.01em;417  margin: 0;418  text-wrap: balance;419  text-shadow: 0 2px 40px rgba(45, 9, 0, 0.5);420  max-width: 24ch;421}422 423.wrap {424  max-width: 1080px;425  margin: 0 auto;426  padding: clamp(40px, 6vw, 80px) var(--pad);427}428.reader {429  max-width: 720px;430}431 432/* ---------- writing index ---------- */433.post-list {434  border-top: 1px solid var(--line);435}436.post-row {437  display: grid;438  grid-template-columns: 150px 1fr auto;439  gap: 28px;440  align-items: baseline;441  padding: 30px 0;442  border-bottom: 1px solid var(--line);443  transition: padding-left 240ms cubic-bezier(0.2, 0.7, 0.2, 1);444}445.post-row:hover {446  padding-left: 12px;447}448.post-row .date {449  font-family: var(--mono);450  font-size: 11px;451  letter-spacing: 0.14em;452  text-transform: uppercase;453  color: var(--amber);454}455.post-row .ttl {456  display: block;457  font-family: var(--display);458  font-size: clamp(26px, 3vw, 38px);459  font-weight: 400;460  line-height: 1.1;461  letter-spacing: -0.01em;462}463.post-row .ex {464  display: block;465  font-family: var(--body);466  font-size: 15px;467  color: var(--mute);468  margin-top: 8px;469  max-width: 52ch;470  line-height: 1.55;471}472.post-row .arr {473  font-family: var(--mono);474  font-size: 14px;475  color: var(--amber);476}477.post-row.soon {478  opacity: 0.5;479}480.post-row.soon .arr {481  color: var(--faint);482}483@media (max-width: 680px) {484  .post-row {485    grid-template-columns: 1fr;486    gap: 8px;487  }488  .post-row .arr {489    display: none;490  }491}492 493/* ---------- article ---------- */494.article-lede {495  font-family: var(--display);496  font-style: italic;497  font-weight: 400;498  font-size: clamp(24px, 3vw, 32px);499  line-height: 1.32;500  color: var(--ink-2);501  margin: 0 0 40px;502}503.article-body > p {504  font-size: 18px;505  line-height: 1.72;506  color: var(--ink);507  margin: 0 0 24px;508}509.article-body h2 {510  font-family: var(--display);511  font-weight: 500;512  font-size: clamp(28px, 3.4vw, 38px);513  letter-spacing: -0.01em;514  margin: 52px 0 16px;515}516.article-body blockquote {517  font-family: var(--display);518  font-style: italic;519  font-size: clamp(24px, 3vw, 32px);520  line-height: 1.36;521  color: var(--amber);522  margin: 36px 0;523  padding-left: 26px;524  border-left: 1px solid rgba(255, 176, 102, 0.5);525}526.article-body ol,527.article-body ul {528  font-size: 18px;529  line-height: 1.7;530  color: var(--ink);531  padding-left: 22px;532  margin: 0 0 24px;533}534.article-body li {535  margin: 9px 0;536}537.article-body li::marker {538  color: var(--amber);539}540.article-body code {541  font-family: var(--mono);542  font-size: 0.84em;543  background: rgba(255, 255, 255, 0.06);544  padding: 1px 6px;545  border-radius: 4px;546}547.article-meta {548  display: flex;549  flex-wrap: wrap;550  gap: 26px;551  margin: 0 0 44px;552  padding-bottom: 28px;553  border-bottom: 1px solid var(--line);554}555.article-meta .kv .k {556  font-family: var(--mono);557  font-size: 10px;558  letter-spacing: 0.16em;559  text-transform: uppercase;560  color: var(--faint);561  display: block;562  margin-bottom: 4px;563}564.article-meta .kv .v {565  font-family: var(--mono);566  font-size: 12.5px;567  color: var(--ink-2);568}569 570/* ---------- about ---------- */571.about-grid {572  display: grid;573  grid-template-columns: 1.1fr 0.9fr;574  gap: 56px;575  align-items: start;576}577.about-bio p {578  font-size: 18px;579  line-height: 1.72;580  color: var(--ink);581  margin: 0 0 20px;582  max-width: 54ch;583}584.about-bio p.big {585  font-family: "Spectral", Georgia, serif;586  font-style: italic;587  font-size: clamp(24px, 3vw, 32px);588  line-height: 1.36;589  color: var(--ink-2);590}591.profile {592  display: grid;593  gap: 1px;594  background: var(--line-2);595  border: 1px solid var(--line);596  border-radius: 14px;597  overflow: hidden;598}599.profile a {600  display: flex;601  align-items: center;602  justify-content: space-between;603  gap: 16px;604  padding: 16px 20px;605  background: rgba(255, 255, 255, 0.018);606  transition: background 180ms ease;607}608.profile a:hover {609  background: rgba(255, 106, 26, 0.08);610}611.profile .k {612  font-family: var(--mono);613  font-size: 10.5px;614  letter-spacing: 0.14em;615  text-transform: uppercase;616  color: var(--mute);617}618.profile .v {619  font-family: var(--mono);620  font-size: 13px;621  color: var(--ink);622  text-align: right;623  white-space: nowrap;624}625.profile .v .a {626  color: var(--amber);627  margin-left: 10px;628}629@media (max-width: 800px) {630  .about-grid {631    grid-template-columns: 1fr;632    gap: 36px;633  }634}635 636/* ---------- site footer ---------- */637.site-foot {638  max-width: 1080px;639  margin: 0 auto;640  padding: 36px var(--pad) 56px;641  display: flex;642  justify-content: space-between;643  align-items: baseline;644  gap: 16px;645  border-top: 1px solid var(--line);646}647.site-foot .meta {648  color: var(--mute);649}650.site-foot .l {651  font-family: var(--display);652  font-size: 18px;653}654