/* PINWHEELS. Black page, Times New Roman, one column, no boxes.
   Text is metal: a smooth reflection gradient clipped to the letters, then lit
   in 3D by the SVG filters at the top of index.html.
   Sections are divided by rows of pinwheel stars (assets/stars-rule.svg). */

:root {
  --star-s1: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20100%20100%22%3E%3Cdefs%3E%3ClinearGradient%20id=%22g%22%20x1=%220%22%20y1=%220%22%20x2=%220%22%20y2=%221%22%3E%3Cstop%20offset=%220%22%20stop-color=%22%23ffffff%22/%3E%3Cstop%20offset=%22.34%22%20stop-color=%22%23dde5f0%22/%3E%3Cstop%20offset=%22.58%22%20stop-color=%22%2393a1b4%22/%3E%3Cstop%20offset=%22.8%22%20stop-color=%22%23f2f6fb%22/%3E%3Cstop%20offset=%221%22%20stop-color=%22%23c6cfdb%22/%3E%3C/linearGradient%3E%3Cfilter%20id=%22m%22%20x=%22-30%25%22%20y=%22-30%25%22%20width=%22160%25%22%20height=%22160%25%22%20color-interpolation-filters=%22sRGB%22%3E%3CfeGaussianBlur%20in=%22SourceAlpha%22%20stdDeviation=%221.5%22%20result=%22b%22/%3E%3CfeDiffuseLighting%20in=%22b%22%20surfaceScale=%224%22%20diffuseConstant=%221.25%22%20lighting-color=%22%23fff%22%20result=%22d%22%3E%3CfeDistantLight%20azimuth=%22228%22%20elevation=%2258%22/%3E%3C/feDiffuseLighting%3E%3CfeComposite%20in=%22d%22%20in2=%22SourceAlpha%22%20operator=%22in%22%20result=%22dc%22/%3E%3CfeSpecularLighting%20in=%22b%22%20surfaceScale=%224%22%20specularConstant=%221.5%22%20specularExponent=%2224%22%20lighting-color=%22%23fff%22%20result=%22s%22%3E%3CfeDistantLight%20azimuth=%22228%22%20elevation=%2258%22/%3E%3C/feSpecularLighting%3E%3CfeComposite%20in=%22s%22%20in2=%22SourceAlpha%22%20operator=%22in%22%20result=%22sc%22/%3E%3CfeBlend%20in=%22SourceGraphic%22%20in2=%22dc%22%20mode=%22multiply%22%20result=%22bd%22/%3E%3CfeBlend%20in=%22bd%22%20in2=%22sc%22%20mode=%22screen%22/%3E%3C/filter%3E%3C/defs%3E%3Cg%20filter=%22url(%23m)%22%3E%3Cpath%20transform=%22translate(4.0,89.9)%20scale(0.0536,-0.0536)%22%20d=%22M1269%201157Q1269%201157%20978%201034Q978%201034%20859%20746Q859%20746%201269%201157ZM1439%20745Q1439%20745%201146%20865Q1146%20865%20859%20745Q859%20745%201439%20745ZM1269%20334Q1269%20334%201146%20625Q1146%20625%20859%20744Q859%20744%201269%20334ZM858%20164Q858%20164%20977%20457Q977%20457%20858%20744Q858%20744%20858%20164ZM447%20334Q447%20334%20738%20457Q738%20457%20857%20744Q857%20744%20447%20334ZM277%20745Q277%20745%20570%20626Q570%20626%20857%20745Q857%20745%20277%20745ZM447%201157Q447%201157%20570%20866Q570%20866%20857%20746Q857%20746%20447%201157ZM858%201327Q858%201327%20739%201034Q739%201034%20858%20746Q858%20746%20858%201327ZM858%201520%201017%201129%201405%201293%201241%20905%201632%20745%201241%20586%201405%20198%201017%20362%20858%20-29%20699%20362%20311%20198%20475%20586%2084%20745%20475%20905%20311%201293%20699%201129Z%22%20fill=%22url(%23g)%22/%3E%3C/g%3E%3C/svg%3E");
  --star-s2: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20100%20100%22%3E%3Cdefs%3E%3ClinearGradient%20id=%22g%22%20x1=%220%22%20y1=%220%22%20x2=%220%22%20y2=%221%22%3E%3Cstop%20offset=%220%22%20stop-color=%22%23ffffff%22/%3E%3Cstop%20offset=%22.34%22%20stop-color=%22%23dde5f0%22/%3E%3Cstop%20offset=%22.58%22%20stop-color=%22%2393a1b4%22/%3E%3Cstop%20offset=%22.8%22%20stop-color=%22%23f2f6fb%22/%3E%3Cstop%20offset=%221%22%20stop-color=%22%23c6cfdb%22/%3E%3C/linearGradient%3E%3Cfilter%20id=%22m%22%20x=%22-30%25%22%20y=%22-30%25%22%20width=%22160%25%22%20height=%22160%25%22%20color-interpolation-filters=%22sRGB%22%3E%3CfeGaussianBlur%20in=%22SourceAlpha%22%20stdDeviation=%221.5%22%20result=%22b%22/%3E%3CfeDiffuseLighting%20in=%22b%22%20surfaceScale=%224%22%20diffuseConstant=%221.25%22%20lighting-color=%22%23fff%22%20result=%22d%22%3E%3CfeDistantLight%20azimuth=%22228%22%20elevation=%2258%22/%3E%3C/feDiffuseLighting%3E%3CfeComposite%20in=%22d%22%20in2=%22SourceAlpha%22%20operator=%22in%22%20result=%22dc%22/%3E%3CfeSpecularLighting%20in=%22b%22%20surfaceScale=%224%22%20specularConstant=%221.5%22%20specularExponent=%2224%22%20lighting-color=%22%23fff%22%20result=%22s%22%3E%3CfeDistantLight%20azimuth=%22228%22%20elevation=%2258%22/%3E%3C/feSpecularLighting%3E%3CfeComposite%20in=%22s%22%20in2=%22SourceAlpha%22%20operator=%22in%22%20result=%22sc%22/%3E%3CfeBlend%20in=%22SourceGraphic%22%20in2=%22dc%22%20mode=%22multiply%22%20result=%22bd%22/%3E%3CfeBlend%20in=%22bd%22%20in2=%22sc%22%20mode=%22screen%22/%3E%3C/filter%3E%3C/defs%3E%3Cg%20filter=%22url(%23m)%22%3E%3Cpath%20transform=%22translate(4.0,89.9)%20scale(0.0536,-0.0536)%22%20d=%22M858%201520%20970%20940%201529%201133%201082%20746%201529%20359%20970%20552%20858%20-29%20746%20552%20187%20359%20634%20746%20187%201133%20746%20940Z%22%20fill=%22url(%23g)%22/%3E%3C/g%3E%3C/svg%3E");
  --star-s3: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20100%20100%22%3E%3Cdefs%3E%3ClinearGradient%20id=%22g%22%20x1=%220%22%20y1=%220%22%20x2=%220%22%20y2=%221%22%3E%3Cstop%20offset=%220%22%20stop-color=%22%23ffffff%22/%3E%3Cstop%20offset=%22.34%22%20stop-color=%22%23dde5f0%22/%3E%3Cstop%20offset=%22.58%22%20stop-color=%22%2393a1b4%22/%3E%3Cstop%20offset=%22.8%22%20stop-color=%22%23f2f6fb%22/%3E%3Cstop%20offset=%221%22%20stop-color=%22%23c6cfdb%22/%3E%3C/linearGradient%3E%3Cfilter%20id=%22m%22%20x=%22-30%25%22%20y=%22-30%25%22%20width=%22160%25%22%20height=%22160%25%22%20color-interpolation-filters=%22sRGB%22%3E%3CfeGaussianBlur%20in=%22SourceAlpha%22%20stdDeviation=%221.5%22%20result=%22b%22/%3E%3CfeDiffuseLighting%20in=%22b%22%20surfaceScale=%224%22%20diffuseConstant=%221.25%22%20lighting-color=%22%23fff%22%20result=%22d%22%3E%3CfeDistantLight%20azimuth=%22228%22%20elevation=%2258%22/%3E%3C/feDiffuseLighting%3E%3CfeComposite%20in=%22d%22%20in2=%22SourceAlpha%22%20operator=%22in%22%20result=%22dc%22/%3E%3CfeSpecularLighting%20in=%22b%22%20surfaceScale=%224%22%20specularConstant=%221.5%22%20specularExponent=%2224%22%20lighting-color=%22%23fff%22%20result=%22s%22%3E%3CfeDistantLight%20azimuth=%22228%22%20elevation=%2258%22/%3E%3C/feSpecularLighting%3E%3CfeComposite%20in=%22s%22%20in2=%22SourceAlpha%22%20operator=%22in%22%20result=%22sc%22/%3E%3CfeBlend%20in=%22SourceGraphic%22%20in2=%22dc%22%20mode=%22multiply%22%20result=%22bd%22/%3E%3CfeBlend%20in=%22bd%22%20in2=%22sc%22%20mode=%22screen%22/%3E%3C/filter%3E%3C/defs%3E%3Cg%20filter=%22url(%23m)%22%3E%3Cpath%20transform=%22translate(4.0,89.9)%20scale(0.0536,-0.0536)%22%20d=%22M858%201520%20971%201019%201405%201293%201132%20859%201632%20745%201132%20632%201405%20198%20971%20472%20858%20-29%20745%20472%20311%20198%20584%20632%2084%20745%20584%20859%20311%201293%20745%201019Z%22%20fill=%22url(%23g)%22/%3E%3C/g%3E%3C/svg%3E");
  --star-p1: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20100%20100%22%3E%3Cdefs%3E%3ClinearGradient%20id=%22g%22%20x1=%220%22%20y1=%220%22%20x2=%220%22%20y2=%221%22%3E%3Cstop%20offset=%220%22%20stop-color=%22%23ffffff%22/%3E%3Cstop%20offset=%22.34%22%20stop-color=%22%23dcc4ff%22/%3E%3Cstop%20offset=%22.58%22%20stop-color=%22%239a72d6%22/%3E%3Cstop%20offset=%22.8%22%20stop-color=%22%23efe4ff%22/%3E%3Cstop%20offset=%221%22%20stop-color=%22%23c0a3ec%22/%3E%3C/linearGradient%3E%3Cfilter%20id=%22m%22%20x=%22-30%25%22%20y=%22-30%25%22%20width=%22160%25%22%20height=%22160%25%22%20color-interpolation-filters=%22sRGB%22%3E%3CfeGaussianBlur%20in=%22SourceAlpha%22%20stdDeviation=%221.5%22%20result=%22b%22/%3E%3CfeDiffuseLighting%20in=%22b%22%20surfaceScale=%224%22%20diffuseConstant=%221.25%22%20lighting-color=%22%23fff%22%20result=%22d%22%3E%3CfeDistantLight%20azimuth=%22228%22%20elevation=%2258%22/%3E%3C/feDiffuseLighting%3E%3CfeComposite%20in=%22d%22%20in2=%22SourceAlpha%22%20operator=%22in%22%20result=%22dc%22/%3E%3CfeSpecularLighting%20in=%22b%22%20surfaceScale=%224%22%20specularConstant=%221.5%22%20specularExponent=%2224%22%20lighting-color=%22%23fff%22%20result=%22s%22%3E%3CfeDistantLight%20azimuth=%22228%22%20elevation=%2258%22/%3E%3C/feSpecularLighting%3E%3CfeComposite%20in=%22s%22%20in2=%22SourceAlpha%22%20operator=%22in%22%20result=%22sc%22/%3E%3CfeBlend%20in=%22SourceGraphic%22%20in2=%22dc%22%20mode=%22multiply%22%20result=%22bd%22/%3E%3CfeBlend%20in=%22bd%22%20in2=%22sc%22%20mode=%22screen%22/%3E%3C/filter%3E%3C/defs%3E%3Cg%20filter=%22url(%23m)%22%3E%3Cpath%20transform=%22translate(4.0,89.9)%20scale(0.0536,-0.0536)%22%20d=%22M1269%201157Q1269%201157%20978%201034Q978%201034%20859%20746Q859%20746%201269%201157ZM1439%20745Q1439%20745%201146%20865Q1146%20865%20859%20745Q859%20745%201439%20745ZM1269%20334Q1269%20334%201146%20625Q1146%20625%20859%20744Q859%20744%201269%20334ZM858%20164Q858%20164%20977%20457Q977%20457%20858%20744Q858%20744%20858%20164ZM447%20334Q447%20334%20738%20457Q738%20457%20857%20744Q857%20744%20447%20334ZM277%20745Q277%20745%20570%20626Q570%20626%20857%20745Q857%20745%20277%20745ZM447%201157Q447%201157%20570%20866Q570%20866%20857%20746Q857%20746%20447%201157ZM858%201327Q858%201327%20739%201034Q739%201034%20858%20746Q858%20746%20858%201327ZM858%201520%201017%201129%201405%201293%201241%20905%201632%20745%201241%20586%201405%20198%201017%20362%20858%20-29%20699%20362%20311%20198%20475%20586%2084%20745%20475%20905%20311%201293%20699%201129Z%22%20fill=%22url(%23g)%22/%3E%3C/g%3E%3C/svg%3E");
  --star-p2: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20100%20100%22%3E%3Cdefs%3E%3ClinearGradient%20id=%22g%22%20x1=%220%22%20y1=%220%22%20x2=%220%22%20y2=%221%22%3E%3Cstop%20offset=%220%22%20stop-color=%22%23ffffff%22/%3E%3Cstop%20offset=%22.34%22%20stop-color=%22%23dcc4ff%22/%3E%3Cstop%20offset=%22.58%22%20stop-color=%22%239a72d6%22/%3E%3Cstop%20offset=%22.8%22%20stop-color=%22%23efe4ff%22/%3E%3Cstop%20offset=%221%22%20stop-color=%22%23c0a3ec%22/%3E%3C/linearGradient%3E%3Cfilter%20id=%22m%22%20x=%22-30%25%22%20y=%22-30%25%22%20width=%22160%25%22%20height=%22160%25%22%20color-interpolation-filters=%22sRGB%22%3E%3CfeGaussianBlur%20in=%22SourceAlpha%22%20stdDeviation=%221.5%22%20result=%22b%22/%3E%3CfeDiffuseLighting%20in=%22b%22%20surfaceScale=%224%22%20diffuseConstant=%221.25%22%20lighting-color=%22%23fff%22%20result=%22d%22%3E%3CfeDistantLight%20azimuth=%22228%22%20elevation=%2258%22/%3E%3C/feDiffuseLighting%3E%3CfeComposite%20in=%22d%22%20in2=%22SourceAlpha%22%20operator=%22in%22%20result=%22dc%22/%3E%3CfeSpecularLighting%20in=%22b%22%20surfaceScale=%224%22%20specularConstant=%221.5%22%20specularExponent=%2224%22%20lighting-color=%22%23fff%22%20result=%22s%22%3E%3CfeDistantLight%20azimuth=%22228%22%20elevation=%2258%22/%3E%3C/feSpecularLighting%3E%3CfeComposite%20in=%22s%22%20in2=%22SourceAlpha%22%20operator=%22in%22%20result=%22sc%22/%3E%3CfeBlend%20in=%22SourceGraphic%22%20in2=%22dc%22%20mode=%22multiply%22%20result=%22bd%22/%3E%3CfeBlend%20in=%22bd%22%20in2=%22sc%22%20mode=%22screen%22/%3E%3C/filter%3E%3C/defs%3E%3Cg%20filter=%22url(%23m)%22%3E%3Cpath%20transform=%22translate(4.0,89.9)%20scale(0.0536,-0.0536)%22%20d=%22M858%201520%20974%201177%201245%201416%201174%201061%201529%201132%201290%20861%201632%20746%201290%20630%201529%20359%201174%20430%201245%2075%20974%20314%20858%20-29%20742%20314%20471%2075%20542%20430%20187%20359%20426%20630%2084%20746%20426%20861%20187%201132%20542%201061%20471%201416%20742%201177Z%22%20fill=%22url(%23g)%22/%3E%3C/g%3E%3C/svg%3E");
}

html { background: #000; }

body {
  position: relative;
  font-family: "Times New Roman", Times, serif;
  font-size: 22px;
  line-height: 1.3;
  max-width: 640px;
  margin: 48px auto 80px;
  padding: 0 16px;
  text-align: center;
  color: #d9dde6;
}

/* ---- chrome ---- */
/* silver */
.chrome, .foot, .nav span {
  color: transparent;
  background: linear-gradient(180deg,
    #ffffff 0%, #dfe9f6 14%, #94a6bb 33%, #5d6b7c 47%,
    #9fadbe 60%, #eef3fa 78%, #b6c1cf 92%, #dee6ef 100%);
  -webkit-background-clip: text;
  background-clip: text;
}
/* silver, running text */
p, .silver-lines {
  color: transparent;
  background: linear-gradient(180deg,
    #ffffff 0%, #dfe9f6 14%, #94a6bb 33%, #5d6b7c 47%,
    #9fadbe 60%, #eef3fa 78%, #b6c1cf 92%, #dee6ef 100%);
  -webkit-background-clip: text;
  background-clip: text;
}
/* purple */
a {
  color: transparent;
  background: linear-gradient(180deg,
    #ffffff 0%, #d3b6ff 28%, #8f60cc 52%, #c7a4f0 72%, #f3eaff 100%);
  -webkit-background-clip: text;
  background-clip: text;
}
/* links are bare until hovered, then a row of pinwheels grows in underneath */
a { text-decoration: none; position: relative; }
a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -.42em;
  height: .40em;
  min-height: 9px;
  background: var(--star-s1) repeat-x center / auto 100%;
  opacity: 0;
  transform: scaleX(.25);
  transition: opacity .2s ease, transform .28s cubic-bezier(.2,.8,.3,1);
}
a:hover::after, a:focus-visible::after { opacity: 1; transform: scaleX(1); }
a:focus-visible { outline: none; }

/* real 3D metal: the SVG filters at the top of index.html light a height map
   built from each element's own alpha, so the shading follows the letterforms */
.defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.nav a, .nav span, .foot { filter: url(#mtl); }
.big a { filter: url(#mtlbig); }
.portrait { filter: drop-shadow(0 1px 0 rgba(255,255,255,.5)) drop-shadow(0 -1px 0 rgba(0,0,0,.9)); }

.wordmark { margin: 0 0 10px; }
/* the highlight sweep rides on its own layer; animating the gradient inside the
   SVG instead would force the lighting filter to re-render every frame */
.wordmark .glint { animation: sweep 7s linear infinite; will-change: transform; }
@keyframes sweep { from { transform: translateX(0); } to { transform: translateX(1620px); } }
.wordmark svg {
  display: block;
  width: 100%;
  max-width: 620px;
  height: auto;
  margin: 0 auto;
}
.wordmark .spin {
  /* without these the rotation origin is the middle of the viewBox and the
     star swings around the whole canvas instead of spinning in place */
  transform-box: fill-box;
  transform-origin: center;
  animation: spin 14s linear infinite;
}
@keyframes spin { to { rotate: 360deg; } }

/* ---- star rules instead of lines ---- */
hr {
  border: 0;
  height: 22px;
  margin: 28px auto;
  background: url("assets/stars-rule.svg") repeat-x center / auto 22px;
}

/* ---- nav ---- */
.nav { margin: 0; font-size: 20px; }
.nav a { text-decoration: none; }
.nav a:hover { text-decoration: underline; }
.nav span { display: inline-block; margin: 0 10px; font-size: 16px; }

/* ---- portrait, framed in stars ---- */
img { max-width: 100%; height: auto; display: block; margin: 0 auto; }
.portrait {
  width: 300px;
  box-sizing: border-box;
  border: 34px solid transparent;
  border-image: url("assets/stars-frame.svg") 100 round;
  margin-bottom: 20px;
}

.big { font-size: 34px; margin: 0; }
.foot { font-size: 14px; letter-spacing: 0.25em; margin: 0; }

/* ---- pinwheel stars: out of the centre, orbiting the page ----
   Each star is a pre-lit SVG (the 3D lighting is baked into the image, not
   recomputed every frame), and only transform and opacity animate, so this
   whole layer stays on the compositor. */
.stars {
  position: fixed; inset: 0; overflow: hidden;
  pointer-events: none; z-index: 0;
}
.stars i {
  position: absolute;
  left: 50%; top: 50%;
  background-repeat: no-repeat;
  background-size: contain;
  animation: orbit linear infinite;
}


.stars .s1 { background-image: var(--star-s1); }
.stars .s2 { background-image: var(--star-s2); }
.stars .s3 { background-image: var(--star-s3); }
.stars .p1 { background-image: var(--star-p1); }
.stars .p2 { background-image: var(--star-p2); }

@keyframes orbit {
  0%   { transform: translate(-50%,-50%) rotate(var(--a)) translateX(0); opacity: 0; }
  12%  { opacity: .95; }
  80%  { opacity: .95; }
  100% { transform: translate(-50%,-50%) rotate(calc(var(--a) + var(--turn))) translateX(var(--r));
         opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .wordmark .glint { animation: none; }
  .stars i {
    animation: none; opacity: .9;
    transform: translate(-50%,-50%) rotate(var(--a)) translateX(var(--rs));
  }
}


@media (max-width: 600px) {
  body { font-size: 18px; margin-top: 28px; }
  .nav { font-size: 15px; }
  .nav span { margin: 0 4px; font-size: 12px; }
  .big { font-size: 22px; }
  .portrait { width: 100%; border-width: 26px; }
}